:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Thai", "Leelawadee UI", Inter, ui-sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  color: #1b1d20;
  background: #f6f6f3;
  --sidebar: #111315;
  --sidebar-hover: #1c1f22;
  --sidebar-active: #282c30;
  --sidebar-line: #292d31;
  --sidebar-text: #f4f5f4;
  --sidebar-muted: #9ba2a8;
  --paper: #ffffff;
  --paper-soft: #f6f6f2;
  --line: #dedfd9;
  --muted: #747a7e;
  --text: #1b1d20;
  --accent: #17191c;
  --accent-soft: #eceeeb;
  --danger: #b42318;
  --success: #237a48;
  --shadow: 0 8px 30px rgba(18, 23, 21, .08);
}
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(140, 146, 152, 0.35) transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(140, 146, 152, 0.32); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(140, 146, 152, 0.52); }
::-webkit-scrollbar-corner { background: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--paper-soft); color: var(--text); }
body { min-height: 100dvh; overflow: hidden; }
button, input, textarea, select { font: inherit; }
select { color-scheme: light dark; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { width: 1em; height: 1em; fill: currentColor; }
.shell { min-height: 100dvh; }

/* Brand */
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; }
.brand-icon { width: 48px; height: 48px; flex: 0 0 auto; object-fit: contain; }
.brand-word { font-size: 28px; font-weight: 900; line-height: 1; letter-spacing: -.045em; text-shadow: 3px 3px 0 rgba(210,210,205,.7); }

/* Signed out */
.auth-screen { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: #efefec; }
.auth-card { width: min(520px, 100%); padding: 38px; border: 2px solid #151619; background: #fff; box-shadow: 9px 9px 0 #151619; text-align: center; }
.auth-brand { justify-content: center; margin-bottom: 24px; }
.auth-brand .brand-icon { width: 76px; height: 76px; }
.auth-brand .brand-word { font-size: 48px; }
.auth-card h1 { margin: 0 0 10px; font-size: 27px; }
.auth-card p { margin: 0 auto 28px; max-width: 420px; color: #6f7478; line-height: 1.65; }
.line-button { display: block; padding: 13px 18px; border-radius: 10px; background: #06c755; color: #fff; text-decoration: none; font-weight: 800; }

/* App shell */
.workspace { min-height: 100dvh; display: grid; grid-template-columns: 292px minmax(0,1fr); background: var(--paper); }
.sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--sidebar-line); background: var(--sidebar); color: var(--sidebar-text); }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 78px; padding: 13px 14px 9px; }
.sidebar-brand { appearance: none; border: 0; padding: 0 7px; background: transparent; color: inherit; cursor: pointer; }
.sidebar-brand .brand-icon { width: 47px; height: 47px; }
.sidebar-brand .brand-word { font-size: 25px; text-shadow: 3px 3px 0 #000; }
.sidebar-close { display: none; }
.sidebar-scroll { min-height: 0; flex: 1; overflow-y: auto; padding: 4px 10px 18px; scrollbar-width: thin; }
.main-chat-row, .project-main, .chat-item, .sidebar-action, .section-add, .project-action, .icon-button, .quiet-button, .primary-button, .send-button, .dialog-close, .folder-entry, .folder-new-button {
  border: 0; cursor: pointer;
}
.main-chat-row { width: 100%; min-height: 60px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; border-radius: 10px; padding: 9px 10px; background: transparent; color: var(--sidebar-text); text-align: left; }
.main-chat-row:hover, .main-chat-row.active { background: var(--sidebar-active); }
.row-icon { width: 28px; height: 28px; display: grid; place-items: center; color: var(--sidebar-muted); }
.row-icon svg { width: 21px; height: 21px; }
.row-copy { min-width: 0; display: grid; gap: 2px; }
.row-copy strong, .row-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-copy strong { font-size: 14px; font-weight: 750; }
.row-copy small { color: var(--sidebar-muted); font-size: 11px; }
.row-status { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.main-chat-row.is-busy .row-status { background: #8bd0bf; box-shadow: 0 0 0 3px rgba(139,208,191,.16); animation: status-pulse 1s ease-in-out infinite; }
.sidebar-section-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 7px 8px; color: var(--sidebar-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.section-add { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: transparent; color: var(--sidebar-muted); }
.section-add:hover { background: var(--sidebar-hover); color: #fff; }
.section-add svg { width: 18px; height: 18px; }
.project-list { display: grid; gap: 3px; }
.project-group { position: relative; }
.project-row { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; border-radius: 10px; }
.project-row:hover, .project-row.active-project { background: var(--sidebar-hover); }
.project-row.active-project { background: var(--sidebar-active); }
.project-main { min-width: 0; min-height: 44px; display: grid; grid-template-columns: 18px 20px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 7px 4px 7px 9px; background: transparent; color: var(--sidebar-text); text-align: left; }
.project-caret { display: grid; place-items: center; color: var(--sidebar-muted); transform: rotate(0); transition: transform 140ms ease; }
.project-row.is-open .project-caret { transform: rotate(90deg); }
.project-folder { display: grid; place-items: center; color: #c7cbd0; }
.project-caret svg, .project-folder svg { width: 16px; height: 16px; }
.project-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.project-count { color: var(--sidebar-muted); font-size: 11px; }
.project-actions { display: flex; align-items: center; gap: 1px; padding-right: 4px; opacity: 0; transition: opacity 120ms ease; }
.project-row:hover .project-actions, .project-row:focus-within .project-actions, .project-row.active-project .project-actions { opacity: 1; }
.project-action { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 7px; background: transparent; color: var(--sidebar-muted); }
.project-action:hover { background: #34383d; color: #fff; }
.project-action svg { width: 16px; height: 16px; }
.project-chats { display: grid; gap: 2px; padding: 2px 0 5px 28px; }
.chat-item { width: 100%; min-height: 38px; display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: center; gap: 8px; border-radius: 8px; padding: 6px 9px; background: transparent; color: #d7dbde; text-align: left; }
.chat-item:hover, .chat-item.active { background: var(--sidebar-hover); color: #fff; }
.chat-item.active { background: #30353a; }
.chat-item .chat-icon { display: grid; place-items: center; color: var(--sidebar-muted); }
.chat-item .chat-icon svg { width: 15px; height: 15px; }
.chat-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.project-empty { padding: 7px 9px 7px 26px; color: var(--sidebar-muted); font-size: 11px; }
.sidebar-footer { flex: 0 0 auto; border-top: 1px solid var(--sidebar-line); padding: 10px; }
.sidebar-user { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 9px; padding: 7px 8px 10px; }
.user-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: #2a2e33; color: #fff; font-size: 12px; font-weight: 850; }
.user-copy { min-width: 0; display: grid; gap: 2px; }
.user-copy strong, .user-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-copy strong { font-size: 12px; }
.user-copy small { color: var(--sidebar-muted); font-size: 10px; }
.sidebar-footer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.sidebar-action { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 8px; padding: 8px 9px; background: transparent; color: var(--sidebar-muted); font-size: 11px; }
.sidebar-action:hover { background: var(--sidebar-hover); color: #fff; }
.sidebar-action svg { width: 15px; height: 15px; }

/* Main chat */
.chat-workspace { min-width:0; min-height:0; height:100dvh; display:grid; grid-template-columns:repeat(var(--chat-column-count,1),minmax(0,1fr)); gap:1px; overflow:hidden; background:var(--line); }
.chat-panel { min-width:0; min-height:0; }
.chat-panel.is-active-column { box-shadow:inset 0 0 0 2px rgba(26,31,36,.10); z-index:1; }
.chat-panel.is-dragging { opacity:.68; }
.chat-column-actions { display:inline-flex; align-items:center; gap:4px; }
.chat-column-add,.chat-column-close { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:8px; padding:0; background:transparent; color:var(--muted); cursor:pointer; }
.chat-column-add:hover,.chat-column-close:hover,.chat-column-add:focus-visible,.chat-column-close:focus-visible { background:rgba(20,22,24,.06); color:var(--text); outline:none; }
.chat-column-add svg,.chat-column-close svg { width:18px; height:18px; }
.chat-column-close { display:none; }
.chat-workspace.has-multiple-columns .chat-column-close { display:grid; }
.chat-workspace[data-column-count="3"] .chat-column-add { display:none; }
.chat-item.open-in-column:not(.active),.main-chat-row.open-in-column:not(.active) { background:#202428; }
.chat-item.open-in-column .chat-icon,.main-chat-row.open-in-column .row-icon { color:#d8dcdf; }
.chat-workspace.has-multiple-columns .content-head { padding-inline:14px; gap:10px; cursor:grab; }
.chat-workspace.has-multiple-columns .content-head:active { cursor:grabbing; }
.chat-workspace.has-multiple-columns .status-pill { max-width:180px; }
.chat-workspace[data-column-count="3"] .content-head { min-height:64px; }
.chat-workspace[data-column-count="3"] .chat-title-line h2 { font-size:16px; }
.chat-workspace[data-column-count="3"] .context-label { font-size:9px; }
.chat-workspace[data-column-count="3"] .route-button,.chat-workspace[data-column-count="3"] .status-pill { display:none; }
.chat-workspace[data-column-count="2"] .messages,.chat-workspace[data-column-count="3"] .messages { padding-inline:14px; }
.chat-workspace[data-column-count="3"] .message { max-width:96%; }
.chat-workspace[data-column-count="2"] .composer,.chat-workspace[data-column-count="3"] .composer { padding-inline:12px; }
.chat-workspace[data-column-count="3"] .composer select { min-width:110px; max-width:150px; }
.content { position: relative; min-width: 0; height: 100dvh; display: grid; grid-template-rows: auto minmax(0,1fr) auto; background: var(--paper); }
.content-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding: 13px clamp(18px,3vw,34px); background: color-mix(in srgb, var(--paper) 94%, transparent); }
.chat-heading { min-width: 0; }
.chat-title-line { display: flex; align-items: center; gap: 9px; min-width: 0; }
.chat-title-line h2 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; font-weight: 800; }
.chat-heading small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.project-badge { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 999px; padding: 4px 8px; background: var(--accent-soft); color: #555c60; font-size: 10px; font-weight: 750; }
.content-actions { min-width: 0; display: flex; align-items: center; gap: 7px; }
.status-pill { max-width: 310px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 999px; padding: 7px 10px; background: var(--paper-soft); color: var(--muted); font-size: 11px; }
.quiet-button, .icon-button { border-radius: 8px; background: transparent; color: inherit; }
.quiet-button { padding: 8px 10px; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; }
.quiet-button:hover, .icon-button:hover { background: rgba(20,22,24,.06); }
.icon-button svg { width: 18px; height: 18px; }
.route-button { color: var(--muted); font-size: 11px; }
.messages { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 26px max(18px, calc((100% - 860px)/2)); }
.empty-state { margin: auto; max-width: 430px; text-align: center; color: var(--muted); line-height: 1.6; }
.empty-state-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--text); }
.empty-state-brand img { width: 58px; height: 58px; object-fit: contain; }
.empty-state-brand strong { font-size: 32px; letter-spacing: -.04em; }
.message { max-width: min(760px, 88%); display: grid; gap: 5px; }
.message.user { align-self: flex-end; justify-items: end; }
.message.assistant { align-self: flex-start; }
.message-meta { padding: 0 3px; color: var(--muted); font-size: 10px; font-weight: 700; }
.message-bubble { max-width:100%; border-radius:12px; padding:11px 13px; overflow-wrap:anywhere; line-height:1.62; box-shadow:0 1px 1px rgba(20,22,24,.04); font-variant-emoji: emoji; font-variant-numeric: proportional-nums; font-feature-settings: "pnum" 1, "tnum" 0; letter-spacing: normal; word-spacing: normal; }
.message.user .message-bubble { border-bottom-right-radius:4px; background:#1c1f22; color:#fff; white-space:pre-wrap; }
.message.assistant .message-bubble { border-bottom-left-radius:4px; background:#f0f1ed; color:var(--text); }
.markdown-body { white-space:normal; }
.markdown-body strong,.markdown-body b { font-variant-numeric: proportional-nums; font-feature-settings: "pnum" 1, "tnum" 0; letter-spacing: normal; word-spacing: normal; }
.markdown-body > :first-child { margin-top:0; }
.markdown-body > :last-child { margin-bottom:0; }
.markdown-body p { margin:.35em 0 .78em; }
.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6 { margin:1em 0 .42em; line-height:1.3; letter-spacing:-.015em; }
.markdown-body h1 { font-size:1.35em; }
.markdown-body h2 { font-size:1.22em; }
.markdown-body h3 { font-size:1.12em; }
.markdown-body h4,.markdown-body h5,.markdown-body h6 { font-size:1em; }
.markdown-body ul,.markdown-body ol { margin:.45em 0 .85em; padding-left:1.55em; }
.markdown-body li { margin:.2em 0; }
.markdown-body blockquote { margin:.65em 0; padding:.1em 0 .1em .85em; border-left:3px solid #b7bab4; color:var(--muted); }
.markdown-body blockquote p { margin:.25em 0; }
.markdown-body hr { border:0; border-top:1px solid var(--line); margin:1em 0; }
.markdown-body a { color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.markdown-inline-code { border:1px solid rgba(120,124,128,.2); border-radius:5px; padding:.08em .35em; background:rgba(120,124,128,.12); font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; font-size:.9em; }
.markdown-code-block { margin:.7em 0 .95em; overflow:auto; border:1px solid var(--line); border-radius:10px; background:#1f2225; color:#f4f5f2; padding:12px 13px; white-space:pre; line-height:1.5; tab-size:2; }
.markdown-code-block code { font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; font-size:12px; }
.markdown-styled-text { color: var(--inline-color); }
.markdown-styled-bg { background-color: var(--inline-bg); border-radius: 4px; padding: 1px 4px; }
.markdown-body mark { background-color: color-mix(in srgb, var(--inline-bg, #fef08a) 85%, transparent); color: var(--inline-color, inherit); border-radius: 4px; padding: 1px 4px; }
.svg-render-card {
  margin: 0.85em 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #1f2225;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
}
.svg-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: #25282c;
  border-bottom: 1px solid #35383e;
}
.svg-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #a0a6ac;
  letter-spacing: .02em;
}
.svg-badge-icon {
  width: 14px;
  height: 14px;
  fill: #56c98b;
}
.svg-card-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.svg-card-tabs {
  display: inline-flex;
  align-items: center;
  background: #191b1e;
  border-radius: 8px;
  padding: 2px;
  border: 1px solid #35383e;
}
.svg-tab-button {
  border: 0;
  background: transparent;
  color: #8c9298;
  font-size: 11px;
  font-weight: 650;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s ease;
}
.svg-tab-button:hover {
  color: #fff;
}
.svg-tab-button.is-active {
  background: #2e3238;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.svg-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.svg-action-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #3b3e43;
  border-radius: 7px;
  background: #202226;
  color: #cfd4d9;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  cursor: pointer;
  transition: all .15s ease;
}
.svg-action-button:hover {
  border-color: #555b60;
  background: #2a2e33;
  color: #fff;
}
.svg-action-button svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.svg-preview-pane {
  display: grid;
  place-items: center;
  min-height: 180px;
  max-height: 540px;
  overflow: auto;
  padding: 20px;
  background: #f8fafc;
  border-radius: 0 0 12px 12px;
}
.svg-preview-pane[hidden],
.svg-code-pane[hidden] {
  display: none !important;
}
.svg-rendered-graphic {
  max-width: 100%;
  max-height: 500px;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.08));
}
.svg-code-pane {
  padding: 0;
}
.svg-code-pane .markdown-code-block {
  margin: 0;
  border: 0;
  border-radius: 0 0 12px 12px;
  max-height: 500px;
}
@media (max-width: 600px) {
  .svg-card-header {
    padding: 6px 10px;
  }
  .svg-card-controls {
    width: 100%;
    justify-content: space-between;
  }
}
.message.thinking { align-self: flex-start; display: flex; align-items: center; gap: 9px; color: var(--muted); }
.thinking-brand { width: 28px; height: 28px; object-fit: contain; }
.thinking-copy { display:inline-flex; align-items:center; gap:8px; height:32px; box-sizing:border-box; padding:0 10px; border-radius:10px; background:#f3f4f0; font-size:12px; line-height:1; }
.thinking-dots { display: inline-flex; gap: 4px; }
.thinking-dots span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .3; animation: thinking-pulse 1s ease-in-out infinite; }
.thinking-dots span:nth-child(2){ animation-delay:.14s; }
.thinking-dots span:nth-child(3){ animation-delay:.28s; }
.thinking-worker-chip { display:inline-flex; align-items:center; gap:7px; height:32px; box-sizing:border-box; padding:0 10px; border:1px solid var(--line); border-radius:10px; background:#f3f4f0; color:var(--muted); font-size:12px; line-height:1; white-space:nowrap; }
.thinking-worker-motion { width:12px; height:12px; flex:0 0 12px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; opacity:.72; animation:worker-chip-spin .9s linear infinite; }
.thinking-label,.thinking-worker-label { font:inherit; line-height:inherit; font-weight:400; letter-spacing:normal; }
@keyframes worker-chip-spin { to { transform:rotate(360deg); } }
.scroll-bottom-button { position:absolute; z-index:8; left:50%; right:auto; bottom:calc(var(--composer-height,112px) + 14px); width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; padding:0; background:color-mix(in srgb,var(--paper) 96%,transparent); color:var(--text); box-shadow:0 5px 18px rgba(20,22,24,.14); cursor:pointer; transform:translateX(-50%); transition:opacity .12s ease,transform .12s ease,box-shadow .12s ease; }
.scroll-bottom-button:hover { box-shadow:0 7px 22px rgba(20,22,24,.2); transform:translateX(-50%) translateY(-1px); }
.scroll-bottom-button svg { width:18px; height:18px; }

/* Composer */
.composer { display: grid; gap: 9px; border-top: 1px solid var(--line); padding: 12px max(18px, calc((100% - 860px)/2)) max(14px,env(safe-area-inset-bottom)); background: #fafaf7; }
.composer-shell { position:relative; border:1px solid #d7d8d2; border-radius:24px; background:#fff; padding:8px 10px 9px; box-shadow:0 1px 2px rgba(0,0,0,.04); transition:border-color .16s,box-shadow .16s; }
.composer-shell:focus-within { border-color:#9a9e9f; box-shadow:0 0 0 2px rgba(24,26,29,.055); }
.composer.is-file-dragging .composer-shell { border-color:#555b5f; box-shadow:0 0 0 3px rgba(24,26,29,.08); }
.composer.is-file-dragging .composer-shell::after { content:"Drop files to attach"; position:absolute; inset:5px; z-index:12; display:grid; place-items:center; border:1.5px dashed #858b8e; border-radius:18px; background:rgba(250,250,247,.94); color:#444a4e; font-size:12px; font-weight:760; letter-spacing:.01em; pointer-events:none; }
.composer textarea { width:100%; min-height:46px; max-height:180px; resize:none; border:0; border-radius:16px; padding:10px 8px 8px; background:transparent; color:var(--text); line-height:1.5; outline:none; }
.composer-disabled { opacity:.72; }
.composer-disabled .composer-shell { background:#f3f3ef; }
.composer-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:2px; }
.composer-context { min-width:0; display:flex; align-items:center; gap:7px; }
.composer select {
  min-width:140px; max-width:260px; height:34px; border:1px solid var(--line); border-radius:999px;
  padding:0 28px 0 12px; background-color:var(--paper-soft); color:var(--text); font-size:11px; font-weight:600;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c9298' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:11px 11px;
  cursor:pointer;
}
.composer select:focus { outline:none; border-color:#858b8e; }
.composer-runtime { border-radius:999px; padding:5px 8px; background:var(--accent-soft); color:var(--muted); font-size:10px; font-weight:700; }
.composer-actions { display:flex; align-items:center; gap:7px; }
.composer-icon-button,.send-button { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer; }
.composer-icon-button { background:transparent; color:var(--text); }
.composer-icon-button:hover { background:#f0f1ee; }
.composer-icon-button svg,.send-button svg { width:19px; height:19px; fill:currentColor; }
.composer-mic-button { position:relative; overflow:visible; isolation:isolate; --mic-level:.08; --mic-glow:10px; }
.composer-mic-button::before,.composer-mic-button::after { content:""; position:absolute; inset:-3px; z-index:-1; border-radius:50%; pointer-events:none; opacity:0; }
.composer-mic-button.is-recording { background:#17191c; color:#fff; box-shadow:0 0 var(--mic-glow) rgba(23,25,28,.34); }
.composer-mic-button.is-recording::before,.composer-mic-button.is-recording::after { border:1.5px solid rgba(23,25,28,.34); opacity:1; animation:composer-mic-ripple 1.65s cubic-bezier(.2,.65,.25,1) infinite; }
.composer-mic-button.is-recording::after { animation-delay:.78s; }
.composer-mic-button.is-recording svg { transform:scale(var(--mic-scale,.94)); transition:transform .08s linear; }
.composer-mic-button.is-processing { background:#f0f1ee; color:#5f6569; cursor:progress; }
.composer-mic-button.is-processing::before { inset:-5px; border:2px solid rgba(95,101,105,.18); border-top-color:currentColor; opacity:1; animation:composer-mic-orbit .72s linear infinite; }
.composer-mic-button.is-processing::after { opacity:0; }
.composer-mic-button.is-processing svg { opacity:.56; }
@keyframes composer-mic-ripple { 0% { transform:scale(.84); opacity:.7; } 70%,100% { transform:scale(1.72); opacity:0; } }
@keyframes composer-mic-orbit { to { transform:rotate(360deg); } }
.composer-voice { min-height:58px; display:grid; grid-template-columns:36px minmax(0,1fr) auto 36px; align-items:center; gap:10px; padding:5px 3px; }
.composer-voice[hidden] { display:none !important; }
.composer.is-voice-active textarea,.composer.is-voice-active .composer-toolbar { display:none; }
.composer-voice-button { width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:50%; background:#f1f2ee; color:#34383b; cursor:pointer; padding:0; }
.composer-voice-button:hover { background:#e8e9e4; }
.composer-voice-button svg { width:18px; height:18px; fill:currentColor; }
.composer-voice-stop { background:#17191c; color:#fff; }
.composer-voice-stop:hover { background:#292c30; }
.composer-voice-stop > span { width:11px; height:11px; border-radius:2px; background:currentColor; }
.composer-voice-track { min-width:0; position:relative; height:38px; display:flex; align-items:center; }
.composer-voice-wave { width:100%; height:32px; display:flex; align-items:center; justify-content:center; gap:2px; overflow:hidden; }
.composer-voice-wave > i { width:3px; min-width:2px; height:100%; display:block; border-radius:999px; background:#555b60; transform:scaleY(var(--voice-bar,.16)); transform-origin:center; transition:transform .07s linear,opacity .16s ease; opacity:.86; }
.composer-voice-status { display:none; color:var(--muted); font-size:12px; font-weight:650; white-space:nowrap; }
.composer-voice-time { min-width:38px; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; text-align:right; }
.composer.is-voice-processing .composer-voice { grid-template-columns:36px minmax(0,1fr); }
.composer.is-voice-processing .composer-voice-track { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center; }
.composer.is-voice-processing .composer-voice-wave > i { opacity:.28; animation:composer-voice-processing 1.15s ease-in-out infinite alternate; }
.composer.is-voice-processing .composer-voice-status { display:block; }
.composer.is-voice-processing .composer-voice-time,.composer.is-voice-processing .composer-voice-stop { display:none; }
@keyframes composer-voice-processing { from { transform:scaleY(.16); } to { transform:scaleY(.48); } }
.cancel-button { color:#9f3c35; font-size:11px; }
.send-button { background:#17191c; color:#fff; padding:0; }
.send-button:disabled { cursor:not-allowed; opacity:.35; }
.composer-disabled .composer-icon-button { opacity:.38; pointer-events:none; }
.composer-attachments { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:thin; }
.composer-attachments[hidden] { display:none !important; }
.composer-attachment-chip { position:relative; min-width:0; max-width:220px; height:58px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:14px; background:#f7f7f4; padding:6px 28px 6px 7px; }
.composer-attachment-chip.is-audio { width:min(360px,78vw); max-width:360px; height:auto; min-height:70px; display:grid; grid-template-columns:minmax(0,1fr); gap:5px; padding:8px 30px 8px 9px; }
.composer-audio-preview { width:100%; height:34px; min-width:0; }
.composer-attachment-chip.is-audio .composer-attachment-copy { padding-inline:2px; }
.composer-attachment-chip img { width:44px; height:44px; border-radius:9px; object-fit:cover; background:#111; }
.composer-attachment-icon { width:36px; height:36px; display:grid; place-items:center; font-size:19px; }
.composer-image-fallback { width:44px; height:44px; flex:0 0 44px; border-radius:9px; background:#111; color:#fff; font-size:18px; }
.composer-attachment-copy { min-width:0; display:grid; gap:1px; }
.composer-attachment-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.composer-attachment-copy span { color:var(--muted); font-size:9px; }
.composer-attachment-remove { position:absolute; top:5px; right:5px; width:20px; height:20px; border:0; border-radius:50%; background:#e7e8e4; color:#444; cursor:pointer; line-height:1; font-size:15px; }
.queued-attachment-list { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; margin-top:5px; }
.queued-attachment-list span { border:1px solid var(--line); border-radius:999px; padding:4px 7px; font-size:9px; color:var(--muted); }

.message-local-downloads { display:flex; flex-wrap:wrap; gap:7px; margin-top:7px; }
.message-local-download { max-width:min(420px,100%); display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:11px; padding:8px 10px; background:#f5f6f2; color:var(--text); text-decoration:none; }
.message-local-download:hover { background:#eceee8; border-color:#c7cac3; }
.message-local-download-icon { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border-radius:8px; background:#17191c; color:#fff; font-size:15px; font-weight:800; }
.message-local-download > span:last-child { min-width:0; display:grid; gap:1px; }
.message-local-download strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.message-local-download small { color:var(--muted); font-size:9px; }

/* Dialogs */
.app-dialog { width: min(690px, calc(100vw - 28px)); max-height: min(88dvh, 900px); border: 0; border-radius: 16px; padding: 0; background: var(--paper); color: var(--text); box-shadow: 0 26px 90px rgba(0,0,0,.28); }
.app-dialog::backdrop { background: rgba(8,9,10,.5); backdrop-filter: blur(3px); }
.app-dialog form { width: 100%; max-height: min(88dvh,900px); overflow-y: auto; padding: 23px; }
.compact-dialog { width: min(470px, calc(100vw - 28px)); }
.confirm-dialog { width: min(440px, calc(100vw - 32px)); }
.confirm-dialog-message { margin: 8px 0 20px; font-size: 13px; line-height: 1.55; color: var(--text); word-break: break-word; }
.confirm-dialog .dialog-actions { gap: 10px; }
.confirm-dialog .quiet-button { min-height: 38px; padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 650; }
.confirm-dialog .primary-button { min-height: 38px; padding: 8px 18px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.settings-dialog { width: min(620px, calc(100vw - 28px)); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 8px; }
.dialog-kicker { margin: 0 0 3px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.dialog-head h3 { margin: 0; font-size: 22px; }
.dialog-close { width: 32px; height: 32px; border-radius: 8px; background: transparent; color: var(--muted); font-size: 25px; line-height: 1; }
.dialog-close:hover { background: var(--paper-soft); color: var(--text); }
.dialog-note { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.dialog-section { margin: 17px 0; padding-top: 15px; border-top: 1px solid var(--line); }
.dialog-section h4 { margin: 0 0 10px; font-size: 13px; }
.form-grid { display: grid; gap: 10px; }
.form-grid.two-columns { grid-template-columns: minmax(0,1.4fr) minmax(160px,.6fr); }
.app-dialog label { display: block; margin: 11px 0; color: #656b6f; font-size: 11px; font-weight: 700; }
.optional { color: #9a9ea1; font-weight: 500; }
.app-dialog input, .app-dialog textarea, .app-dialog select { display: block; width: 100%; margin-top: 6px; border: 1px solid #d5d7d1; border-radius: 9px; padding: 10px 11px; background: #fff; color: var(--text); outline: none; }
.app-dialog select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c9298' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px;
  padding-right: 32px; cursor: pointer;
}
.app-dialog input:focus, .app-dialog textarea:focus, .app-dialog select:focus { border-color: #858b8e; box-shadow: 0 0 0 2px rgba(24,26,29,.06); }
.folder-browser { margin: 10px 0 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.folder-browser-head { display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); padding: 7px; background: #f7f7f3; }
.folder-up-button { flex:0 0 auto; width:32px; height:30px; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:var(--text); cursor:pointer; }
.folder-up-button:hover:not(:disabled) { background:var(--paper-soft); }
.folder-up-button:disabled { opacity:.38; cursor:default; }
.folder-up-button svg { width:16px; height:16px; fill:currentColor; }
.folder-new-button { flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; min-height:30px; border:0; border-radius:7px; padding:0 8px; background:transparent; color:var(--text); font-size:10px; font-weight:700; }
.folder-new-button:hover:not(:disabled) { background:var(--paper-soft); }
.folder-new-button:disabled { opacity:.38; cursor:default; }
.folder-new-button svg { width:15px; height:15px; fill:currentColor; }
.folder-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.folder-list { min-height: 110px; max-height: 250px; overflow-y: auto; padding: 5px; }
.folder-entry { display: block; width: 100%; border-radius: 7px; padding: 8px 9px; background: transparent; color: var(--text); text-align: left; }
.folder-entry:hover { background: var(--paper-soft); }
.dialog-error { color: var(--danger); font-size: 11px; }
.dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.dialog-action-spacer { flex: 1; }
.primary-button { border-radius: 8px; padding: 9px 14px; background: #17191c; color: #fff; font-weight: 750; border: 0; cursor: pointer; }
.primary-button:disabled { opacity: .45; cursor: not-allowed; }
.primary-button.is-danger { background: #b42318; color: #ffffff; }
.primary-button.is-danger:hover:not(:disabled) { background: #d92d20; }
.danger-button { color: var(--danger); }
.project-delete { margin-right: auto; }
.install-panel { margin: 13px 0; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.install-command-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.install-command-row code { min-width: 0; flex: 1; overflow-x: auto; border-radius: 7px; padding: 9px 10px; background: var(--paper-soft); white-space: nowrap; font-size: 10px; }
.device-list-panel { margin: 17px 0; }
.device-list-head { display: grid; gap: 3px; margin-bottom: 8px; }
.device-list-head small, .settings-device-meta, .settings-device-runtimes, .device-list-empty { color: var(--muted); font-size: 10px; line-height: 1.5; }
.settings-devices { display: grid; gap: 7px; }
.settings-device-card { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; }
.settings-device-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.settings-device-policy-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin-top:5px; padding-top:8px; border-top:1px solid var(--line); }
.settings-device-policy-grid label { margin:0; }
.settings-device-policy-grid select { margin-top:4px; padding:7px 8px; font-size:10px; }
.settings-device-policy-note { color:var(--muted); font-size:9px; line-height:1.5; }
.settings-device-policy-status { min-height:14px; color:var(--success); font-size:9px; }
.settings-device-policy-status.is-warning { color:#a76a24; }
.settings-device-policy-status.is-error { color:var(--danger); }
.device-state { border-radius: 999px; padding: 3px 7px; background: #eee; font-size: 9px; font-weight: 800; }
.device-state.online { background: #e9f6ed; color: var(--success); }
.device-state.offline { background: #f7efea; color: #96502e; }

.agent-settings-section .dialog-note { margin-bottom:8px; }
.agent-settings-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.agent-settings-head > div { min-width:0; }
.agent-settings-head h4 { margin-bottom:3px; }
.agent-settings-head .dialog-note { margin:0; }
#global-instructions { min-height:116px; resize:vertical; line-height:1.5; }
.global-skills { display:grid; gap:7px; margin-top:10px; }
.global-skills-empty { border:1px dashed var(--line); border-radius:9px; padding:13px; color:var(--muted); font-size:10px; text-align:center; }
.global-skill-card { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:9px; padding:10px 11px; }
.global-skill-card.is-disabled { opacity:.58; }
.global-skill-copy { min-width:0; flex:1; display:grid; gap:2px; }
.global-skill-copy strong { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.global-skill-copy span { color:var(--muted); font-size:10px; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.global-skill-copy small { color:var(--muted); font-size:9px; }
.global-skill-actions { flex:0 0 auto; display:flex; align-items:center; gap:5px; }
.global-skill-actions .quiet-button { padding:6px 8px; font-size:9px; }
.global-skill-dialog textarea { resize:vertical; line-height:1.5; }
.global-skill-enabled { display:flex !important; align-items:center; gap:8px; width:max-content; cursor:pointer; }
.global-skill-enabled input { width:16px !important; height:16px; margin:0 !important; }
.global-skill-enabled span { color:var(--text); }
@media (max-width:560px) {
  .agent-settings-head { align-items:stretch; }
  .agent-settings-head .quiet-button { flex:0 0 auto; }
  .global-skill-card { align-items:flex-start; }
  .global-skill-actions { flex-direction:column; align-items:stretch; }
  .settings-device-policy-grid { grid-template-columns:1fr; }
}

/* Device enrollment page retains the same brand system */
.device-shell { min-height: 100dvh; display: grid; place-items: center; padding: 28px; background: #efefec; }
.device-card { width: min(560px,100%); padding: 32px; border: 2px solid #151619; background: #fff; box-shadow: 8px 8px 0 #151619; }
.brand-mark { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 12px; background: #151619; color: #fff; font-weight: 850; }
.device-card h1 { margin: 0 0 8px; }
.eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.muted, .security-note { color: var(--muted); line-height: 1.55; }
.device-detail dl { margin: 20px 0; padding: 13px 15px; background: var(--paper-soft); }
.device-detail dl div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 5px 0; }
.device-detail dt { color: var(--muted); }
.device-detail dd { margin: 0; overflow-wrap: anywhere; }
.choice-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; border: 1px solid var(--line); padding: 10px 11px; cursor: pointer; }
#profile-name { width: 100%; margin: 2px 0 12px; border: 1px solid var(--line); padding: 10px 11px; background: transparent; color: inherit; }
#claim-button { width: 100%; margin-top: 14px; border: 0; padding: 11px; background: #17191c; color: #fff; font-weight: 750; }
.security-note { margin-bottom: 0; font-size: 10px; }
.back-link { display: inline-block; margin-top: 17px; color: var(--muted); text-decoration: none; }

/* Mobile drawer */
.sidebar-toggle, .sidebar-backdrop { display: none; }
@media (max-width: 820px) {
  body { overflow: hidden; }
  .workspace { grid-template-columns: 1fr; }
  .chat-workspace { grid-template-columns:1fr !important; gap:0; }
  .chat-workspace .chat-panel:not(.is-active-column) { display:none; }
  .chat-column-actions { display:none; }
  .chat-panel { height:100dvh; }
  .sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; width: min(310px, 88vw); transform: translateX(-102%); transition: transform 180ms ease; box-shadow: 22px 0 60px rgba(0,0,0,.24); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-close { display: grid; color: var(--sidebar-muted); }
  .sidebar-toggle { position: fixed; z-index: 40; top: max(13px,env(safe-area-inset-top)); left: 13px; width: 40px; height: 40px; display: grid; align-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: rgba(255,255,255,.93); box-shadow: var(--shadow); cursor: pointer; }
  .sidebar-toggle span { display: block; height: 2px; border-radius: 2px; background: #1c1f22; }
  .sidebar-backdrop { position: fixed; z-index: 45; inset: 0; border: 0; background: rgba(0,0,0,.42); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
  body.sidebar-open .sidebar-backdrop { display: block; opacity: 1; pointer-events: auto; }
  .content-head { padding-left: 64px; }
  .status-pill { max-width: 140px; }
  .route-button { display: none; }
  .messages { padding-inline: 15px; }
  .composer { padding-inline: 14px; }
  .message { max-width: 92%; }
}
@media (max-width: 560px) {
  .content-head { min-height: 68px; padding-right: 12px; gap: 8px; }
  .chat-title-line h2 { font-size: 17px; }
  .status-pill { display: none; }
  .composer-toolbar { align-items: stretch; }
  .composer-context { min-width: 0; flex: 1; }
  .composer select { min-width: 0; width: min(52vw,220px); }
  .send-button { min-width: 48px; }
  .send-button span { display: none; }
  .form-grid.two-columns { grid-template-columns: 1fr; }
  .app-dialog form { padding: 18px; }
  .install-command-row { align-items: stretch; flex-direction: column; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #202226;
    --paper-soft: #17191c;
    --line: #35383d;
    --muted: #999fa5;
    --text: #f1f2ef;
    --accent-soft: #303338;
  }
  html, body { background: #17191c; }
  .content, .app-dialog { background: var(--paper); }
  .app-dialog { border: 1px solid #3b3e43; box-shadow: 0 24px 80px rgba(0,0,0,.55); }
  .primary-button.is-danger { background: #cf3c30; color: #ffffff; }
  .primary-button.is-danger:hover:not(:disabled) { background: #df4a3e; }
  .content-head { background: #202226; }
  .message.assistant .message-bubble, .thinking-copy, .thinking-worker-chip { background: #292c31; }
  .message.user .message-bubble { background: #eceeea; color: #17191c; }
  .composer { background:#1a1c1f; }
  .composer-shell { background:#202226; border-color:#3b3e43; }
  .composer textarea { color:var(--text); }
  select, option, optgroup { color-scheme: dark; }
  select option, select optgroup { background-color: #202226; color: #f1f2ef; }
  .composer select, .composer-approval-mode { background-color:#25282c; border-color:#3b3e43; color:var(--text); }
  .composer select:hover, .composer-approval-mode:hover { border-color:#555b60; background-color:#292d32; }
  .composer select:focus, .composer-approval-mode:focus { border-color:#858b8e; box-shadow:0 0 0 2px rgba(255,255,255,.06); }
  .app-dialog input, .app-dialog textarea, .app-dialog select { background:#292c31; border-color:#3b3e43; color:var(--text); }
  .app-dialog select:hover { border-color:#555b60; }
  .composer-disabled .composer-shell { background:#25282c; }
  .composer-icon-button:hover,.composer-attachment-remove { background:#303338; }
  .composer-mic-button.is-processing { background:#303338; color:#b7bcc1; }
  .composer-voice-button { background:#2b2e32; color:#e3e5e6; }
  .composer-voice-button:hover { background:#35383d; }
  .composer-voice-stop { background:#f2f3f0; color:#202225; }
  .composer-voice-wave > i { background:#b8bdc1; }
  .composer-attachment-chip,.message-audio-card,.message-file-card { background:#292c31; border-color:#3b3e43; }
  .folder-browser, .folder-browser-head, .settings-device-card, .install-panel, .global-skill-card, .global-skills-empty { border-color: #3b3e43; }
  .folder-browser-head, .install-command-row code { background: #282b30; }
  .folder-entry:hover, .dialog-close:hover, .quiet-button:hover, .icon-button:hover { background: #2b2e33; }
  .project-badge, .composer-runtime { color: #b6bbc0; }
  .scroll-bottom-button { background: rgba(34,36,40,.94); color: #f1f2ef; }
  .auth-screen, .device-shell { background: #111315; }
  .auth-card, .device-card { border-color: #f1f2ef; background: #202226; box-shadow: 8px 8px 0 #000; }
  .brand-word { text-shadow: 3px 3px 0 #000; }
  .markdown-styled-text { color: color-mix(in srgb, var(--inline-color) 82%, #ffffff 18%); }
  .markdown-body mark { background-color: color-mix(in srgb, var(--inline-bg, #854d0e) 60%, transparent); color: var(--inline-color, #fef08a); }
  * { scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); }
}

:root[data-theme="dark"] select,
:root[data-theme="dark"] option,
:root[data-theme="dark"] optgroup {
  color-scheme: dark;
}
:root[data-theme="dark"] select option,
:root[data-theme="dark"] select optgroup {
  background-color: #202226;
  color: #f1f2ef;
}
:root[data-theme="dark"] .composer select,
:root[data-theme="dark"] .composer-approval-mode {
  background-color: #25282c;
  border-color: #3b3e43;
  color: var(--text);
}
:root[data-theme="dark"] .app-dialog select {
  background-color: #292c31;
  border-color: #3b3e43;
  color: var(--text);
}

@keyframes thinking-pulse { 0%,80%,100%{opacity:.3;transform:translateY(0)} 40%{opacity:1;transform:translateY(-2px)} }
@keyframes status-pulse { 50%{opacity:.4} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;} }
/* 2026-09-01 Tofu-derived multi-chat workspace */
.chat-workspace {
  min-width: 0;
  min-height: 0;
  height: 100dvh;
  display: grid;
  grid-template-columns: repeat(var(--chat-column-count, 1), minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--line);
}
.chat-panel {
  min-width: 0;
  min-height: 0;
  height: 100dvh;
  background: var(--paper);
  overflow: hidden;
}
.chat-panel.is-active-column { box-shadow: inset 0 0 0 2px rgba(48, 55, 60, .12); }
.chat-column-actions { display: inline-flex; align-items: center; gap: 4px; }
.chat-column-add, .chat-column-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
}
.chat-column-add:hover:not(:disabled), .chat-column-close:hover { color: var(--text); border-color: #a9adae; }
.chat-column-add:disabled { opacity: .35; cursor: default; }
.chat-column-add svg, .chat-column-close svg { width: 16px; height: 16px; }
.chat-workspace:not(.has-multiple-columns) .chat-column-close { display: none; }
.chat-item.open-in-column:not(.active) { box-shadow: inset 2px 0 0 #8b949b; }
.chat-workspace[data-column-count="2"] .content-head,
.chat-workspace[data-column-count="3"] .content-head { padding-inline: 14px; }
.chat-workspace[data-column-count="2"] .status-pill,
.chat-workspace[data-column-count="3"] .status-pill { max-width: 150px; }
.chat-workspace[data-column-count="3"] .route-button,
.chat-workspace[data-column-count="3"] .status-pill { display: none; }
.chat-workspace[data-column-count="3"] .project-badge { max-width: 92px; }
.chat-workspace[data-column-count="3"] .messages { padding-inline: 13px; }
.chat-workspace[data-column-count="3"] .message { max-width: 95%; }
.chat-workspace[data-column-count="3"] .composer { padding-inline: 12px; }
.chat-workspace[data-column-count="3"] .composer-runtime { display: none; }
.chat-workspace[data-column-count="3"] .composer select { min-width: 0; max-width: 160px; width: 100%; }
@media (max-width: 1120px) and (min-width: 821px) {
  .workspace { grid-template-columns: 250px minmax(0,1fr); }
  .chat-workspace[data-column-count="3"] .content-head { gap: 6px; }
  .chat-workspace[data-column-count="3"] .chat-column-actions { gap: 2px; }
  .chat-workspace[data-column-count="3"] .chat-column-add,
  .chat-workspace[data-column-count="3"] .chat-column-close { width: 29px; height: 29px; }
}
@media (max-width: 820px) {
  .chat-workspace { grid-template-columns: 1fr !important; }
  .chat-workspace .chat-panel { display: none; }
  .chat-workspace .chat-panel.is-active-column { display: grid; }
  .chat-column-actions { display: none; }
}
@media (prefers-color-scheme: dark) {
  .chat-column-add, .chat-column-close { background: #202226; border-color: #3a3d42; }
  .chat-panel.is-active-column { box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }
}
/* TASK-016: Tofu-style desktop multi-chat workspace */
.chat-workspace {
  min-width: 0;
  min-height: 0;
  height: 100dvh;
  display: grid;
  grid-template-columns: repeat(var(--chat-column-count, 1), minmax(0, 1fr));
  background: var(--paper);
}
.chat-panel {
  min-width: 0;
  position: relative;
  border-right: 1px solid var(--line);
  transition: box-shadow 120ms ease, border-color 120ms ease;
}
.chat-panel:last-child { border-right: 0; }
.chat-panel.is-active-column { box-shadow: inset 0 2px 0 #202326; }
.chat-workspace.has-multiple-columns .chat-panel { transition: opacity 160ms ease, box-shadow 160ms ease; }
.chat-workspace.has-multiple-columns .chat-panel:not(.is-active-column) { opacity: 0.58; }
.chat-workspace.has-multiple-columns .chat-panel:not(.is-active-column):hover { opacity: 0.88; }
.chat-workspace.has-multiple-columns .chat-panel.is-active-column { opacity: 1; box-shadow: inset 0 2px 0 var(--text); }
.chat-column-actions { display: inline-flex; align-items: center; gap: 4px; }
.chat-column-add, .chat-column-close {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px; padding: 0;
  background: var(--paper); color: var(--muted); cursor: pointer;
}
.chat-column-add:hover, .chat-column-close:hover { background: var(--paper-soft); color: var(--text); }
.chat-column-add svg, .chat-column-close svg { width: 16px; height: 16px; }
.chat-workspace:not(.has-multiple-columns) .chat-column-close { display: none !important; }
.chat-workspace[data-column-count="3"] .content-head { padding-inline: 14px; }
.chat-workspace[data-column-count="3"] .content-actions { gap: 4px; }
.chat-workspace[data-column-count="3"] .status-pill { max-width: 120px; }
.chat-workspace[data-column-count="3"] .route-button { display: none; }
.chat-workspace[data-column-count="3"] .messages { padding-inline: 14px; }
.chat-workspace[data-column-count="3"] .message { max-width: 94%; }
.chat-workspace[data-column-count="3"] .composer { padding-inline: 12px; }
.chat-workspace[data-column-count="3"] .composer-runtime { display: none; }
.chat-workspace[data-column-count="3"] .chat-heading small { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item { grid-template-columns: 18px minmax(0,1fr) 16px 8px; }
.chat-item-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.chat-sidebar-status { width:16px; height:16px; display:grid; place-items:center; color:transparent; }
.chat-sidebar-status svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.chat-unread-dot { width:7px; height:7px; display:block; border-radius:999px; background:transparent; }
.chat-item.is-thinking .chat-sidebar-status { color:#c8d0d6; animation:sidebar-thinking-spin .8s linear infinite; }
.chat-item.is-thinking .chat-icon svg { visibility:hidden; }
.chat-item.has-queued-message:not(.is-thinking) .chat-sidebar-status { width:8px; height:8px; margin:0 4px; border-radius:999px; background:#d7dde1; color:transparent; box-shadow:0 0 0 3px rgba(215,221,225,.12); }
.chat-item.has-unread:not(.is-thinking) .chat-unread-dot { background:#f0f3f5; box-shadow:0 0 0 3px rgba(240,243,245,.12); }
@keyframes sidebar-thinking-spin { to { transform: rotate(360deg); } }
@media (max-width: 1100px) {
  .chat-workspace[data-column-count="3"] .chat-heading small,
  .chat-workspace[data-column-count="3"] .status-pill { display: none; }
  .chat-workspace[data-column-count="3"] .chat-title-line h2 { font-size: 16px; }
}
@media (max-width: 820px) {
  .chat-workspace { grid-template-columns: 1fr !important; }
  .chat-workspace > .chat-panel:not(:first-child) { display: none !important; }
  .chat-column-actions { display: none !important; }
  .chat-panel { border-right: 0; }
}

/* TASK-018: per-chat optimistic message queue */
.queued-message .message-bubble { opacity:.78; border:1px dashed rgba(130,136,140,.85); }
.queued-message.is-sending .message-bubble { opacity:1; border-style:solid; }
.queued-message-meta { color:var(--muted); }
.queued-message.is-failed .message-bubble { opacity:.92; border-color:rgba(180,60,50,.7); }
.queued-message.is-failed .queued-message-meta { color:var(--danger); }
.run-failure-message .message-meta { color:var(--danger); }
.run-failure-message .message-bubble { border:1px solid rgba(180,60,50,.42); }

/* TASK-019: LINE Ongoing sidebar identity */
.line-ongoing-row { min-height:52px; }
.line-ongoing-icon { color:#06c755; }
.line-ongoing-icon svg { width:26px; height:26px; overflow:visible; }
.line-ongoing-icon svg > circle { fill:#06c755; }
.line-ongoing-icon .line-chat-mark { fill:#fff; }
.line-ongoing-icon .line-word-mark { fill:#06c755; }
.line-ongoing-copy { align-content:center; }
.line-ongoing-copy strong { font-size:14px; letter-spacing:.01em; }

/* TASK-020: persistent CLI activity + remote approval */
.live-run-activity,
.run-activity-history {
  width:min(100%,760px);
  margin:8px 0 12px 0;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper-soft);
  overflow:hidden;
}
.live-run-activity { padding:10px 12px; }
.live-run-activity-head { font-size:12px; font-weight:700; color:var(--muted); margin-bottom:7px; }
.run-activity-list { display:grid; gap:6px; }
.run-activity-row { display:grid; grid-template-columns:20px minmax(0,1fr); gap:7px; align-items:start; font-size:12px; }
.run-activity-icon { width:20px; text-align:center; color:var(--muted); font-weight:700; line-height:1.45; }
.run-activity-row.is-success .run-activity-icon { color:#2c7a4b; }
.run-activity-row.is-failed .run-activity-icon,
.run-activity-row.is-warning .run-activity-icon { color:var(--danger); }
.run-activity-copy { min-width:0; }
.run-activity-copy strong { display:block; font-size:12px; line-height:1.35; }
.run-activity-copy pre,
.approval-preview { margin:3px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; font:11px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--muted); max-height:150px; overflow:auto; }
.run-activity-empty { font-size:12px; color:var(--muted); }
.run-activity-history { margin-top:7px; background:transparent; }
.run-activity-history > summary { padding:7px 10px; cursor:pointer; font-size:11px; color:var(--muted); user-select:none; }
.run-activity-history-body { padding:0 10px 10px; }
.approval-card { margin-top:9px; padding:11px; border:1px solid #c89d3f; border-radius:10px; background:rgba(200,157,63,.08); }
.approval-card.is-failed { border-color:rgba(180,60,50,.6); background:rgba(180,60,50,.06); }
.approval-card-head { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.approval-card-head strong { font-size:13px; }
.approval-card-head span { padding:2px 6px; border:1px solid currentColor; border-radius:999px; font-size:10px; color:var(--muted); }
.approval-card-title { margin-top:7px; font-size:12px; font-weight:600; }
.approval-card small { display:block; margin-top:6px; color:var(--muted); font-size:11px; }
.approval-actions { display:flex; gap:7px; margin-top:10px; }
.approval-actions button { border:1px solid var(--line); border-radius:8px; padding:7px 10px; font:inherit; cursor:pointer; }
.approval-approve { background:var(--text); color:var(--paper); }
.approval-deny { background:transparent; color:var(--text); }
.approval-actions button:disabled { opacity:.45; cursor:default; }
@media (prefers-color-scheme: dark) {
  .live-run-activity,.run-activity-history { background:#202328; border-color:#3b3e43; }
  .approval-card { background:rgba(210,167,74,.08); }
}

/* Supervisor Work activity: Anti-style collapsed realtime technical timeline. */
.supervisor-work-activity {
  width:min(100%,760px);
  margin:4px 0 10px;
  align-self:flex-start;
  background:transparent;
  color:var(--text);
}
.supervisor-work-activity-head {
  display:flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  padding:5px 0;
  list-style:none;
  cursor:pointer;
  user-select:none;
  color:var(--muted);
  font-size:12px;
  font-weight:650;
  line-height:1.35;
}
.supervisor-work-activity.is-live .supervisor-worked-label {
  display:inline-block;
  color:transparent;
  background:linear-gradient(100deg,var(--muted) 0%,var(--muted) 34%,var(--text) 49%,var(--muted) 64%,var(--muted) 100%);
  background-size:230% 100%;
  background-position:180% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:supervisor-working-shimmer 2.35s linear infinite;
}
@keyframes supervisor-working-shimmer {
  to { background-position:-70% 0; }
}
@media (prefers-reduced-motion:reduce) {
  .supervisor-work-activity.is-live .supervisor-worked-label { animation:none; background:none; color:var(--muted); -webkit-text-fill-color:currentColor; }
}
.supervisor-work-activity-head::-webkit-details-marker { display:none; }
.supervisor-work-activity-head::after { content:'>'; margin-left:1px; font-size:13px; transition:transform .14s ease; }
.supervisor-work-activity[open] > .supervisor-work-activity-head::after { transform:rotate(90deg); }
.supervisor-worked-count { font-size:10px; font-weight:600; opacity:.72; white-space:nowrap; }
.supervisor-work-activity-body {
  margin:2px 0 4px 5px;
  padding:5px 0 6px 11px;
  border-left:1px solid var(--line);
  min-width:0;
}
.supervisor-work-workers { display:flex; flex-wrap:wrap; gap:5px; margin:0 0 8px; }
.supervisor-worker-state { padding:3px 7px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:10px; line-height:1.25; }
.supervisor-worker-state.is-running,.supervisor-worker-state.is-starting { color:var(--text); }
.supervisor-worker-state.is-failed { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 42%,var(--line)); }
.supervisor-work-activity-list { gap:7px; }
.run-activity-worker { display:block; margin-top:1px; color:var(--muted); font-size:10px; line-height:1.3; }
.supervisor-work-activity .run-activity-copy pre { max-height:none; overflow:visible; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.thinking-worker-chip { appearance:none; font-family:inherit; cursor:pointer; }
.thinking-worker-chip:hover { border-color:#aeb2b1; color:var(--text); }
@media (max-width:560px) {
  .supervisor-work-activity { width:100%; max-width:100%; margin-block:2px 8px; }
  .supervisor-work-activity-head { max-width:100%; padding:4px 2px; font-size:11px; }
  .supervisor-work-activity-body { margin-left:4px; padding-left:9px; }
  .supervisor-worked-count { font-size:9px; }
  .composer textarea::placeholder { font-size:13px; }
}

/* TASK-021: prominent remote approval + PC image attachments */
.live-approval-stack { width:min(100%,760px); align-self:flex-start; display:grid; gap:10px; margin:2px 0 12px; }
.live-approval-stack .approval-card { margin:0; padding:15px; border-width:2px; border-radius:14px; background:#fff8e8; box-shadow:0 4px 18px rgba(94,70,18,.09); }
.live-approval-stack .approval-card-head strong { font-size:15px; }
.live-approval-stack .approval-card-title { margin-top:9px; font-size:14px; line-height:1.45; }
.live-approval-stack .approval-preview { margin-top:8px; padding:9px 10px; border-radius:9px; background:rgba(255,255,255,.72); font-size:12px; max-height:190px; }
.live-approval-stack .approval-card small { font-size:12px; line-height:1.5; }
.live-approval-stack .approval-actions { margin-top:13px; gap:9px; }
.live-approval-stack .approval-actions button { min-height:44px; padding:10px 16px; border-radius:10px; font-weight:750; font-size:14px; }
.approval-wait-banner { display:flex; align-items:flex-start; gap:10px; border:2px solid #c89d3f; border-radius:12px; padding:10px 12px; background:#fff8e8; color:#473710; }
.approval-wait-banner[hidden] { display:none !important; }
.approval-wait-icon { flex:0 0 28px; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#c89d3f; color:white; font-weight:900; }
.approval-wait-copy { min-width:0; display:grid; gap:2px; }
.approval-wait-copy strong { font-size:13px; line-height:1.35; }
.approval-wait-copy span { font-size:11px; line-height:1.45; color:#6b5620; }
.composer-awaiting-approval { border-top-color:#d5b15f; background:#fffdf6; }
.message-attachments { display:grid; gap:8px; max-width:min(760px,100%); }
.message-image-link { display:block; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--paper-soft); }
.message-image { display:block; width:100%; max-width:760px; max-height:70dvh; object-fit:contain; background:#111; }
.message-audio-card { min-width:min(360px,100%); display:grid; gap:5px; border:1px solid var(--line); border-radius:14px; padding:9px 10px; background:var(--paper-soft); }
.message-audio-card audio { width:100%; max-width:420px; }
.message-audio-card span { color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.message-file-card { display:flex; align-items:center; gap:9px; min-width:min(260px,100%); border:1px solid var(--line); border-radius:14px; padding:10px 12px; background:var(--paper-soft); color:inherit; text-decoration:none; }
.message-file-card>span:first-child { font-size:20px; }
.message-file-copy { min-width:0; display:grid; gap:2px; }
.message-file-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.message-file-copy small { color:var(--muted); font-size:9px; }
@media (max-width:560px) {
  .live-approval-stack { width:100%; }
  .live-approval-stack .approval-card { padding:14px; }
  .live-approval-stack .approval-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.75fr); }
  .live-approval-stack .approval-actions button { width:100%; min-height:48px; }
  .approval-wait-banner { padding:10px; }
  .message-attachments,.message-image { width:100%; max-width:100%; }
}
@media (prefers-color-scheme: dark) {
  .live-approval-stack .approval-card,.approval-wait-banner { background:#312a19; color:#f4e4b4; border-color:#b7903b; }
  .live-approval-stack .approval-preview { background:#24221c; }
  .approval-wait-copy span { color:#d3bd7f; }
  .composer-awaiting-approval { background:#211f19; }
}

/* WEB chat media: attachment menu + optimistic timeline previews */
.composer-attach-wrap { position:relative; display:flex; align-items:center; }
.composer-attach-menu { position:absolute; left:0; bottom:calc(100% + 10px); z-index:30; width:190px; padding:6px; border:1px solid var(--line); border-radius:14px; background:var(--paper); box-shadow:0 14px 42px rgba(0,0,0,.18); }
.composer-attach-menu[hidden] { display:none !important; }
.composer-attach-menu button { width:100%; display:flex; align-items:center; gap:10px; min-height:42px; padding:8px 10px; border:0; border-radius:10px; background:transparent; color:inherit; cursor:pointer; text-align:left; }
.composer-attach-menu button:hover { background:var(--paper-soft); }
.composer-attach-menu button>span { width:24px; text-align:center; font-size:17px; }
.composer-attach-menu button>strong { font-size:12px; font-weight:650; }
.queued-message-attachments { justify-items:end; align-self:flex-end; max-width:min(560px,82%); }
.queued-image-frame { width:min(440px,72vw); border-radius:16px; }
.queued-image-frame .message-image { max-height:52dvh; }
.queued-file-card { cursor:default; }
.queued-audio-card { width:min(360px,78vw); }
.message.user .message-attachments { justify-items:end; align-self:flex-end; }
.message.user .message-image-link { max-width:min(560px,82vw); }
.message.user .message-file-card,.message.user .message-audio-card { margin-left:auto; }
@media (prefers-color-scheme: dark) { .composer-attach-menu { background:#25282c; border-color:#3b3e43; } .composer-attach-menu button:hover { background:#303338; } }

/* Live PC presence in sidebar */
.sidebar-device-section-head { padding-top:16px; }
.sidebar-device-list { display:grid; gap:3px; }
.sidebar-device-row { min-height:42px; display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:8px; padding:7px 9px; border-radius:9px; background:transparent; }
.sidebar-device-row:hover { background:var(--sidebar-hover); }
.sidebar-device-dot { width:8px; height:8px; border-radius:50%; background:#767b80; box-shadow:0 0 0 3px rgba(118,123,128,.13); }
.sidebar-device-row.is-online .sidebar-device-dot { background:#56c98b; box-shadow:0 0 0 3px rgba(86,201,139,.16); }
.sidebar-device-copy { min-width:0; display:grid; gap:1px; }
.sidebar-device-name-line { min-width:0; display:flex; align-items:center; gap:6px; }
.sidebar-device-copy strong,.sidebar-device-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-device-copy strong { min-width:0; font-size:12px; font-weight:720; color:var(--sidebar-text); }
.sidebar-device-copy small { font-size:9px; color:var(--sidebar-muted); }
.sidebar-device-policy { flex:0 0 auto; max-width:88px; border:1px solid rgba(255,255,255,.1); border-radius:999px; padding:2px 5px; font-size:7px !important; font-weight:800; letter-spacing:.03em; color:#aeb6bd !important; }
.sidebar-device-policy.policy-always_admin { color:#ffd08b !important; border-color:rgba(255,208,139,.2); }
.sidebar-device-status { font-size:9px; font-weight:750; color:var(--sidebar-muted); }
.sidebar-device-row.is-online .sidebar-device-status { color:#77d7a5; }
.sidebar-device-empty { padding:7px 9px; color:var(--sidebar-muted); font-size:10px; }
/* Project Chat interruptible queue */
.composer-queue { display:grid; gap:6px; max-height:190px; overflow:auto; padding:2px 2px 0; }
.composer-queue[hidden] { display:none !important; }
.composer-queue-card { display:flex; align-items:center; gap:10px; min-height:48px; padding:8px 9px 8px 12px; border:1px solid var(--line); border-radius:14px; background:var(--paper-soft); }
.composer-queue-card.is-failed { border-color:rgba(180,60,50,.55); }
.composer-queue-copy { min-width:0; display:grid; gap:2px; flex:1; }
.composer-queue-copy small { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.04em; }
.composer-queue-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:650; }
.composer-queue-actions { display:flex; align-items:center; gap:5px; }
.queue-send-now,.queue-remove { border:0; cursor:pointer; }
.queue-send-now { min-height:30px; border-radius:999px; padding:0 10px; background:#17191c; color:#fff; font-size:10px; font-weight:700; }
.queue-send-now:disabled { opacity:.35; cursor:not-allowed; }
.queue-remove { width:28px; height:28px; border-radius:50%; background:transparent; color:var(--muted); font-size:17px; }
.queue-remove:hover { background:rgba(127,127,127,.12); }
.send-button.is-stop svg { width:18px; height:18px; }
@media (prefers-color-scheme: dark) { .composer-queue-card { background:#292c31; border-color:#3b3e43; } .queue-send-now { background:#f0f1ee; color:#17191c; } }

/* Nomsod Remote device action */
.sidebar-device-row { grid-template-columns:10px minmax(0,1fr) auto 28px; }
.sidebar-device-control { width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:var(--sidebar-muted); cursor:pointer; padding:5px; }
.sidebar-device-control svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sidebar-device-row.is-online .sidebar-device-control:not(:disabled) { color:#dce2e7; }
.sidebar-device-control:not(:disabled):hover { background:var(--sidebar-hover); color:#fff; }
.sidebar-device-control:disabled { opacity:.28; cursor:not-allowed; }

/* Project-chat approval mode + compact CLI activity */
.composer-approval-mode {
  max-width:136px; min-height:34px; height:34px; padding:0 28px 0 12px; border:1px solid var(--line); border-radius:999px;
  background-color:var(--paper-soft); color:var(--text); font:600 11px/1.2 inherit;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c9298' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:11px 11px;
  cursor:pointer;
}
.composer-approval-mode:focus { outline:none; border-color:#858b8e; }
.composer-approval-mode[hidden] { display:none !important; }

/* Custom Popover Select Component (dark-theme, rounded 12px, accessible) */
.custom-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
.custom-select-wrap[hidden] {
  display: none !important;
}
.custom-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.custom-select-trigger {
  min-width: 130px;
  max-width: 260px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  background-color: var(--paper-soft);
  color: var(--text);
  font: 600 11px/1.2 inherit;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
:root[data-theme="dark"] .custom-select-trigger {
  background-color: #25282c;
  border-color: #3b3e43;
}
.custom-select-trigger:hover:not(:disabled) {
  border-color: #555b60;
  background-color: #292d32;
}
.custom-select-trigger:focus-visible {
  outline: none;
  border-color: #858b8e;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.custom-select-trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.custom-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}
.custom-select-arrow {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  color: #8c9298;
  transition: transform .18s ease;
}
.custom-select-arrow svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.custom-select-trigger.is-open .custom-select-arrow {
  transform: rotate(180deg);
}
.custom-select-menu {
  border-radius: 12px;
  background-color: #202226;
  border: 1px solid #3b3e43;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.custom-select-menu[hidden] {
  display: none !important;
}
.custom-select-item {
  border: 0;
  border-radius: 8px;
  padding: 7px 11px;
  background: transparent;
  color: #f1f2ef;
  font: 550 12px/1.3 inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  transition: background-color .1s ease, color .1s ease;
}
.custom-select-item:hover,
.custom-select-item:focus {
  background-color: #2f3338;
  color: #ffffff;
  outline: none;
}
.custom-select-item.is-selected {
  background-color: rgba(255, 255, 255, 0.08);
  font-weight: 650;
  color: #ffffff;
}
.custom-select-item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.custom-select-item-check {
  flex: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: #56c98b;
  line-height: 1;
  text-align: right;
}
.composer-approval-wrap .custom-select-trigger {
  min-width: 124px;
  max-width: 140px;
}
.live-run-activity { padding:0; overflow:hidden; }
.live-run-activity > summary.live-run-activity-head { margin:0; padding:9px 12px; cursor:pointer; user-select:none; list-style:none; }
.live-run-activity > summary.live-run-activity-head::-webkit-details-marker { display:none; }
.live-run-activity > summary.live-run-activity-head::after { content:'›'; float:right; transform:rotate(90deg); transition:transform .15s ease; }
.live-run-activity[open] > summary.live-run-activity-head::after { transform:rotate(-90deg); }
.live-run-activity-body { padding:0 12px 10px; }
.live-run-activity .run-activity-copy pre { max-height:none; overflow:visible; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }

/* 2026-09-03 mobile viewport fit */
@media (max-width: 560px) {
  html, body, .shell, .workspace, .chat-workspace, .chat-panel, .content,
  .messages, .composer, .composer-shell, .composer-toolbar {
    min-width: 0;
    max-width: 100%;
  }
  html, body, .shell, .workspace { width: 100%; overflow-x: hidden; }
  .content { width: 100%; overflow: hidden; }
  .content-head { width: 100%; min-width: 0; }
  .chat-heading { min-width: 0; max-width: 100%; }
  .chat-title-line { min-width: 0; max-width: 100%; }
  .chat-title-line h2 { max-width: 100%; }

  .messages { width: 100%; overflow-x: hidden; padding-inline: 12px; }
  .empty-state {
    width: min(100%, 430px);
    max-width: 100%;
    padding-inline: 8px;
    overflow: hidden;
  }
  .empty-state-brand {
    max-width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  .empty-state-brand strong {
    min-width: 0;
    max-width: 100%;
    font-size: clamp(26px, 9vw, 32px);
    overflow-wrap: anywhere;
  }

  .composer {
    width: 100%;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom));
    overflow-x: hidden;
  }
  .composer-shell {
    width: 100%;
    padding: 8px 9px 9px;
  }
  .composer textarea {
    min-width: 0;
    max-width: 100%;
    padding-inline: 7px;
  }
  .composer-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
  }
  .composer-context {
    min-width: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 6px 7px;
  }
  .composer-attach-wrap {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .composer [data-role="composer-model"],
  .composer .composer-model-wrap {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .composer .composer-model-wrap .custom-select-trigger {
    width: 100%;
    max-width: 100%;
  }
  .composer-runtime {
    display: none !important;
  }
  .composer-approval-mode:not([hidden]),
  .composer-approval-wrap:not([hidden]) {
    display: block;
    grid-column: 2;
    grid-row: 2;
    width: min(100%, 132px);
    max-width: 100%;
    min-width: 0;
    justify-self: start;
  }
  .composer-actions {
    min-width: 0;
    flex: 0 0 auto;
    align-self: end;
    gap: 5px;
  }
  .composer-icon-button, .send-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .send-button { min-width: 36px; }
  .composer-attach-menu {
    max-width: calc(100vw - 28px);
  }
  .composer-attachments,
  .composer-queue,
  .approval-wait-banner,
  .live-approval-stack,
  .live-run-activity,
  .run-activity-history {
    min-width: 0;
    max-width: 100%;
  }
  .composer-queue-card {
    min-width: 0;
    max-width: 100%;
  }
}

/* PWA install invitation: 2026-09-03 */
.pwa-install-invite{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:1200;width:min(440px,calc(100vw - 28px));display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px 14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--paper) 96%,transparent);box-shadow:0 18px 60px rgba(0,0,0,.2);backdrop-filter:blur(18px);transform:translate(-50%,20px);opacity:0;transition:opacity .18s ease,transform .18s ease}.pwa-install-invite.is-visible{opacity:1;transform:translate(-50%,0)}.pwa-install-icon{width:56px;height:56px;border-radius:14px;object-fit:cover;grid-row:1/span 2}.pwa-install-copy{min-width:0;display:grid;gap:3px}.pwa-install-copy strong{font-size:15px;line-height:1.2}.pwa-install-copy span{color:var(--muted);font-size:11px;line-height:1.45}.pwa-install-actions{grid-column:2;display:flex;justify-content:flex-end;gap:8px}.pwa-install-actions button{min-height:36px;padding:0 13px;border-radius:999px;font:700 11px/1 inherit;cursor:pointer}.pwa-install-later{border:1px solid var(--line);background:transparent;color:var(--text)}.pwa-install-button{border:1px solid var(--text);background:var(--text);color:var(--paper)}.pwa-install-button:disabled{opacity:.55;cursor:default}@media(max-width:560px){.pwa-install-invite{bottom:max(12px,env(safe-area-inset-bottom));width:calc(100vw - 20px);grid-template-columns:48px minmax(0,1fr);padding:12px;border-radius:18px}.pwa-install-icon{width:48px;height:48px;border-radius:12px}.pwa-install-actions{grid-column:1/-1}.pwa-install-actions button{flex:1;min-height:42px}}@media(prefers-color-scheme:dark){.pwa-install-invite{background:rgba(32,35,39,.94);border-color:#3b3e43}}


/* Sidebar hierarchy + compact controls */
.project-row { display:block; border:1px solid rgba(255,255,255,.055); background:rgba(255,255,255,.025); }
.project-row:hover { background:var(--sidebar-hover); border-color:rgba(255,255,255,.09); }
.project-row.active-project { background:#292d31; border-color:rgba(255,255,255,.11); }
.project-main { width:100%; grid-template-columns:18px 20px minmax(0,1fr) auto; padding-right:10px; }
.project-title-wrap { min-width:0; display:flex; align-items:center; gap:6px; overflow:hidden; }
.project-name { flex:0 1 auto; min-width:0; }
.project-computer-badge { flex:0 1 auto; max-width:82px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:999px; padding:2px 6px; background:rgba(255,255,255,.055); color:#8e959a; font-size:9px; font-weight:650; }
.project-count { min-width:16px; text-align:right; }
.project-actions { position:absolute; top:50%; right:4px; transform:translateY(-50%); padding:2px; border-radius:8px; background:#262a2e; box-shadow:-10px 0 14px rgba(31,34,38,.72); opacity:0; pointer-events:none; }
.project-row:hover .project-actions,.project-row:focus-within .project-actions { opacity:1; pointer-events:auto; }
.project-row.active-project .project-actions { opacity:0; pointer-events:none; }
.project-row.active-project:hover .project-actions,.project-row.active-project:focus-within .project-actions { opacity:1; pointer-events:auto; }
.project-chats { padding-left:31px; }
.chat-item-shell { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 28px; align-items:center; border-radius:8px; background:transparent; transition:background .12s ease; }
.chat-item-shell:hover { background:var(--sidebar-hover); }
.chat-item-shell.active, .chat-item-shell:has(.chat-item.active) { background:#30353a; color:#fff; }
.chat-item-shell.open-in-column:not(.active):not(:has(.chat-item.active)), .chat-item-shell:has(.chat-item.open-in-column:not(.active)) { background:#202428; box-shadow:inset 2px 0 0 #8b949b; }
.chat-item-shell .chat-item { width:100%; min-height:36px; min-width:0; grid-template-columns:minmax(0,1fr) 16px 8px !important; gap:5px; padding:6px 4px 6px 10px; background:transparent !important; color:#d7dbde; text-align:left; box-shadow:none !important; border:0; border-radius:8px 0 0 8px; cursor:pointer; }
.chat-item-shell:hover .chat-item, .chat-item-shell.active .chat-item, .chat-item-shell:has(.chat-item.active) .chat-item { color:#fff; }
.chat-item-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; line-height:1.4; }
.chat-more-button { width:24px; height:24px; flex-shrink:0; margin-right:3px; display:grid; place-items:center; border:0; border-radius:6px; background:transparent; color:var(--sidebar-muted); opacity:0; cursor:pointer; transition:opacity .12s ease,background .12s ease,color .12s ease; }
.chat-more-button svg { width:15px; height:15px; fill:currentColor; }
.chat-item-shell:hover .chat-more-button, .chat-item-shell:focus-within .chat-more-button, .chat-more-button:focus-visible, .chat-item-shell.active .chat-more-button, .chat-item-shell:has(.chat-item.active) .chat-more-button, .chat-item-shell:has(.chat-item-menu:not([hidden])) .chat-more-button { opacity:1; }
.chat-more-button:hover, .chat-item-shell:has(.chat-item-menu:not([hidden])) .chat-more-button { background:rgba(255,255,255,.12); color:#fff; }
.chat-item-shell:has(.chat-item-menu:not([hidden])) { background:var(--sidebar-hover); }
.chat-item-menu { position:absolute; z-index:30; top:33px; right:2px; min-width:128px; padding:5px; border:1px solid #41464b; border-radius:10px; background:#24282c; box-shadow:0 12px 28px rgba(0,0,0,.28); }
.chat-item-menu[hidden] { display:none !important; }
.chat-menu-action { width:100%; border:0; border-radius:7px; padding:8px 10px; background:transparent; color:#e2e5e7; text-align:left; font:inherit; font-size:11px; cursor:pointer; }
.chat-menu-action:hover { background:#34393e; }
.chat-menu-action.is-danger { color:#f0a49e; }
.chat-item.is-thinking .chat-sidebar-status { color:#c8d0d6; }
.sidebar-footer { padding:7px 9px; }
.sidebar-user { grid-template-columns:32px minmax(0,1fr) auto; gap:8px; padding:5px 4px; }
.sidebar-footer-actions { display:flex; align-items:center; gap:2px; }
.sidebar-action { width:32px; height:32px; flex:0 0 32px; padding:0; border-radius:8px; }
.sidebar-action span { display:none; }
.sidebar-action svg { width:16px; height:16px; }
.content-actions > [data-role="line-route"],
.content-actions > [data-role="edit-chat"],
.content-actions > [data-role="edit-project"],
.content-actions > [data-role="status-pill"] { display:none !important; }
.chat-workspace:not(.has-multiple-columns) .chat-column-close { display:none !important; }
.chat-workspace.has-multiple-columns .chat-column-close { display:grid !important; }
.content-actions { gap:0; }
.empty-state-action { margin-top:4px; border:1px solid var(--line); border-radius:9px; padding:8px 13px; background:var(--text); color:var(--paper); font:inherit; font-size:11px; font-weight:750; cursor:pointer; }
.empty-state-action:hover { opacity:.88; }
.project-chat-empty { gap:10px; }
@media (hover:none) {
  .chat-more-button { opacity:.78; }
  .project-row:focus-within .project-actions { opacity:1; pointer-events:auto; }
}


/* 2026-09-04 mobile chat head + compact project controls */
@media (max-width: 820px) {
  .content-head {
    position: sticky;
    top: 0;
    z-index: 24;
    flex: 0 0 auto;
    background: var(--paper);
    padding-top: max(10px, env(safe-area-inset-top));
  }
}
@media (max-width: 560px) {
  .composer-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
  }
  .composer-context {
    min-width: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 36px minmax(72px, 1fr) minmax(88px, 112px);
    align-items: center;
    gap: 6px;
  }
  .composer-attach-wrap {
    grid-column: 1;
    grid-row: 1;
    width: 36px;
    min-width: 36px;
  }
  .composer [data-role="composer-model"],
  .composer .composer-model-wrap {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .composer .composer-model-wrap .custom-select-trigger {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .composer-approval-mode:not([hidden]),
  .composer-approval-wrap:not([hidden]) {
    display: block;
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-width: 112px;
  }
  .composer-approval-wrap .custom-select-trigger {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .composer-actions {
    min-width: max-content;
    flex: 0 0 auto;
    align-self: center;
    position: relative;
    z-index: 2;
  }
}
@media (max-width: 390px) {
  .composer-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }
  .composer-context {
    grid-template-columns: 36px minmax(68px, 1fr) minmax(82px, 100px);
    gap: 5px;
  }
  .composer-actions { gap: 4px; }
}
@media (hover: none), (pointer: coarse) {
  .project-actions,
  .project-row.active-project .project-actions {
    opacity: 1;
    pointer-events: auto;
  }
}

.message-file-icon svg, .message-local-download-icon svg, .queue-remove svg, .composer-attachment-remove svg { width:16px; height:16px; display:block; fill:currentColor; }
.message-file-icon { width:20px; height:20px; display:grid; place-items:center; flex:0 0 20px; }


/* 2026-09-04 mobile root scroll lock */
:root { --nomsod-app-height: 100dvh; }
html, body {
  width:100%;
  height:100%;
  min-height:0;
  max-height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
body {
  position:fixed;
  inset:0;
  width:100%;
  height:var(--nomsod-app-height,100dvh);
  min-height:0;
  max-height:none;
}
.shell, .workspace, .chat-workspace, .chat-panel, .content {
  min-height:0;
  max-height:100%;
  overflow:hidden;
}
.shell, .workspace, .chat-workspace, .chat-panel, .content { height:100%; }
.messages {
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
@media (max-width:820px) {
  .workspace, .chat-workspace, .chat-panel, .content {
    height:var(--nomsod-app-height,100dvh);
    max-height:var(--nomsod-app-height,100dvh);
  }
  .sidebar, .sidebar-backdrop { max-height:var(--nomsod-app-height,100dvh); }
  .content-head, .composer { flex:0 0 auto; }
}

.auth-error{margin:0 0 12px;color:var(--danger,#ff6b6b);font-size:14px;line-height:1.45}

/* Channel access approval gate */
.access-pending-card{text-align:center;max-width:460px}.access-pending-icon{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:30px;line-height:1;background:color-mix(in srgb,currentColor 8%,transparent)}.access-pending-user{font-weight:600;margin:14px 0}.access-pending-card .secondary-button{margin-top:8px}

/* Chat / LINE / Work sidebar hierarchy */
.work-device-group { display:grid; gap:2px; }
.work-device-group > .sidebar-device-row { display:flex; align-items:center; gap:6px; min-height:38px; padding:6px 8px; }
.sidebar-device-row .sidebar-device-dot { display:none; flex:0 0 8px; flex-shrink:0; }
.sidebar-device-row .sidebar-device-remote { flex:0 0 24px; width:24px; height:24px; flex-shrink:0; display:grid; place-items:center; border:0; border-radius:6px; background:transparent; padding:2px; position:relative; }
.sidebar-device-row .sidebar-device-remote svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; transition:color .2s,filter .2s; }
.sidebar-device-row.is-online .sidebar-device-remote { color:#56c98b; }
.sidebar-device-row.is-online .sidebar-device-remote svg { filter:drop-shadow(0 0 4px rgba(86,201,139,.55)); }
.sidebar-device-row.is-online .sidebar-device-remote svg rect.screen { fill:#56c98b; fill-opacity:0.75; stroke:#56c98b; }
.sidebar-device-row.is-online .sidebar-device-remote::after { content:""; position:absolute; inset:-1px; border-radius:50%; background:radial-gradient(circle, rgba(86,201,139,.65) 0%, rgba(86,201,139,.2) 45%, transparent 75%); opacity:0.35; pointer-events:none; transform:scale(.9); will-change:transform,opacity; animation:computer-screen-pulse 2.6s ease-in-out infinite; }
.sidebar-device-row.is-offline .sidebar-device-remote { color:#72787f; opacity:.75; }
.sidebar-device-row.is-offline .sidebar-device-remote svg rect.screen { fill:#222528; fill-opacity:1; stroke:#72787f; }
.sidebar-device-row .sidebar-device-copy { flex:1 1 auto; min-width:0; display:flex; align-items:center; }
.sidebar-device-row .sidebar-device-copy strong { font-size:13px; font-weight:720; color:var(--sidebar-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-device-row.is-offline .sidebar-device-copy strong { color:#828890; }
.sidebar-device-row .sidebar-device-status { flex:0 0 auto; flex-shrink:0; font-size:10px; font-weight:750; color:var(--sidebar-muted); line-height:1; }
.sidebar-device-row.is-online .sidebar-device-status { color:#56c98b; }
.sidebar-device-row.is-offline .sidebar-device-status { color:#828890; }
.sidebar-device-row.is-offline .sidebar-device-add { opacity:.3; }
.sidebar-device-row .sidebar-device-add,
.work-device-group > .sidebar-device-row > .sidebar-device-control:last-child { margin-left:auto; flex:0 0 28px; width:28px; height:28px; flex-shrink:0; }
@keyframes computer-screen-pulse { 0%,100%{opacity:.3;transform:scale(.92)} 50%{opacity:.9;transform:scale(1.2)} }
@media (prefers-reduced-motion: reduce) { .sidebar-device-row.is-online .sidebar-device-remote::after { animation:none; opacity:.4; transform:none; } }
.work-device-projects { display:grid; gap:2px; padding-left:12px; }
.work-device-projects .project-row { min-height:34px; }
.work-device-projects .project-chats { padding-left:10px; }
.work-device-empty { padding-left:12px; }
#web-chats { margin-bottom:4px; }
#line-chat { margin-bottom:4px; }

@media (max-width: 520px) {
  .composer-voice { grid-template-columns:34px minmax(0,1fr) 34px 34px; gap:7px; padding-inline:1px; }
  .composer.is-voice-processing .composer-voice { grid-template-columns:34px minmax(0,1fr); }
  .composer.is-voice-processing .composer-voice-track { gap:8px; }
  .composer-voice-button { width:34px; height:34px; }
  .composer-voice-wave { gap:1.5px; }
  .composer-voice-wave > i { width:2.5px; }
  .composer-voice-time { min-width:34px; font-size:10px; }
}