:root{
  --bg:#0b141a; 
  --panel:#111b21;
  --border:rgba(100,255,218,0.15);
  --green:#00a884; 
  --green-neon:#64ffda;
  --green-dim:rgba(100,255,218,0.3);
  --blue:#34b7f1; 
  --blue-dim:rgba(52,183,241,0.2);
  --amber:#ffb74d; 
  --red:#ff6b6b;
  --text:#e9edef; 
  --dim:#8696a0;
  --fill:rgba(100,255,218,0.05);
  --fill-done:rgba(100,255,218,0.15);
  --node-w:50; 
  --node-h:30;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  height:100vh;
  display:flex;
  overflow:hidden;
  letter-spacing:0.03em;
}

/* ── LEFT PANEL: CONVERSATION GRAPH MAP (2/3 of the screen) ── */
#tree-panel{
  flex:2 1 0;
  min-width:340px;
  height:100%;
  background:var(--panel);
  border-right:1px solid rgba(255,255,255,0.05);
  display:flex;
  flex-direction:column;
  z-index:10;
}
.tree-header{
  padding:16px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  font-size:.75rem;
  color:var(--green-neon);
  font-family:'Courier New', Courier, monospace;
  font-weight:bold;
  letter-spacing:0.1em;
}
#tree-scroll{
  flex:1;
  overflow:auto;
  padding:16px 8px;
  position:relative;
  background:rgba(0,0,0,0.15);
}
#tree-svg{
  display:block;
  width:100%;
  height:auto;
}
#tree-scroll::-webkit-scrollbar{width:4px;height:4px;}
#tree-scroll::-webkit-scrollbar-thumb{background:var(--dim);border-radius:4px}
.tree-hint{
  font-size:.65rem;
  color:var(--dim);
  text-align:center;
  padding:10px;
  font-family:'Courier New', Courier, monospace;
  border-top:1px solid rgba(255,255,255,0.03);
}

/* ── CASE FILE LIST (sidebar buttons, no dropdown) ── */
#case-list-section{
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
#case-list-section .case-list-hdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}
#case-list-section .case-list-title{
  font-size:.65rem;
  color:var(--dim);
  font-family:'Courier New', Courier, monospace;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
#import-btn{
  background:rgba(0,168,132,0.1);
  border:1px solid rgba(0,168,132,0.4);
  color:#ffffff;
  padding:4px 9px;
  border-radius:10px;
  cursor:pointer;
  font-size:.62rem;
  font-family:inherit;
}
#import-btn:hover{ background:rgba(0,168,132,0.25); }
#preload-btn{
  background:rgba(255,183,77,0.1);
  border:1px solid rgba(255,183,77,0.4);
  color:#ffffff;
  padding:4px 9px;
  border-radius:10px;
  cursor:pointer;
  font-size:.62rem;
  font-family:inherit;
}
#preload-btn:hover{ background:rgba(255,183,77,0.25); }
#case-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:180px;
  overflow-y:auto;
}
.case-btn{
  text-align:left;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text);
  border-radius:6px;
  padding:7px 10px;
  cursor:pointer;
  font-family:inherit;
  font-size:.72rem;
  transition:background .15s, border-color .15s, transform .1s;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.case-btn:hover{ background:rgba(100,255,218,0.06); transform:translateX(2px); }
.case-btn.active{
  background:rgba(0,168,132,0.18);
  border-color:var(--green-neon);
  color:var(--green-neon);
}
.case-btn .case-btn-meta{
  font-size:.6rem;
  color:var(--dim);
  font-family:'Courier New', Courier, monospace;
}
.case-btn.active .case-btn-meta{ color:rgba(100,255,218,0.7); }
#case-select{
  width:100%;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--text);
  border-radius:6px;
  padding:7px 10px;
  cursor:pointer;
  font-family:inherit;
  font-size:.72rem;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0L5 6L10 0Z' fill='%238696a0'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
}
#case-select:focus{ outline:none; border-color:var(--green-neon); }
#case-select option{ background:var(--panel); color:var(--text); }
#preload-log{
  margin-top:8px;
  max-height:140px;
  overflow-y:auto;
  background:rgba(255,107,107,0.06);
  border:1px solid rgba(255,107,107,0.3);
  border-radius:6px;
  padding:8px 10px;
  font-family:'Courier New', Courier, monospace;
  font-size:.62rem;
  line-height:1.5;
  color:#ffb3b3;
  white-space:pre-wrap;
  word-break:break-word;
}
#preload-log.hide{ display:none; }
#preload-log.ok{
  background:rgba(100,255,218,0.06);
  border-color:rgba(100,255,218,0.3);
  color:var(--green-neon);
}

/* ── RIGHT PANEL: WHATSAPP INTERACTIVE CHAT FLOW (1/3 of the screen) ── */
#chat-panel{
  flex:1 1 0;
  min-width:280px;
  display:flex;
  flex-direction:column;
  background-color:#0b141a;
  background-image: radial-gradient(rgba(100, 255, 218, 0.03) 1px, transparent 0);
  background-size: 24px 24px;
}
.chat-hdr{
  background:var(--panel);
  border-bottom:1px solid rgba(255,255,255,0.03);
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 1px 3px rgba(0,0,0,0.4);
}
.panel-header {
  width: 100%;
}

/* ── INK LINK & EVIDENCE PANEL STYLING ── */
.ink-link-panel {
  padding: 10px;
  background: rgba(18, 26, 31, 0.85);
  border: 1px solid #233138;
  border-radius: 6px;
  width: 100%;
}
.ink-file-button:hover {
  background: rgba(100, 255, 218, 0.25) !important;
  box-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
}
.ink-link-panel ul li:hover {
  background: rgba(255, 213, 79, 0.18) !important;
}

#bub-scroll{
  flex:1;
  overflow-y:auto;
  padding:24px 30px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
#bub-scroll::-webkit-scrollbar{width:6px}
#bub-scroll::-webkit-scrollbar-track{background:transparent}
#bub-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px}

/* ── CONVERSATION BUBBLE DESIGN ── */
.msg{
  max-width:75%;
  padding:10px 14px;
  border-radius:12px;
  font-size:.9rem;
  line-height:1.45;
  text-transform:none;
  letter-spacing:0;
  word-wrap:break-word;
  animation:mIn .25s ease-out both;
  display:flex;
  flex-direction:column;
}
@keyframes mIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.msg.npc{
  align-self:flex-start;
  background:#202c33;
  color:#e9edef;
  border-top-left-radius:2px;
  border:1px solid rgba(255,255,255,0.03);
}
.msg.player{
  align-self:flex-end;
  background:#005c4b;
  color:#e9edef;
  border-top-right-radius:2px;
  border:1px solid rgba(0,255,170,0.05);
}
.msg.system{
  align-self:center;
  background:#182229;
  color:var(--dim);
  font-size:.72rem;
  text-align:center;
  padding:5px 12px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.03);
  font-family:'Courier New', Courier, monospace;
}
.msg.npc-filler{
  align-self:flex-start;
  background:rgba(255,183,77,0.03);
  border:1px dashed rgba(255,183,77,0.2);
  color:var(--amber);
  font-size:.78rem;
  font-style:italic;
  font-family:'Courier New', Courier, monospace;
  padding:6px 12px;
  border-radius:8px;
  max-width:80%;
}

/* ── TYPING SIMULATION BLOCK ── */
.typing-row{
  display:flex;
  align-items:center;
  gap:5px;
  padding:10px 14px;
  background:#202c33;
  border-radius:12px;
  border-top-left-radius:2px;
  align-self:flex-start;
  animation:mIn .2s ease-out;
}
.dot{width:6px;height:6px;background:var(--dim);border-radius:50%;animation:blink 1.4s infinite both}
.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2;transform:scale(0.8)}40%{opacity:1;transform:scale(1.15)}}
.typing-lbl{font-size:.75rem;color:var(--dim);margin-left:4px;}

/* ── WHATSAPP BOTTOM ROUNDED PILL CHOICES ── */
#bar-choices{
  border-top:1px solid rgba(255,255,255,0.03);
  background:var(--panel);
  padding:16px 20px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  min-height:75px;
}
#bar-choices.hide{display:none}
.choice-btn{
  background:rgba(0,168,132,0.1);
  border:1px solid rgba(0,168,132,0.4);
  color:#ffffff;
  padding:9px 18px;
  border-radius:24px;
  cursor:pointer;
  font-family:inherit;
  font-size:.82rem;
  transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform:none;
}
.choice-btn:hover{
  background:var(--green);
  color:#000;
  border-color:var(--green);
  box-shadow:0 2px 8px rgba(0,168,132,0.3);
  transform:translateY(-1px);
}

#tree-tooltip{
  position:fixed;
  background:rgba(17,27,33,0.96);
  border:1px solid var(--green-dim);
  border-radius:6px;
  padding:8px 12px;
  font-size:.7rem;
  color:var(--text);
  pointer-events:none;
  z-index:9999;
  display:none;
  max-width:240px;
  box-shadow:0 4px 12px rgba(0,0,0,0.5);
  font-family:'Courier New', Courier, monospace;
}


#tree-scroll{
  flex:1;
  overflow: auto; /* Enables both vertical and horizontal scrollbars */
  padding:16px 8px;
  position:relative;
  background:rgba(0,0,0,0.15);
  white-space: nowrap;
}
#tree-svg{
  display:block;
  /* Removes width:100% so SVG expands beyond panel viewport, activating scrollbars */
  max-width: none;
}
#tree-scroll::-webkit-scrollbar{width:6px;height:6px;}
#tree-scroll::-webkit-scrollbar-thumb{background:var(--dim);border-radius:4px}