*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body[data-theme="dark"]{
  --bg:#242020;--bg-win:#2d2929;--bg-bar:#1e1a1a;--bg-echo:#332e2e;--bg-hover:#3d3030;
  --border:#5a3a28;--border2:#7a4a32;--border-dash:#6a4030;
  --text:#d4c4b0;--text2:#a08060;--text3:#604030;
  --amber:#e8824a;--blue:#8ab4d4;--green2:#4a9a4a;
  --red:#ff5f57;--yellow:#ffbd2e;--dot-g:#28ca42;--err:#f08070;
  --inp-focus:rgba(232,130,74,0.3);
}
body[data-theme="light"]{
  --bg:#f5f0e8;--bg-win:#faf6ee;--bg-bar:#ede8de;--bg-echo:#e5dfd4;--bg-hover:#ddd8cc;
  --border:#b8906a;--border2:#a07850;--border-dash:#c8a878;
  --text:#2a1e14;--text2:#7a5030;--text3:#b89060;
  --amber:#b85c00;--blue:#1a5fa0;--green2:#1a5a1a;
  --red:#cc2200;--yellow:#cc8800;--dot-g:#228822;--err:#cc3300;
  --inp-focus:rgba(184,92,0,0.28);
}
body[data-theme="dark-cb"]{
  --bg:#0a0a14;--bg-win:#0e0e1a;--bg-bar:#080810;--bg-echo:#14141e;--bg-hover:#1c1c2a;
  --border:#28284a;--border2:#383860;--border-dash:#303050;
  --text:#e0e0e0;--text2:#a0a0b0;--text3:#505060;
  --amber:#ffcc00;--blue:#55aaff;--green2:#00cc66;
  --red:#ff5555;--yellow:#ffcc00;--dot-g:#00cc44;--err:#ff5555;
  --inp-focus:rgba(255,204,0,0.28);
}
body[data-theme="light-cb"]{
  --bg:#fff;--bg-win:#fff;--bg-bar:#f0f0f4;--bg-echo:#e8e8e8;--bg-hover:#ddd;
  --border:#aaaacc;--border2:#9999bb;--border-dash:#bbbbdd;
  --text:#000;--text2:#444;--text3:#888;
  --amber:#aa5500;--blue:#0044cc;--green2:#004400;
  --red:#cc0000;--yellow:#886600;--dot-g:#006600;--err:#cc0000;
  --inp-focus:rgba(170,85,0,0.28);
}
body[data-theme="dark-ansi"]{
  --bg:#0d0d0d;--bg-win:#111;--bg-bar:#0a0a0a;--bg-echo:#151515;--bg-hover:#1e1e1e;
  --border:#2a2a2a;--border2:#333;--border-dash:#2e2e2e;
  --text:#aaa;--text2:#666;--text3:#444;
  --amber:#aa5500;--blue:#5555ff;--green2:#008800;
  --red:#aa0000;--yellow:#aa5500;--dot-g:#00aa00;--err:#ff5555;
  --inp-focus:rgba(170,85,0,0.28);
}
body[data-theme="light-ansi"]{
  --bg:#f8f8f8;--bg-win:#fff;--bg-bar:#eee;--bg-echo:#e5e5e5;--bg-hover:#ddd;
  --border:#ccc;--border2:#bbb;--border-dash:#ccc;
  --text:#222;--text2:#555;--text3:#999;
  --amber:#aa5500;--blue:#0000aa;--green2:#004400;
  --red:#aa0000;--yellow:#886600;--dot-g:#006600;--err:#aa0000;
  --inp-focus:rgba(170,85,0,0.28);
}

html,body{height:100%;font-family:'JetBrains Mono',monospace;overflow:hidden;background:var(--bg);color:var(--text);transition:background .25s,color .25s}

#app{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;height:100dvh;padding:16px;background:var(--bg);transition:background .25s}
#win{width:100%;max-width:800px;height:100%;max-height:92vh;display:flex;flex-direction:column;background:var(--bg-win);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,0.02),0 24px 60px rgba(0,0,0,0.8);transition:background .25s,border-color .25s}

/* macOS bar */
#macbar{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:10px 16px;background:var(--bg-bar);border-bottom:1px solid var(--border);user-select:none;transition:background .25s}
.dots{display:flex;gap:7px}
.dot{width:12px;height:12px;border-radius:50%}
.dot-r{background:var(--red)}.dot-y{background:var(--yellow)}.dot-g{background:var(--dot-g)}
#macbar-title{flex:1;text-align:center;font-size:11px;color:var(--text3);letter-spacing:.3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* Welcome panel */
#welcome-panel{flex-shrink:0;margin:12px 16px;border:1px dashed var(--border-dash);border-radius:4px;overflow:hidden;transition:border-color .25s}
#wp-title{padding:4px 12px;color:var(--amber);border-bottom:1px dashed var(--border-dash);font-size:12px;letter-spacing:.3px}
#wp-title strong{font-weight:700}
#wp-title span{color:var(--text2)}
#wp-body{display:flex;min-height:172px}

#wp-left{width:44%;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 12px;border-right:1px dashed var(--border-dash);gap:6px}
#wp-ascii{color:var(--amber);font-size:10px;line-height:1.22;white-space:pre;font-family:'JetBrains Mono',monospace;text-align:center}
#wp-art-frame{
  position:relative;
  width:100%;
  max-width:130px;
  border:1px solid var(--border-dash);
  border-radius:3px;
  overflow:hidden;
  flex-shrink:0;
}
#wp-art-img{
  display:block;
  width:100%;
  height:auto;
  max-height:120px;
  object-fit:cover;
  object-position:top center;
  filter:sepia(1) saturate(2) hue-rotate(340deg) brightness(0.8) contrast(1.1);
  transition:filter .3s, opacity .4s;
}
#wp-art-scanlines{
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.18) 2px,
    rgba(0,0,0,0.18) 3px
  );
  pointer-events:none;
}
#wp-welcome-txt{color:var(--text2);font-size:11px;text-align:center;line-height:1.5}
#wp-welcome-txt strong{color:var(--text);font-weight:700}
#wp-path{color:var(--text3);font-size:10px;text-align:center;margin-top:2px}

#wp-right{flex:1;display:flex;flex-direction:column}
#wp-recent{flex:1;padding:9px 11px;border-bottom:1px dashed var(--border-dash)}
#wp-recent-title{color:var(--amber);font-size:11px;font-weight:700;margin-bottom:5px}
.wp-row{display:flex;gap:6px;font-size:10.5px;color:var(--text2);line-height:1.65}
.wp-time{color:var(--text3);min-width:48px;flex-shrink:0}
.wp-txt{color:var(--text)}
.wp-more{color:var(--amber);font-size:10px;margin-top:3px;opacity:.7}
#wp-help{padding:9px 11px}
#wp-help-title{color:var(--amber);font-size:11px;font-weight:700;margin-bottom:5px}
.wp-hint{font-size:10.5px;color:var(--text2);line-height:1.65}
.wp-hint span{color:var(--amber)}
.wp-hint-more{color:var(--amber);font-size:10px;margin-top:3px;opacity:.7}

/* Output */
#out{flex:1;overflow-y:auto;padding:10px 20px 4px;font-size:13px;line-height:1.8;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
#out::-webkit-scrollbar{width:3px}
#out::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.ln{display:block;white-space:pre-wrap;word-break:break-word}
.lo{color:var(--text)}.lh{color:var(--text);font-weight:700}
.le{color:var(--err)}.lb{display:block;height:4px}
.llink{color:var(--blue)}.lg{color:var(--green2)}
.sep{display:block;color:var(--border2);font-size:11px;padding:1px 0}
.lecho{display:flex;align-items:flex-start;gap:8px;background:var(--bg-echo);border-radius:4px;padding:5px 12px;margin:3px 0;transition:background .25s}
.lecho-pr{color:var(--text2);font-weight:700;flex-shrink:0}
.lecho-txt{color:var(--text)}
.lbullet{display:flex;align-items:baseline;gap:9px;padding:1px 0}
.job-title{display:block;padding:4px 12px 4px 10px;margin:2px 0 0;border-left:2px solid var(--amber);background:linear-gradient(90deg,var(--bg-echo) 0%,transparent 85%);color:var(--amber);font-weight:700;font-size:13px;transition:background .25s,border-color .25s}
.job-meta{display:block;padding:2px 12px 4px 12px;margin:0 0 4px;border-left:2px solid var(--border-dash);background:linear-gradient(90deg,var(--bg-bar) 0%,transparent 70%);color:var(--text2);font-size:11px;transition:background .25s,border-color .25s}
.bull{flex-shrink:0;font-size:10px;line-height:1.8}
.bull-w{color:var(--text2)}.bull-g{color:var(--green2)}
.ltool{display:flex;align-items:baseline;gap:5px;padding:1px 0}
.tn{color:var(--green2);font-weight:700}.ta{color:var(--text)}

/* Menu items */
.menu-item{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:3px;cursor:pointer;font-size:13px;color:var(--text);transition:background .06s,color .06s;user-select:none}
.menu-item.sel,.menu-item:hover{background:var(--bg-hover);color:var(--amber)}
.menu-item.sel .mi-arr,.menu-item:hover .mi-arr{color:var(--amber)}
.mi-arr{color:var(--text3);min-width:14px;transition:color .06s}
.mi-num{color:var(--text2);min-width:20px}
.mi-badge{color:var(--green2);font-size:11px;margin-left:4px}

/* Thinking */
#thinking{display:none;align-items:center;gap:8px;padding:2px 0;color:var(--text2);font-size:13px}
#thinking.on{display:flex}
.spin{color:var(--amber)}

@keyframes fadeUp{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.anim{animation:fadeUp .07s ease-out both}

/* ══════════════════════════════════════
   INPUT ROW — block cursor + hint
══════════════════════════════════════ */
#inrow-outer{
  flex-shrink:0;
  padding:8px 6px 10px;
  background:var(--bg-bar);
  border-top:1px solid var(--border);
  transition:background .25s;
}
#inrow{
  display:flex;align-items:center;
  padding:10px 16px;
  background:var(--bg-win);
  border:1.5px solid var(--border2);
  border-radius:8px;
  transition:border-color .15s, box-shadow .15s;
  gap:0;
}
#inrow.typing{
  border-color:rgba(255,255,255,0.6);
  box-shadow:0 0 0 2.5px rgba(255,255,255,0.10), 0 0 16px rgba(255,255,255,0.05);
}
.inp-pr{
  color:var(--text2);font-weight:700;font-size:14px;
  padding-right:10px;flex-shrink:0;user-select:none;
  line-height:1;
}

/* Wrapper that holds both the hint overlay and the real input */
#inp-wrap{position:relative;flex:1;display:flex;align-items:center;height:20px}

/* The real input — always on top, transparent background */
#inp{
  position:absolute;inset:0;
  width:100%;height:100%;
  background:transparent;border:none;outline:none;
  color:var(--text);font-family:'JetBrains Mono',monospace;
  font-size:13px;line-height:1;
  /* Hide native caret when showing block cursor overlay */
  caret-color:transparent;
  z-index:2;
}
/* Show native caret once user has typed something */
#inp.has-text{caret-color:var(--amber)}

/* Hint overlay — visible when input is empty */
#inp-hint{
  position:absolute;inset:0;
  display:flex;align-items:center;
  pointer-events:none;
  z-index:1;
  overflow:hidden;white-space:nowrap;
}
#inp-cursor{
  font-size:16px;
  color:var(--amber);
  line-height:1;
  flex-shrink:0;
  animation:blink-cur .85s step-end infinite;
  /* Slightly wider block feel */
  letter-spacing:-1px;
}
@keyframes blink-cur{0%,100%{opacity:1}50%{opacity:0}}
#inp-hint-txt{
  font-size:12px;
  color:var(--text3);
  margin-left:3px;
  font-style:italic;
}
/* Hide hint when input has content */
#inp-hint.hidden{display:none}

/* Bottom bar */
#botbar{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:5px 20px;background:var(--bg-bar);border-top:1px solid var(--border);font-size:11px;color:var(--text3);transition:background .25s}
#snd-btn{cursor:pointer;transition:color .15s}
#snd-btn:hover{color:var(--text2)}

@media(max-width:600px){
  #app{padding:0}
  #win{border-radius:0;border:none;max-height:100dvh;box-shadow:none}
  #out{font-size:12px;padding:8px 12px 4px}
  #inrow-outer{padding:6px 8px 10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
  #inp,#inp-hint{font-size:12px}
  #macbar{padding-top:max(10px,env(safe-area-inset-top))}
  #welcome-panel{margin:8px}
  #wp-body{flex-direction:column}
  #wp-left{width:100%;border-right:none;border-bottom:1px dashed var(--border-dash)}
  #wp-ascii{font-size:9px}
}