/* C5B product surfaces. Auth keeps its existing forms and scroll contract. */
html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
#authGate{
  background:radial-gradient(ellipse at 15% 10%,#e3e7ff 0,transparent 50%),#f6f7fb!important;
  color:#182339;grid-template-columns:minmax(0,500px) minmax(0,440px);gap:80px;
  justify-content:center;box-sizing:border-box;
}
.auth-intro{max-width:500px;padding:24px}
.auth-intro .auth-kicker{font-size:12px;letter-spacing:.16em;font-weight:700;color:#4f46e5;text-transform:uppercase}
.auth-intro h2{font-size:clamp(36px,4.4vw,60px);line-height:1.08;letter-spacing:-.055em;margin:24px 0;color:#182339}
.auth-intro p{font-size:17px;line-height:1.75;color:#52627a;max-width:390px}
.auth-features{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.auth-features span{padding:8px 12px;border:1px solid #dce3ed;border-radius:8px;font-size:12px;color:#52627a;background:#ffffff80}
#authGate .auth-fast-card{width:100%;max-width:440px;padding:36px;border:1px solid #dce3ed;border-radius:20px;background:#fff;color:#182339;box-shadow:0 20px 70px #24385d0c}
#authGate .auth-brand{justify-content:flex-start;margin-bottom:30px}
#authGate .auth-brand img{width:150px;max-height:96px;padding:0;border-radius:0;box-shadow:none;background:#fff}
#authGate h1{font-size:28px;letter-spacing:-.04em;color:#182339}
#authGate .sub{color:#52627a;line-height:1.6}
#authGate label{color:#344158;font-size:13px;font-weight:500}
#authGate input{background:#fafbfe;border:1px solid #cbd5e1;color:#182339;border-radius:9px;height:48px;font-size:16px}
#authGate input:focus{border-color:#4f46e5;box-shadow:0 0 0 3px #eef2ff}
#authGate .auth-submit{background:#4f46e5;border-radius:9px;min-height:48px}
#authGate .auth-submit:hover{background:#4338ca}
#authGate .auth-link{color:#4338ca;min-height:40px}
#authGate .auth-or{color:#64748b;margin:10px 0}
#authGate .auth-or:before,#authGate .auth-or:after{background:#e2e8f0}
#authGate .auth-message{color:#166534}
#authGate .auth-message.error{color:#b91c1c}
#authGate :is(input,button):focus-visible{outline:2px solid #4f46e5;outline-offset:3px}
html[data-theme="dark"] #authGate{background:radial-gradient(ellipse at 15% 10%,#20254c 0,transparent 55%),#0e1420!important;color:#edf2fa}
html[data-theme="dark"] #authGate .auth-fast-card{background:#182131;border-color:#344158;color:#edf2fa}
html[data-theme="dark"] #authGate :is(h1,h2,label){color:#edf2fa}
html[data-theme="dark"] #authGate :is(.sub,.auth-intro p,.auth-features span){color:#a9b7cc}
html[data-theme="dark"] #authGate .auth-features span{background:#182131;border-color:#344158}
html[data-theme="dark"] #authGate input{background:#111927;border-color:#475569;color:#edf2fa}
html[data-theme="dark"] #authGate .auth-link,html[data-theme="dark"] .auth-kicker{color:#b4bdff}
html[data-theme="dark"] #authGate .auth-message.error{color:#fca5a5}
html[data-theme="dark"] #authGate .auth-message{color:#86efac}
#app[data-ui="c5b"] .main{background:var(--workspace-bg)!important}
#app[data-ui="c5b"] .messages{padding-inline:24px!important}
#app[data-ui="c5b"] #status{max-width:220px}
#app[data-ui="c5b"] #status .MuiChip-label{overflow:hidden;text-overflow:ellipsis}
#app[data-ui="c5b"] .document-panel{margin:6px auto;padding:0 14px;max-height:180px;border-color:var(--ha-line);box-shadow:none}
#app[data-ui="c5b"] .document-panel>summary{padding:11px 0;color:var(--ha-muted);font-weight:600;cursor:pointer;min-height:20px}
#app[data-ui="c5b"] .document-panel[open]{padding-bottom:12px}
#app[data-ui="c5b"] .document-panel button{min-height:36px}
#app[data-ui="c5b"] .document-panel details{padding:8px 0}
#app[data-ui="c5b"] .composer{min-height:0}
#app[data-ui="c5b"] .composer-area{padding-top:4px}
#app[data-ui="c5b"] .message-actions{gap:4px}
#app[data-ui="c5b"] .message-action{font-size:13px;min-height:36px}
@media(max-width:1000px){#authGate{grid-template-columns:minmax(0,440px);gap:0}.auth-intro{display:none}}
@media(max-width:600px){
  #authGate .auth-fast-card{padding:28px 22px}
  #app[data-ui="c5b"] .MuiToolbar-root{flex-wrap:wrap;gap:0;padding-block:8px!important}
  #app[data-ui="c5b"] .MuiToolbar-root>.MuiStack-root:first-child{flex:1}
  #app[data-ui="c5b"] .MuiToolbar-root>.MuiStack-root:last-child{max-width:100%;flex-basis:100%;justify-content:flex-end}
  #app[data-ui="c5b"] #status{max-width:100%;height:20px;font-size:10px;background:transparent}
  #app[data-ui="c5b"] #topModel{max-width:130px}
  #app[data-ui="c5b"] .messages{padding:16px 12px!important}
  #app[data-ui="c5b"] .message{margin:10px auto!important}
  #app[data-ui="c5b"] .message.assistant .bubble{padding:14px 16px!important;border-radius:14px!important}
  #app[data-ui="c5b"] .message.user .bubble{padding:10px 14px!important}
  #app[data-ui="c5b"] .composer{padding:8px 12px!important}
  #app[data-ui="c5b"] .workspace-disclaimer{font-size:10px;padding-inline:12px}
}
@media(prefers-reduced-motion:reduce){#authGate *{transition:none!important}}

/* Chat-first document UX: the existing <details> stays semantically native,
   but no longer consumes any height above the message composer. */
#app[data-ui="c5b"] .document-panel{
  position:fixed!important;z-index:1190;top:74px;right:16px;bottom:auto;left:auto;
  display:block;flex:none;width:auto;max-width:calc(100vw - 24px);
  max-height:none;margin:0!important;padding:0 14px!important;overflow:visible;
  box-sizing:border-box;border:1px solid var(--ha-line);border-radius:999px;
  background:var(--ha-surface);color:var(--ha-text);box-shadow:var(--ha-shadow);
  font-size:12px;line-height:1.4;
}
#app[data-ui="c5b"] .document-panel>summary{
  display:flex;align-items:center;gap:9px;min-height:38px;padding:0!important;
  color:var(--ha-text);font-size:12px;font-weight:650;white-space:nowrap;
  list-style:none;user-select:none;cursor:pointer;
}
#app[data-ui="c5b"] .document-panel>summary::-webkit-details-marker{display:none}
#app[data-ui="c5b"] .document-panel>summary::before{
  content:"";display:inline-block;flex:0 0 9px;width:9px;height:9px;
  border:2px solid var(--ha-accent);border-radius:3px;transform:rotate(-12deg);
}
#app[data-ui="c5b"] .document-panel:not([open]):hover{
  border-color:var(--ha-accent);background:var(--ha-soft);
}
#app[data-ui="c5b"] .document-panel[open]{
  top:0;right:0;bottom:0;width:min(390px,100vw);max-width:100vw;
  max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  margin:0!important;padding:20px!important;
  border-radius:18px 0 0 18px;border-right:0;
  box-shadow:-20px 0 65px rgba(15,23,42,.25);
  animation:ha-files-enter .2s ease-out;
}
#app[data-ui="c5b"] .document-panel[open]>summary{
  min-height:42px;padding:0 0 14px!important;
  margin-bottom:10px;border-bottom:1px solid var(--ha-line);font-size:15px;
}
#app[data-ui="c5b"] .document-panel[open]>summary::after{
  content:"×";margin-left:auto;color:var(--ha-muted);font-size:25px;
  font-weight:400;line-height:1;
}
#app[data-ui="c5b"] .document-panel .document-header{
  align-items:flex-start;justify-content:flex-start;gap:8px;margin:14px 0;
}
#app[data-ui="c5b"] .document-panel .document-header strong{
  flex:0 0 100%;font-size:13px;
}
#app[data-ui="c5b"] .document-panel .document-row{
  align-items:flex-start;border-top:1px solid var(--ha-line);padding:12px 0;
}
#app[data-ui="c5b"] .document-panel .document-row button{
  min-height:34px;white-space:normal;text-align:left;
}
#app[data-ui="c5b"] .document-panel details{padding:8px 0}
#app[data-ui="c5b"] .document-panel button:hover{
  border-color:var(--ha-accent);background:var(--ha-soft);
}
#app[data-ui="c5b"] .document-panel>summary:focus-visible{
  outline:2px solid var(--ha-accent);outline-offset:3px;
}
@keyframes ha-files-enter{
  from{opacity:.88;transform:translateX(22px)}
  to{opacity:1;transform:translateX(0)}
}
html[data-short-workspace] #app[data-ui="c5b"] .document-panel{
  max-height:none;margin:0!important;padding:0 14px!important;
}
html[data-short-workspace] #app[data-ui="c5b"] .document-panel[open]{
  max-height:100dvh;padding:20px!important;
}
@media(max-width:600px){
  #app[data-ui="c5b"] .document-panel:not([open]){top:96px;right:10px;padding:0 10px!important}
  #app[data-ui="c5b"] .document-panel:not([open])>summary{min-height:36px;font-size:11px}
  #app[data-ui="c5b"] .document-panel[open]{
    width:100vw;border-radius:0;padding:18px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  #app[data-ui="c5b"] .document-panel[open]{animation:none}
}

/* Compact single-row composer. The toolbar is a contextual + popover, not
   a second row. Long prompts grow naturally while empty prompts remain small. */
#app[data-ui="c5b"] .composer.compact-composer{
  display:flex;align-items:center;gap:8px;
  min-height:54px;padding:6px 8px!important;
  border-radius:999px!important;overflow:visible;
}
#app[data-ui="c5b"] .compact-composer .MuiInputBase-root{
  width:100%;min-width:0;align-items:center;
}
#app[data-ui="c5b"] .compact-composer textarea{
  min-height:24px!important;max-height:128px!important;
  box-sizing:border-box;margin:0;padding:2px 0!important;resize:none;
  line-height:1.5!important;
}
#app[data-ui="c5b"] .compact-composer #toolsToggle{
  width:40px;height:40px;min-width:40px;min-height:40px;
  flex-shrink:0;color:var(--ha-text);border-radius:50%;
}
#app[data-ui="c5b"] .compact-composer #toolsToggle[aria-expanded="true"]{
  background:var(--ha-soft);color:var(--ha-accent);
}
#app[data-ui="c5b"] .compact-composer .composer-plus{
  font-size:26px;font-weight:400;line-height:1;transform:translateY(-1px);
}
#app[data-ui="c5b"] .compact-composer #send{
  border-radius:50%;width:40px;height:40px;flex:0 0 40px;
}
#app[data-ui="c5b"] .composer-tools-popover{
  position:absolute;bottom:calc(100% + 12px);left:0;z-index:1300;
  width:210px;padding:7px;box-sizing:border-box;
  border:1px solid var(--ha-line);border-radius:14px;
  background:var(--ha-surface);color:var(--ha-text);
  box-shadow:0 12px 38px rgba(15,23,42,.18);
}
#app[data-ui="c5b"] .composer-tools-popover .composer-tool-option{
  display:flex;justify-content:flex-start;gap:7px;
  min-height:42px;padding:8px 10px;border-radius:9px;
  color:var(--ha-text);background:transparent;text-align:left;
}
#app[data-ui="c5b"] .composer-tools-popover .composer-tool-option:hover,
#app[data-ui="c5b"] .composer-tools-popover .composer-tool-option:focus-visible{
  background:var(--ha-soft);color:var(--ha-accent);
}
#app[data-ui="c5b"] .composer-tools-popover svg{width:18px;height:18px}
@media(max-width:480px){
  #app[data-ui="c5b"] .composer.compact-composer{
    min-height:52px;padding:5px 6px!important;gap:4px;border-radius:26px!important;
  }
  #app[data-ui="c5b"] .compact-composer #toolsToggle{
    width:40px;height:40px;min-width:40px;min-height:40px;
  }
  #app[data-ui="c5b"] .compact-composer #send{
    width:40px;height:40px;min-width:40px;min-height:40px;
  }
  #app[data-ui="c5b"] .composer-tools-popover{width:min(220px,calc(100vw - 40px))}
}
html[data-short-workspace] #app[data-ui="c5b"] .composer.compact-composer{
  min-height:48px;padding:4px 7px!important;
}

/* Source search mode remains visible when the + menu is closed. */
#app[data-ui="c5b"] .compact-composer #toolsToggle.web-search-active{background:var(--ha-soft);color:var(--ha-accent);box-shadow:inset 0 0 0 1px var(--ha-accent)}
#app[data-ui="c5b"] .composer-tools-popover #webSearchButton[aria-pressed="true"]{background:var(--ha-soft);color:var(--ha-accent)}