/* ── AI Chat Widget – constitution.my ── */
/* Institutional style: --accent:#2563eb, clean lines, professional tone */

.janus-fab{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:9000;
  width:54px;
  height:54px;
  border-radius:50%;
  border:none;
  background:var(--accent,#2563eb);
  color:#fff;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(37,99,235,.28),0 2px 6px rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease,box-shadow .2s ease;
}
.janus-fab:hover{
  transform:scale(1.05);
  box-shadow:0 6px 22px rgba(37,99,235,.34),0 3px 8px rgba(0,0,0,.08);
}
.janus-fab:active{transform:scale(.97)}
.janus-fab .jfab-icon{transition:transform .25s ease,opacity .2s ease}
.janus-fab.open .jfab-icon{transform:rotate(90deg);opacity:0;position:absolute}
.janus-fab .jfab-close{
  position:absolute;
  opacity:0;
  transform:rotate(-90deg);
  transition:transform .25s ease,opacity .2s ease;
}
.janus-fab.open .jfab-close{opacity:1;transform:rotate(0deg)}

/* Pulse hint */
.janus-fab:not(.open)::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid var(--accent,#2563eb);
  opacity:0;
  animation:janus-pulse 2.5s ease-out 2s 2;
}
@keyframes janus-pulse{
  0%{transform:scale(1);opacity:.45}
  100%{transform:scale(1.35);opacity:0}
}

/* ── Chat panel ── */
.janus-panel{
  position:fixed;
  bottom:92px;
  right:24px;
  z-index:8999;
  width:480px;
  max-width:calc(100vw - 32px);
  height:560px;
  max-height:calc(100vh - 140px);
  background:var(--card,#fff);
  border:1px solid var(--line,#e2e8f0);
  border-radius:14px;
  box-shadow:0 16px 56px rgba(15,23,42,.13),0 4px 18px rgba(15,23,42,.06);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  opacity:0;
  transform:translateY(12px) scale(.97);
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.janus-panel.open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

/* ── Panel header ── */
.janus-hdr{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--line,#e2e8f0);
  background:var(--bg,#f5f7fb);
  flex-shrink:0;
  position:relative;
}
/* Accent top stripe */
.janus-hdr::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--accent,#2563eb);
  border-radius:14px 14px 0 0;
}
.janus-hdr-icon{
  width:30px;
  height:30px;
  border-radius:8px;
  background:var(--accent,#2563eb);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.janus-hdr-icon svg{color:#fff;width:16px;height:16px}
.janus-hdr-info{flex:1;min-width:0}
.janus-hdr-title{
  font-size:13.5px;
  font-weight:600;
  color:var(--text,#0f172a);
  line-height:1.2;
  letter-spacing:-0.01em;
}
.janus-hdr-sub{
  font-size:11.5px;
  color:var(--muted,#64748b);
  line-height:1.3;
}
.janus-hdr-close{
  width:28px;height:28px;
  border-radius:6px;border:none;
  background:none;cursor:pointer;
  color:var(--muted,#64748b);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.janus-hdr-close:hover{
  background:rgba(0,0,0,.06);
  color:var(--text,#0f172a);
}

/* ── Messages area ── */
.janus-msgs{
  flex:1;
  overflow-y:auto;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
}
.janus-msgs::-webkit-scrollbar{width:4px}
.janus-msgs::-webkit-scrollbar-track{background:transparent}
.janus-msgs::-webkit-scrollbar-thumb{background:#d4d8e0;border-radius:4px}

/* ── Welcome state ── */
.janus-welcome{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px 20px;
  flex:1;
}
.janus-welcome-icon{
  width:44px;height:44px;
  border-radius:10px;
  background:var(--accent-bg,rgba(37,99,235,.08));
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.janus-welcome-icon svg{color:var(--accent,#2563eb)}
.janus-welcome h3{
  font-size:15px;
  font-weight:600;
  color:var(--text,#0f172a);
  margin-bottom:5px;
  letter-spacing:-0.01em;
}
.janus-welcome p{
  font-size:13px;
  color:var(--muted,#64748b);
  line-height:1.55;
  max-width:340px;
}
.janus-suggestions{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:14px;
  width:100%;
  max-width:360px;
}
.janus-sug-btn{
  padding:9px 14px;
  border:1px solid var(--line,#e2e8f0);
  border-radius:10px;
  background:var(--card,#fff);
  color:var(--text,#0f172a);
  font-size:13px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:all .18s ease;
  font-family:inherit;
  line-height:1.4;
}
.janus-sug-btn:hover{
  border-color:var(--accent,#2563eb);
  background:var(--accent-bg,rgba(37,99,235,.06));
  color:var(--accent,#2563eb);
}

/* ── Message bubbles ── */
.janus-msg{display:flex;flex-direction:column;max-width:92%}
.janus-msg.user{align-self:flex-end}
.janus-msg.bot{align-self:flex-start}

.janus-bubble{
  padding:10px 14px;
  border-radius:12px;
  font-size:13.5px;
  line-height:1.65;
  word-break:break-word;
}
.janus-msg.user .janus-bubble{
  background:var(--accent,#2563eb);
  color:#fff;
  border-bottom-right-radius:4px;
}
.janus-msg.bot .janus-bubble{
  background:var(--bg,#f5f7fb);
  color:var(--text,#0f172a);
  border:1px solid var(--line,#e2e8f0);
  border-bottom-left-radius:4px;
}

/* Bot message markdown */
.janus-msg.bot .janus-bubble p{margin:0 0 7px}
.janus-msg.bot .janus-bubble p:last-child{margin-bottom:0}
.janus-msg.bot .janus-bubble strong{font-weight:600}
.janus-msg.bot .janus-bubble ul,
.janus-msg.bot .janus-bubble ol{margin:4px 0 7px 18px;padding:0}
.janus-msg.bot .janus-bubble li{margin:2px 0;line-height:1.55}
.janus-msg.bot .janus-bubble a{
  color:var(--accent,#2563eb);
  text-decoration:none;
  font-weight:500;
  border-bottom:1px solid rgba(37,99,235,.25);
  transition:border-color .15s;
}
.janus-msg.bot .janus-bubble a:hover{
  border-bottom-color:var(--accent,#2563eb);
}

/* Article reference links in bot messages */
.janus-msg.bot .janus-bubble a.ref-link{
  font-weight:600;
  white-space:nowrap;
}

/* ── Sources block under bot message ── */
.janus-sources{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:6px;
  padding:0 2px;
}
.janus-src-tag{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px 8px;
  border-radius:6px;
  background:var(--accent-bg,rgba(37,99,235,.06));
  color:var(--accent,#2563eb);
  font-size:11px;
  font-weight:600;
  text-decoration:none;
  transition:background .15s;
  line-height:1.3;
  cursor:pointer;
  border:none;
  font-family:inherit;
}
.janus-src-tag:hover{
  background:rgba(37,99,235,.12);
}
.janus-src-tag svg{
  width:10px;height:10px;
  flex-shrink:0;
  opacity:.7;
}

/* ── Typing indicator ── */
.janus-typing{display:flex;gap:4px;padding:4px 0}
.janus-typing span{
  width:5px;height:5px;
  border-radius:50%;
  background:var(--muted,#94a3b8);
  animation:janus-dot .9s ease-in-out infinite;
}
.janus-typing span:nth-child(2){animation-delay:.15s}
.janus-typing span:nth-child(3){animation-delay:.3s}
@keyframes janus-dot{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-3px);opacity:1}
}

/* ── Meta (timing) ── */
.janus-meta{
  font-size:11px;
  color:var(--muted,#94a3b8);
  margin-top:3px;
  padding:0 2px;
}

/* ── Error ── */
.janus-error{
  color:var(--danger,#dc2626);
  font-size:13px;
}
.janus-retry{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:6px;
  padding:5px 12px;
  border:1px solid var(--line,#e2e8f0);
  border-radius:8px;
  background:none;
  color:var(--accent,#2563eb);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
  font-family:inherit;
}
.janus-retry:hover{
  background:var(--accent-bg,rgba(37,99,235,.06));
  border-color:var(--accent,#2563eb);
}

/* ── Input area ── */
.janus-input{
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:10px 14px;
  border-top:1px solid var(--line,#e2e8f0);
  flex-shrink:0;
  background:var(--card,#fff);
}
.janus-input textarea{
  flex:1;
  min-height:20px;
  max-height:100px;
  padding:8px 12px;
  border:1.5px solid var(--line,#e2e8f0);
  border-radius:10px;
  background:var(--bg,#f5f7fb);
  font-size:13.5px;
  font-family:inherit;
  color:var(--text,#0f172a);
  resize:none;
  outline:none;
  line-height:1.5;
  transition:border-color .18s;
}
.janus-input textarea:focus{
  border-color:var(--accent,#2563eb);
  box-shadow:0 0 0 2px rgba(37,99,235,.06);
}
.janus-input textarea::placeholder{color:var(--muted,#94a3b8)}
.janus-send{
  width:36px;height:36px;
  border-radius:8px;
  border:none;
  background:var(--accent,#2563eb);
  color:#fff;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .15s,transform .1s;
}
.janus-send:hover{background:#1d4ed8}
.janus-send:active{transform:scale(.94)}
.janus-send:disabled{
  background:#c5cdd8;
  cursor:not-allowed;
}

/* ── Status (searching indicator) ── */
.janus-status{
  font-size:11.5px;
  color:var(--accent,#2563eb);
  margin-top:3px;
  padding:0 2px;
  font-weight:500;
  min-height:0;
  transition:opacity .2s;
}
.janus-status:empty{display:none}

/* ── Mobile fullscreen ── */
@media (max-width:520px){
  .janus-fab{
    bottom:16px;
    right:16px;
    width:50px;
    height:50px;
  }
  .janus-panel{
    bottom:0;
    right:0;
    left:0;
    width:100%;
    max-width:100%;
    height:100%;
    max-height:100%;
    border-radius:0;
    border:none;
  }
  .janus-panel.open ~ .janus-fab{
    display:none;
  }
  .janus-msgs{
    padding:12px 14px;
  }
}

.janus-welcome-disclaimer{font-size:11px;color:var(--muted,#7a7974);font-style:italic;margin-top:6px;opacity:.75}