/* Jeff UI. Single stylesheet, CSS custom properties for theming. */

  :root{
    --bg:#0a0a0a;--panel:#000000;
    --txt:#ececec;--dim:#a3a3a3;--faint:#767676;
    --cyan:#22d3ee;--cyan-ink:#001318;
    --jeff-bubble:#1b1b1b;--jeff-border:#242424;
    --serious-bubble:#1b1e33;--serious-txt:#c7d2fe;
    --green:#34d399;--amber:#fbbf24;--indigo:#818cf8;
    --pill-bg:#161616;--pill-border:#272727;
    --card:#0b0b0b;--card-border:#1a1a1a;
    --pbar-bg:#1a1a1a;
    --lbl:#e4e4e7;--sub:#a1a1aa;--cardtxt:#c6c6cd;--cardh:#a1a1aa;
  }
  html[data-theme="light"]{
    --bg:#f4f4f5;--panel:#ffffff;
    --txt:#18181b;--dim:#5f5f66;--faint:#707078;
    --jeff-bubble:#ffffff;--jeff-border:#e4e4e7;
    --serious-bubble:#e0e7ff;--serious-txt:#3730a3;
    --pill-bg:#ffffff;--pill-border:#e0e0e3;
    --card:#ffffff;--card-border:#e8e8eb;
    --pbar-bg:#e8e8eb;
    --lbl:#27272a;--sub:#52525b;--cardtxt:#3f3f46;--cardh:#52525b;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{background:var(--bg);color:var(--txt);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
  button,input{font:inherit}
  button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

  /* light mode: subtle grain, top-right weighted */
  body::before{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    opacity:0;transition:opacity .3s;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  }
  body[data-theme="light"]::before, html[data-theme="light"] body::before{opacity:.05}

  /* ---------- sidebar ---------- */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:min(340px, 62vw);
    background:var(--panel);border-right:1px solid var(--card-border);
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    z-index:20;display:flex;flex-direction:column;
    padding:max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));gap:12px;overflow-y:auto;scrollbar-width:none;
  }
  .sidebar::-webkit-scrollbar{display:none}
  @media (max-width:600px){
    .sidebar{width:100vw;border-right:none}
  }
  .sidebar.open{transform:translateX(0)}
  .sb-head{display:flex;align-items:center;gap:8px}
  .sb-title{font-size:13px;font-weight:600;color:var(--cardh)}
  .sb-mood{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--cardtxt);margin-left:auto;margin-right:8px}
  .sb-mood.hot{color:var(--cyan)}
  .mdot{width:7px;height:7px;border-radius:50%;background:var(--cyan);transition:background .25s;flex:0 0 auto}
  .mdot.green{background:var(--green)}.mdot.amber{background:var(--amber)}.mdot.indigo{background:var(--indigo)}
  .sb-close{background:none;border:none;color:var(--faint);font-size:16px;cursor:pointer;padding:8px 10px;border-radius:8px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .sb-close:hover{color:var(--txt);background:var(--card)}
  .card{background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:14px 16px}
  .card h3{font-size:12.5px;font-weight:600;color:var(--cardh);margin-bottom:10px}
  .card p{font-size:13px;line-height:1.55;color:var(--cardtxt);margin-bottom:6px}
  .card p:last-child{margin-bottom:0}
  .card p b{color:var(--txt);font-weight:600}
  .step{display:flex;gap:10px;align-items:flex-start;padding:5px 0;opacity:.82;transition:opacity .3s}
  .step.on{opacity:1}
  .step .tick{width:16px;height:16px;flex:0 0 auto;margin-top:1px;border-radius:50%;border:1.5px solid var(--faint);display:flex;align-items:center;justify-content:center;transition:all .3s}
  .step.on .tick{border-color:var(--cyan)}
  .step.on .tick svg{stroke:var(--cyan)}
  .step.done .tick{border-color:var(--green);background:rgba(52,211,153,.12)}
  .step.done .tick svg{stroke:var(--green)}
  .step .lbl{font-size:13px;color:var(--lbl)}
  .step .sub{font-size:11.5px;color:var(--sub);margin-top:2px;line-height:1.5}
  .step .sub em{font-style:normal;color:var(--cyan)}
  .pbar{height:4px;background:var(--pbar-bg);border-radius:2px;overflow:hidden;margin-top:6px}
  .pbar i{display:block;height:100%;width:0%;background:var(--cyan);border-radius:2px;transition:width .18s linear}
  .step.on .pbar i{width:100%;transition:width 1.1s cubic-bezier(.3,0,.4,1)}

  .open-chip{
    position:fixed;top:max(16px, env(safe-area-inset-top));left:max(16px, env(safe-area-inset-left));z-index:30;
    background:var(--card);border:1px solid var(--card-border);
    color:var(--dim);font:inherit;font-size:12.5px;font-weight:500;
    padding:9px 15px;border-radius:999px;cursor:pointer;
    transition:color .15s,border-color .15s,opacity .2s;
  }
  .open-chip:hover{color:var(--txt);border-color:var(--faint)}
  .open-chip.hide{opacity:0;pointer-events:none}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:15;opacity:0;pointer-events:none;transition:opacity .25s}
  .scrim.on{opacity:1;pointer-events:auto}

  .main{height:100dvh;display:flex;justify-content:center;transition:margin-left .28s cubic-bezier(.4,0,.2,1)}
  .main.docked{margin-left:min(340px, 62vw)}
  @media (max-width:480px){ .main.docked{margin-left:0} .main{justify-content:flex-start} .app{padding-left:0} }
  .app{width:100%;max-width:620px;height:100dvh;display:flex;flex-direction:column;margin:0 auto}

  /* ---------- face ---------- */
  .avatar .eye{transform-box:fill-box;transform-origin:center;transition:transform .22s,fill .22s}
  .avatar .mouth{transition:transform .22s,fill .22s;fill:#6b6b74}
  .avatar[data-e="blink"] .eye{animation:blink 4.2s infinite}
  .avatar[data-e="blink"] .eye:last-of-type{animation-delay:.07s}
  @keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
  .avatar[data-e="think"] .eye{animation:look 1s ease-in-out infinite}
  @keyframes look{0%,100%{transform:translateX(0)}30%{transform:translateX(-3px)}70%{transform:translateX(3px)}}
  .avatar[data-e="smug"] .eye.l{transform:scaleY(.3)}
  .avatar[data-e="smug"] .mouth{transform:rotate(-7deg)}
  .avatar[data-e="happy"] .eye{transform:scaleY(.15) translateY(3px)}
  .avatar[data-e="happy"] .mouth{transform:scaleY(2.6);fill:var(--cyan)}
  .avatar[data-e="shock"] .eye{transform:scale(1.3)}
  .avatar[data-e="shock"] .mouth{transform:scaleY(3.2)}
  .avatar[data-e="sus"] .eye{transform:translateX(3px) scaleY(.65)}
  .avatar[data-e="sus"] .mouth{transform:rotate(9deg)}
  .avatar[data-e="serious"] .eye{fill:var(--indigo)}
  .avatar[data-e="serious"] .mouth{fill:#7a84b8}
  html[data-theme="light"] .avatar .mouth{fill:#7a7a85}

  header{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:max(16px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 10px max(8px, env(safe-area-inset-left));flex-wrap:nowrap;min-width:0}
  .hface{width:46px;height:46px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
  .htext{display:flex;align-items:center}
  .htext .name{font-size:16px;font-weight:700;line-height:1}
  [hidden]{display:none!important}
  .theme-btn{
    width:36px;height:36px;border-radius:50%;
    background:var(--card);border:1px solid var(--card-border);
    color:var(--dim);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:color .15s,border-color .15s;
  }
  .theme-btn:hover{color:var(--txt)}
  #themeBtn{margin-left:auto}
  .theme-btn svg{width:16px;height:16px;display:block}

  .landing{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
  .hero{width:150px;height:150px;margin-bottom:14px}
  @media (max-height:700px){ .hero{width:110px;height:110px;margin-bottom:8px} .landing h1{font-size:30px;margin-bottom:20px} .suggestions{margin-top:18px} }
  .pre-hide{opacity:0;pointer-events:none}
  .pre-in{opacity:1;pointer-events:auto;transition:opacity .4s}
  .warn{
    max-width:420px;text-align:center;
    color:var(--txt);font-size:19px;line-height:1.5;font-weight:600;
    letter-spacing:.2px;
    margin-bottom:24px;
  }
  .power{
    width:64px;height:64px;border-radius:50%;
    background:var(--card);border:1px solid var(--card-border);
    color:var(--dim);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:color .2s,border-color .2s,box-shadow .2s,transform .12s;
    margin-bottom:26px;
  }
  .power svg{width:26px;height:26px}
  .power:hover{color:var(--cyan);border-color:rgba(34,211,238,.4);box-shadow:0 0 24px rgba(34,211,238,.15)}
  .power:active{transform:scale(.93)}
  .bootline{
    min-height:24px;color:var(--dim);font-size:14px;
    margin-bottom:26px;letter-spacing:.2px;
  }
  .bootline .caret{color:var(--cyan)}
  #powerBtn.gone,#bootLine.gone,#warnText.gone{display:none}
  .rest{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;pointer-events:none}
  .rest.in{opacity:1;transform:none;pointer-events:auto}
  .landing h1{font-size:36px;font-weight:800;letter-spacing:-.8px;margin-bottom:30px}
  .landing h1 .ask{
    font-weight:300;
    color:var(--cyan);
    margin-right:10px;
  }
  .suggestions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:430px}
  .suggestions button{background:var(--card);border:1px solid var(--card-border);color:var(--dim);font:inherit;font-size:13.5px;padding:12px 18px;border-radius:999px;cursor:pointer;transition:color .15s,border-color .15s}
  @media (pointer:coarse){ .suggestions button{padding:13px 20px} .theme-btn{width:44px;height:44px} .send{width:48px;height:48px} .sb-head{padding-top:2px} }
  .suggestions button:hover{color:var(--txt);border-color:var(--faint)}

  .chat{flex:1 1 auto;overflow-y:auto;padding:14px 8px 8px;display:flex;flex-direction:column;gap:14px;scrollbar-width:none}
  .chat::-webkit-scrollbar{display:none}
  .row{display:flex;flex-direction:column;max-width:80%}
  .row.user{align-self:flex-end;align-items:flex-end}
  .row.jeff{align-self:flex-start;align-items:flex-start}
  .bubble{padding:12px 16px;font-size:14.5px;line-height:1.55;border-radius:20px;white-space:pre-wrap;word-break:break-word}
  .user .bubble{background:var(--cyan);color:var(--cyan-ink);font-weight:500;border-bottom-right-radius:6px}
  .jeff .bubble{background:var(--jeff-bubble);border:1px solid var(--jeff-border);border-bottom-left-radius:6px}
  .jeff .bubble.serious{background:var(--serious-bubble);border-color:transparent;color:var(--serious-txt)}
  .alt-toggle{margin:6px 4px 0;padding:6px 8px;background:transparent;border:0;border-radius:8px;color:var(--dim);cursor:pointer;font-size:12.5px}
  .alt-toggle:hover{color:var(--txt)}
  .alts{margin:2px 4px 0;font-size:12.5px;color:var(--dim);line-height:1.55}
  .alts[hidden]{display:none}
  .row.open .alts{display:block}
  .alts div{padding:4px 0}
  .alts b{color:var(--cyan);font-weight:500;margin-right:6px}

  .thinking{display:flex;align-items:center;gap:5px;min-height:46px;padding:12px 16px;border:1px solid var(--jeff-border);border-radius:20px;border-bottom-left-radius:6px;background:var(--jeff-bubble)}
  .thinking i{width:5px;height:5px;border-radius:50%;background:var(--dim);animation:thinking-dot 1.1s ease-in-out infinite}
  .thinking i:nth-child(2){animation-delay:.14s}.thinking i:nth-child(3){animation-delay:.28s}
  @keyframes thinking-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

  .composer{flex:0 0 auto;padding:0 max(8px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left))}
  .pill{
    display:flex;align-items:center;
    background:var(--pill-bg);border:1px solid var(--pill-border);border-radius:999px;
    padding:5px 5px 5px 20px;
    transition:border-color .15s;
  }
  .pill:focus-within{border-color:var(--faint)}
  .pill input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--txt);font:inherit;font-size:16px;padding:8px 0}
  @media (min-width:700px){ .pill input{font-size:14.5px} }
  .pill input::placeholder{color:var(--faint)}
  .send{
    width:40px;height:40px;flex:0 0 auto;border-radius:50%;border:none;
    background:var(--cyan);cursor:pointer;padding:0;
    display:flex;align-items:center;justify-content:center;
    transition:transform .15s;
  }
  .send:active{transform:scale(.92)}
  .send:disabled{cursor:not-allowed;opacity:.48;transform:none}
  .pill:has(input:disabled){opacity:.72}
  .send svg{width:24px;height:24px;display:block;overflow:visible}
  .send .s-eye,.send .s-mouth{transition:fill .2s,transform .05s linear;transform-box:fill-box;transform-origin:center}
  .send .s-eye{fill:rgba(0,19,24,.38)}
  .send .s-mouth{fill:rgba(0,19,24,.28)}
  .send.ready .s-eye{fill:var(--cyan-ink)}
  .send.ready .s-mouth{fill:rgba(0,19,24,.6)}
  .send.squint .s-eye{transform:scaleY(.25)!important}
  .send.squint .s-mouth{transform:scaleY(2.2)!important}

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    .thinking i{animation:none;opacity:.7}
  }