/* Focused Operator UX sweep: conversation first, controls second. */
header{padding:.7rem 0 .35rem}
header>a{font-size:.86rem;letter-spacing:.08em}
.header-actions{gap:.35rem}
.header-actions button{padding:.45rem .7rem;border-radius:999px;background:transparent;color:var(--muted);font-size:.78rem}
.header-actions button:hover,.header-actions button:focus-visible{color:var(--text);border-color:#3b526b;outline:none}
#clear-chat{width:2rem;height:2rem;padding:0!important;font-size:1.05rem!important}
.welcome{padding:1.2rem .5rem 1rem}
.welcome p{margin:.2rem 0;font-size:.64rem;opacity:.85}
.welcome h1{font-size:clamp(2rem,7vw,3.35rem);line-height:1.05;margin:.35rem 0 .55rem}
.welcome>span{font-size:.95rem}
.quick-prompts{grid-template-columns:repeat(2,minmax(0,1fr));max-width:30rem;margin-top:1.15rem}
.quick-prompts button{padding:.62rem .75rem;border-radius:999px;text-align:center;font-size:.8rem;font-weight:700;background:#0e1d2e}
#operator-log{padding:.6rem 0 .35rem;gap:.7rem}
.message{border-radius:16px;padding:.72rem .82rem;box-shadow:none}
.message span{opacity:.78}
#operator-form{margin:.2rem 0 .35rem;padding:.55rem .6rem;border-color:#2a4059;border-radius:20px;box-shadow:0 10px 35px #0006}
#operator-input{min-height:3.1rem;padding:.4rem .35rem;font-size:1rem}
#operator-form>div{display:flex;align-items:center;gap:.5rem}
#operator-form>div>span{min-width:0;flex:1}
#operator-status{font-size:.72rem;opacity:.72}
#operator-status:not(:empty){display:inline-block}
.operator-actions{display:flex!important;gap:.35rem!important}
.operator-actions button{display:grid;place-items:center;width:2.65rem;height:2.65rem;padding:0!important;border-radius:50%!important}
.operator-actions #save-secret{background:transparent!important;color:var(--muted)!important;border:1px solid transparent!important}
.operator-actions #save-secret:hover,.operator-actions #save-secret:focus-visible{border-color:var(--line)!important;color:var(--text)!important}
#operator-form button[type="submit"]{min-width:2.65rem!important;background:var(--mint);font-size:1.2rem}
#conversation-history{width:min(380px,100%);padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));background:#08131f}
#conversation-history>div{position:sticky;top:0;background:#08131f;padding:.1rem 0 .65rem;z-index:1}
#conversation-history h2{font-size:1.3rem}
#close-history{width:2.1rem;height:2.1rem;padding:0;border-radius:50%;background:transparent;font-size:1.25rem}
#operator-sync{display:block;margin:.05rem 0 .8rem;color:var(--muted);font-size:.75rem}
#history-empty{padding:1rem 0;color:var(--muted)}
#history-list{gap:.4rem}
#history-list button{padding:.8rem .85rem;border-radius:14px;background:#0d1a29}
#history-list button[aria-current="page"]{background:#13283a}
@media(max-width:600px){
  main{padding-inline:max(.55rem,env(safe-area-inset-left)) max(.55rem,env(safe-area-inset-right))}
  header{padding:.45rem 0 .25rem}
  .header-actions{overflow:visible}
  .header-actions button{font-size:.72rem;padding:.38rem .58rem}
  .welcome{padding:.5rem .2rem}
  .welcome p{display:none}
  .welcome h1{font-size:clamp(1.9rem,10vw,2.45rem)}
  .welcome>span{font-size:.86rem}
  .quick-prompts{gap:.4rem;margin-top:.8rem}
  .quick-prompts button{padding:.52rem .55rem;font-size:.76rem}
  #operator-form{margin-bottom:.18rem;padding:.45rem .5rem}
  #operator-input{min-height:2.9rem}
  .operator-actions{display:flex!important;grid-template-columns:none!important}
  .operator-actions button{width:2.45rem!important;height:2.45rem!important}
}

/* Keep optional advanced controls present without competing with the chat. */
#operator-form .operator-attach{width:2.45rem!important;min-width:2.45rem!important;height:2.45rem;padding:0!important;border-radius:50%!important;background:transparent!important;color:var(--muted)!important;border-color:transparent!important}
#operator-form .operator-attach:hover,#operator-form .operator-attach:focus-visible{border-color:var(--line)!important;color:var(--text)!important;background:transparent!important}
#operator-form .operator-live-awareness{width:2.75rem;min-width:2.75rem;height:2.75rem;padding:0;justify-content:center;border-color:transparent;background:transparent}
#operator-form .operator-live-awareness>span:last-child{display:none}
#operator-form .operator-live-awareness__dot{width:8px;height:8px}


/* Calm streaming: update one message in place and keep the suggestion rail stable. */
.message.assistant.is-streaming{border-color:#2a4059;transition:border-color .45s ease}
.message.assistant.is-streaming p:empty::after{
  content:'•••';
  display:inline-block;
  letter-spacing:.34em;
  opacity:.42;
  animation:operator-stream-breathe 1.9s ease-in-out infinite
}
/* The empty streaming bubble shows a live thinking indicator (the painter
   renders no empty <p>, so the p:empty rule above can never fire alone). */
.message.assistant.is-streaming .operator-thinking{display:flex;gap:.45em;align-items:baseline;margin:0;color:var(--muted)}
.message.assistant.is-streaming .operator-thinking__dots{letter-spacing:.34em;opacity:.42;animation:operator-stream-breathe 1.9s ease-in-out infinite}
.follow-ups{
  min-height:2.45rem;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:.45rem
}
.follow-ups button{
  width:auto;
  flex:0 0 auto;
  max-width:min(30rem,76vw);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  opacity:0;
  transform:translateY(5px);
  animation:operator-suggestion-arrive .44s cubic-bezier(.22,.8,.24,1) forwards;
  animation-delay:calc(var(--suggestion-index,0) * 70ms)
}
@keyframes operator-stream-breathe{
  0%,100%{opacity:.25;transform:translateY(1px)}
  50%{opacity:.58;transform:translateY(-1px)}
}
@keyframes operator-suggestion-arrive{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .message.assistant.is-streaming p:empty::after,
  .message.assistant.is-streaming .operator-thinking__dots,
  .follow-ups button{animation:none;opacity:1;transform:none}
}

/* Everyday workspace: a quiet starting point, one conversation, one tool. */
:root{--bg:#101719;--panel:#172124;--line:#304044;--text:#e3ece9;--muted:#a2b4ae;--mint:#a2dcc5}
body{background:radial-gradient(ellipse at 50% 0%,#20353366,transparent 60%),var(--bg)}
main{width:min(880px,100%);padding-inline:24px}
main>header{min-height:72px;gap:12px;border-bottom:1px solid #30404477}
.operator-brand{gap:9px}
.operator-brand a{display:inline-flex;align-items:center;min-height:44px;font-size:1rem;letter-spacing:-.03em;color:var(--text);font-weight:700}
.operator-mini-spinner{width:28px;height:28px;flex-basis:28px;filter:none}
.operator-mini-spinner__fallback{inset:3px;border-width:1px}
.header-actions{display:flex;gap:6px;overflow:visible}
.header-actions button{min-height:44px;padding:8px 11px;font-size:.76rem;font-weight:600;background:transparent;border-color:transparent;color:var(--muted)}
.header-actions button:hover,.header-actions button:focus-visible{background:#233331;color:var(--text)}
.header-actions a{display:inline-flex;align-items:center;min-height:44px;padding:8px 11px;border:1px solid transparent;border-radius:999px;font-size:.76rem;font-weight:600;color:var(--muted);text-decoration:none}
.header-actions a:hover,.header-actions a:focus-visible{background:#233331;color:var(--text)}
#clear-chat{width:44px;height:44px;font-size:1.35rem!important;border:1px solid var(--line)}
.operator-empty-portal{flex:1;display:grid;place-items:center;padding:24px 0;pointer-events:auto;overflow-y:auto;animation:none}
.operator-start{max-width:560px;width:100%;text-align:left}
.operator-eyebrow{margin:0 0 14px;color:var(--mint);font-size:.67rem;letter-spacing:.13em;font-weight:700}
.operator-start h1{margin:0 0 12px;font-size:clamp(1.9rem,5vw,3rem);line-height:1.12;font-weight:600;letter-spacing:-.045em}
.operator-start__description{max-width:360px;margin:0;color:var(--muted);font-size:1rem;line-height:1.65}
.operator-start__tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:30px}
.operator-start__tools a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border:1px solid var(--line);border-radius:12px;color:var(--text);background:#172124;text-decoration:none;font-size:.8rem;font-weight:600}
.operator-start__tools a span{color:var(--mint);font-size:1rem}
.operator-start__tools a:hover,.operator-start__tools a:focus-visible{background:#233331;border-color:var(--mint);outline:none}
#operator-log:empty~.welcome{flex:none;padding:0 0 18px;text-align:left}
.operator-shortcut-label{display:block!important;color:var(--muted)!important;font-size:.72rem!important;letter-spacing:0!important;text-transform:none!important;font-weight:500!important;margin:0 0 10px!important}
.quick-prompts{width:100%;max-width:none;margin:0;gap:8px}
.quick-prompts button{min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;text-align:left;background:transparent;font-size:.82rem;font-weight:500;color:var(--text)}
#operator-log{padding:22px 0 12px;scrollbar-gutter:auto}
.message{max-width:100%;border-radius:16px}
.message.assistant{width:100%;background:transparent;border:0;padding:4px 0 16px}
.message.user{max-width:88%;background:#243532;border-color:#354b45;padding:14px 18px}
.message-content{font-size:1rem;line-height:1.7}
.message>span{font-size:.65rem;font-weight:600;color:var(--muted);letter-spacing:.07em}
.message-focus-nav{justify-content:flex-start;margin:0 0 16px;gap:8px}
.message-focus-nav button{min-width:44px;min-height:44px;background:transparent;border-color:var(--line);color:var(--muted)}
.message-focus-nav small{font-variant-numeric:tabular-nums}
.message-branch-tools{border-color:#30404488}
.message-branch-tools>button,.message-branch-tools span button{min-height:36px;background:transparent}
.follow-ups{margin-top:18px}
.follow-ups button{min-height:44px;background:#172124;font-weight:500;border-color:var(--line)}
#operator-form{position:relative;margin:0 0 12px;padding:12px 14px;border-radius:18px;background:#172124;border-color:#3c514a;box-shadow:none}
#operator-mode{min-height:44px}
#operator-input{min-height:56px;max-height:25dvh;font-size:1rem;padding:4px 0 8px;line-height:1.5}
#operator-input::placeholder{color:#91a59d;opacity:1}
#operator-form>div{display:flex;gap:8px}
#operator-status{position:static;width:auto;height:auto;clip:auto;white-space:normal;overflow:visible;margin:0;font-size:.72rem;line-height:1.3;color:var(--muted);opacity:1}
#operator-form>div>span{flex:1;min-width:0}
#operator-form .operator-actions{gap:2px!important}
#operator-form .operator-actions button,#operator-form .operator-attach{min-width:44px!important;width:44px!important;height:44px!important;min-height:44px!important}
#operator-form button[type="submit"]{background:var(--mint);color:#122b22}
#operator-form:focus-within{border-color:var(--mint);box-shadow:0 0 0 1px #a2dcc522}
#operator-workspace{background:var(--panel);border-color:var(--line);border-radius:16px;box-shadow:none}
.operator-workspace__bar{background:#172124;border-color:var(--line);padding:10px 12px}
.operator-workspace__actions a,.operator-workspace__actions button{min-width:44px;min-height:44px;justify-content:center;background:transparent}
main.workspace-open #operator-log:empty{display:none}
main.workspace-open #operator-log:not(:empty){flex:0 1 25%;min-height:80px}
#app-search-results{flex:1;min-height:0;max-height:52dvh;overflow-y:auto;border-color:var(--line);background:#172124;border-radius:16px}
.app-search-heading{gap:8px}
#app-search-close{margin-left:auto;min-width:44px;min-height:44px;padding:0;background:transparent;font-size:1.3rem}
main:has(#app-search-results:not([hidden])) .operator-empty-portal,main:has(#app-search-results:not([hidden])) .welcome{display:none}
#conversation-history,#conversation-tree{background:#101719}
#conversation-history>div{background:#101719}
#history-list button,.tree-node{background:#172124}
#secret-form label{position:static}
@media(max-width:600px){
  main{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}
  main>header{display:flex;min-height:64px;padding:8px 0;gap:6px}
  .operator-brand{gap:6px}
  .operator-brand a{font-size:.9rem}
  .operator-mini-spinner{width:24px;height:24px;flex-basis:24px}
  .header-actions button{padding:8px;font-size:.7rem}
  .operator-empty-portal{padding:24px 4px}
  .operator-start__description{font-size:.92rem}
  .operator-start__tools{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:24px}
  .operator-start__tools a{justify-content:flex-start;padding:0 16px}
  #operator-log:empty~.welcome{padding:0 0 16px}
  .quick-prompts button{font-size:.76rem;padding:9px 10px}
  #operator-form{margin-bottom:8px;padding:10px 12px}
  #operator-input{min-height:52px;font-size:1rem}
  .message-content{font-size:.98rem}
  #operator-workspace{min-height:180px}
}
@media(max-width:360px){
  main{padding-inline:10px}
  .operator-mini-spinner{display:none}
  .header-actions button{padding:6px}
}
@media(max-height:620px){
  .operator-empty-portal{padding:12px 0}
  .operator-eyebrow{display:none}
  .operator-start h1{font-size:1.65rem;margin-bottom:6px}
  .operator-start__description{font-size:.85rem}
  .operator-start__tools{margin-top:12px}
  #operator-log:empty~.welcome{display:none}
}