/* C5B: one workspace design system. Authentication owns its separate stylesheet.
   Explicit mode tokens keep content legible over every custom background. */
#app[data-ui="c5b"]{
  --ha-surface:#ffffff;--ha-rail:#f4f6fb;--ha-soft:#eef2ff;
  --ha-text:#17243b;--ha-muted:#52627a;--ha-line:#dce3ed;
  --ha-accent:#4f46e5;--ha-accent-hover:#4338ca;--ha-link:#4338ca;
  --ha-user:#e9edff;--ha-user-text:#273674;
  --ha-shadow:0 8px 28px rgba(25,40,72,.07);
  position:relative;isolation:isolate;color:var(--ha-text);
}
#app[data-ui="c5b"][data-mode="dark"]{
  --ha-surface:#182131;--ha-rail:#111927;--ha-soft:#222e45;
  --ha-text:#edf2fa;--ha-muted:#a9b7cc;--ha-line:#344158;
  --ha-accent:#818cf8;--ha-accent-hover:#a5b4fc;--ha-link:#b4bdff;
  --ha-user:#2a3458;--ha-user-text:#eef0ff;
  --ha-shadow:0 8px 28px rgba(0,0,0,.17);
}
#app[data-ui="c5b"] .main{min-width:0;background:transparent!important}
#app[data-ui="c5b"] .MuiAppBar-root{
  background:var(--ha-surface)!important;color:var(--ha-text)!important;
  border-bottom:1px solid var(--ha-line)!important;flex-shrink:0;
}
#app[data-ui="c5b"] .MuiToolbar-root{min-height:60px!important;padding:0 24px!important;gap:12px}
#app[data-ui="c5b"] .MuiAppBar-root .MuiStack-root{min-width:0}
#app[data-ui="c5b"] .MuiAppBar-root .MuiTypography-root{color:var(--ha-text);letter-spacing:-.025em}
#app[data-ui="c5b"] .MuiChip-root{color:var(--ha-muted);border-color:var(--ha-line);background:var(--ha-soft)}
#app[data-ui="c5b"] #topModel{max-width:180px;height:26px;border-radius:7px}
#app[data-ui="c5b"] #status{height:26px;border-radius:7px;font-weight:600}
#app[data-ui="c5b"] .sidebar{
  background:var(--ha-rail)!important;color:var(--ha-text)!important;
  border-right:1px solid var(--ha-line)!important;box-shadow:none;
  /* Width and transforms belong to React, including collapsed/mobile states. */
}
#app[data-ui="c5b"] .sidebar .MuiTypography-root,#app[data-ui="c5b"] .sidebar .MuiListItemText-primary{color:inherit}
#app[data-ui="c5b"] .sidebar .MuiTypography-caption,#app[data-ui="c5b"] .sidebar .MuiTypography-overline{color:var(--ha-muted)}
#app[data-ui="c5b"] .sidebar .MuiDivider-root{border-color:var(--ha-line)}
#app[data-ui="c5b"] .sidebar-section{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--ha-line) transparent}
#app[data-ui="c5b"] #newChat{
  min-height:46px;border-radius:12px!important;background:var(--ha-accent)!important;
  color:#fff!important;box-shadow:none;border:1px solid transparent;text-transform:none;
}
#app[data-ui="c5b"][data-mode="dark"] #newChat{color:#111827!important}
#app[data-ui="c5b"] #newChat:hover{background:var(--ha-accent-hover)!important}
#app[data-ui="c5b"] .history-row{display:flex;align-items:center;gap:4px;width:100%;min-width:0}
#app[data-ui="c5b"] .history-item{
  flex:1;min-width:0;min-height:42px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border:1px solid transparent!important;border-radius:9px!important;
  background:transparent!important;color:var(--ha-muted)!important;
}
#app[data-ui="c5b"] .history-item:hover{background:var(--ha-soft)!important;color:var(--ha-text)!important}
#app[data-ui="c5b"] .history-item.active{background:var(--ha-surface)!important;border-color:var(--ha-line)!important;color:var(--ha-text)!important;font-weight:600;box-shadow:inset 3px 0 var(--ha-accent)}
#app[data-ui="c5b"] .history-delete{flex:0 0 32px;width:32px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--ha-muted);cursor:pointer}
#app[data-ui="c5b"] .history-delete:hover{background:var(--ha-soft);color:#dc2626}
#app[data-ui="c5b"] .account{border-top:1px solid var(--ha-line);padding-top:12px!important;margin-top:6px}
#app[data-ui="c5b"] .MuiIconButton-root{color:var(--ha-muted)}
#app[data-ui="c5b"] .MuiIconButton-root:hover{background:var(--ha-soft);color:var(--ha-text)}
#app[data-ui="c5b"] .messages{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ha-line) transparent;padding-top:28px!important;padding-bottom:24px!important}
#app[data-ui="c5b"] .welcome{padding:clamp(20px,5vh,64px) 0 24px!important}
#app[data-ui="c5b"] .welcome h2{color:var(--ha-text)!important;background:none!important;-webkit-text-fill-color:var(--ha-text)!important;font-size:clamp(28px,3.2vw,42px)!important;font-weight:700;letter-spacing:-.045em;line-height:1.15}
#app[data-ui="c5b"] .welcome h4{color:var(--ha-muted);font-size:clamp(17px,2vw,22px)!important;line-height:1.5;margin-bottom:32px;font-weight:400}
#app[data-ui="c5b"] .prompt-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
#app[data-ui="c5b"] .prompt-card{
  text-align:left;font:inherit;color:var(--ha-text);width:100%;min-width:0;
  height:132px!important;padding:20px!important;border-radius:14px!important;
  border:1px solid var(--ha-line)!important;background:var(--ha-surface)!important;
  box-shadow:none!important;transition:border-color .16s,box-shadow .16s!important;
}
#app[data-ui="c5b"] .prompt-card:hover{border-color:var(--ha-accent)!important;box-shadow:var(--ha-shadow)!important;transform:none!important}
#app[data-ui="c5b"] .prompt-card .MuiTypography-caption{font-size:12px;color:var(--ha-muted);line-height:1.6}
#app[data-ui="c5b"] .prompt-card .MuiStack-root>.MuiBox-root{background:var(--ha-soft);color:var(--ha-accent);border-radius:8px;width:30px;height:30px}
#app[data-ui="c5b"] .message{max-width:820px!important;margin:12px auto!important;min-width:0}
#app[data-ui="c5b"] .message .message-content{min-width:0;max-width:100%}
#app[data-ui="c5b"] .message.user .message-content{max-width:85%}
#app[data-ui="c5b"] .message .bubble{overflow-wrap:anywhere;font-size:inherit!important;line-height:1.75!important}
#app[data-ui="c5b"] .message.user .bubble{max-width:100%!important;background:var(--ha-user)!important;color:var(--ha-user-text)!important;border:1px solid var(--ha-line)!important;padding:12px 18px!important;border-radius:18px 18px 5px 18px!important;box-shadow:none!important}
#app[data-ui="c5b"] .message.assistant .bubble{background:var(--ha-surface)!important;color:var(--ha-text)!important;border:1px solid var(--ha-line)!important;padding:20px 24px!important;border-radius:16px!important;box-shadow:none!important;max-width:100%!important}
#app[data-ui="c5b"] .bubble p:first-child{margin-top:0}
#app[data-ui="c5b"] .bubble p:last-child{margin-bottom:0}
#app[data-ui="c5b"] .bubble a{color:var(--ha-link);text-decoration:underline;text-underline-offset:3px}
#app[data-ui="c5b"] .bubble pre{max-width:100%;overflow:auto;padding:16px;border-radius:10px;background:var(--ha-rail);border:1px solid var(--ha-line);font-size:.88em;line-height:1.65}
#app[data-ui="c5b"] .bubble code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
#app[data-ui="c5b"] .bubble :not(pre)>code{background:var(--ha-soft);padding:2px 5px;border-radius:4px}
#app[data-ui="c5b"] .bubble table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:.93em}
#app[data-ui="c5b"] .bubble th,#app[data-ui="c5b"] .bubble td{padding:10px 12px;border:1px solid var(--ha-line);text-align:left}
#app[data-ui="c5b"] .bubble th{background:var(--ha-soft)}
#app[data-ui="c5b"] .message-actions{gap:6px;opacity:1!important;margin-top:8px!important}
#app[data-ui="c5b"] .message-action{min-width:34px;min-height:34px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ha-muted)!important;cursor:pointer}
#app[data-ui="c5b"] .message-action:hover{background:var(--ha-soft);color:var(--ha-text)!important}
#app[data-ui="c5b"] .composer-area{box-sizing:border-box;padding-bottom:max(10px,env(safe-area-inset-bottom))}
#app[data-ui="c5b"] .composer{
  min-height:100px;padding:12px 16px!important;border-radius:18px!important;
  background:var(--ha-surface)!important;border:1px solid var(--ha-line)!important;
  box-shadow:var(--ha-shadow)!important;backdrop-filter:none;
}
#app[data-ui="c5b"] .composer:focus-within{border-color:var(--ha-accent)!important;box-shadow:0 0 0 3px var(--ha-soft),var(--ha-shadow)!important}
#app[data-ui="c5b"] .composer .MuiInputBase-root{color:var(--ha-text)}
#app[data-ui="c5b"] .composer textarea{color:var(--ha-text);caret-color:var(--ha-accent);font-size:16px!important;line-height:1.6}
#app[data-ui="c5b"] .composer textarea::placeholder{color:var(--ha-muted);opacity:1}
#app[data-ui="c5b"] .composer .MuiIconButton-root{width:40px;height:40px;border-radius:10px}
#app[data-ui="c5b"] #send{background:var(--ha-accent)!important;color:#fff!important;width:40px;height:40px;border-radius:12px;box-shadow:none}
#app[data-ui="c5b"][data-mode="dark"] #send{color:#111827!important}
#app[data-ui="c5b"] #send:hover{background:var(--ha-accent-hover)!important}
#app[data-ui="c5b"] #send:disabled{opacity:.45;cursor:default}
#app[data-ui="c5b"] .workspace-disclaimer{color:var(--ha-muted)!important;font-size:11px}
#app[data-ui="c5b"] .document-panel{flex-shrink:0;background:var(--ha-surface);color:var(--ha-text);border-color:var(--ha-line);border-radius:12px}
#app[data-ui="c5b"] .voice-status{background:var(--ha-surface);color:var(--ha-text);border:1px solid var(--ha-line);border-radius:12px}
#app[data-ui="c5b"] :is(button,a,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--ha-accent);outline-offset:3px}
#app[data-ui="c5b"] .sidebar button,#app[data-ui="c5b"] .prompt-card{touch-action:manipulation}
@media(max-width:900px){
  #app[data-ui="c5b"] .MuiToolbar-root{min-height:56px!important;padding:0 16px!important}
  #app[data-ui="c5b"] .prompt-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #app[data-ui="c5b"] .prompt-card{height:128px!important;padding:16px!important}
  #app[data-ui="c5b"] .message.assistant .bubble{padding:16px!important}
  #app[data-ui="c5b"] .composer{border-radius:16px!important;min-height:92px}
  #app[data-ui="c5b"] .composer .MuiIconButton-root{min-width:44px;min-height:44px}
  #app[data-ui="c5b"] .history-delete{flex-basis:40px;width:40px;height:44px}
}
@media(max-width:480px){
  #app[data-ui="c5b"] .MuiToolbar-root{padding:0 12px!important;gap:6px}
  #app[data-ui="c5b"] #topModel{max-width:100px;font-size:10px}
  #app[data-ui="c5b"] .prompt-grid{gap:8px}
  #app[data-ui="c5b"] .prompt-card{padding:12px!important;height:132px!important}
  #app[data-ui="c5b"] .welcome h4{margin-bottom:20px}
  #app[data-ui="c5b"] .message.user .message-content{max-width:92%}
}
@media(max-width:360px){#app[data-ui="c5b"] .prompt-grid{grid-template-columns:1fr!important}}
/* Preserve C4 keyboard-safe geometry. */
html[data-short-workspace] #app[data-ui="c5b"] .composer{min-height:0;padding:6px 10px!important}
html[data-short-workspace] #app[data-ui="c5b"] .composer textarea{max-height:72px;overflow-y:auto!important}
html[data-short-workspace] #app[data-ui="c5b"] .document-panel{max-height:76px;margin:3px auto;padding:4px 10px}
html[data-short-workspace] #app[data-ui="c5b"] .composer-area{padding-bottom:4px}
html[data-short-workspace] #app[data-ui="c5b"] .workspace-disclaimer{display:none}
@media(prefers-reduced-motion:reduce){
  #app[data-ui="c5b"] *,#app[data-ui="c5b"] *::before,#app[data-ui="c5b"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* app.js restores this same welcome surface after New chat/history hydration. */
#app[data-ui="c5b"] .welcome h1{color:var(--ha-text);font-size:clamp(28px,3.2vw,42px)!important;letter-spacing:-.045em;line-height:1.2}
#app[data-ui="c5b"] .welcome h1 span{color:var(--ha-accent)!important}
#app[data-ui="c5b"] .welcome>p,#app[data-ui="c5b"] .eyebrow{color:var(--ha-muted);opacity:1!important}
#app[data-ui="c5b"] .prompt-card:has(.prompt-icon){display:grid;grid-template-columns:30px minmax(0,1fr) 14px;align-items:center;gap:12px}
#app[data-ui="c5b"] .prompt-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--ha-soft);color:var(--ha-accent)}
#app[data-ui="c5b"] .prompt-card small{display:inline-block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--ha-muted)}
@media(max-width:480px){#app[data-ui="c5b"] .prompt-card:has(.prompt-icon){grid-template-columns:minmax(0,1fr) 16px;gap:6px}#app[data-ui="c5b"] .prompt-card .prompt-icon{display:none}}