:root {
  color-scheme: light;
  --bg: #eef1f5;
  --panel: #ffffff;
  --panel-soft: #f7f8fa;
  --line: #d9dee7;
  --line-strong: #c5ccd8;
  --text: #172033;
  --muted: #687386;
  --faint: #8f98a8;
  --primary: #3159d8;
  --primary-dark: #2445ad;
  --primary-soft: #edf2ff;
  --success: #16865c;
  --warning: #a76712;
  --danger: #c33d4b;
  --shadow: 0 12px 36px rgba(29, 41, 68, .14);
  --sidebar: 264px;
  --inspector: 318px;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; }

body {
  min-width: 320px;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:not(:disabled), select:not(:disabled), input[type="checkbox"] { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid rgba(49, 89, 216, .55);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  left: 12px;
  top: -50px;
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--text);
  color: #fff;
  text-decoration: none;
}
.skip-link:focus { top: 10px; }

.app-shell { height: 100dvh; min-height: 0; overflow: hidden; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr) 0; background: var(--bg); }
.app-shell.inspector-open { grid-template-columns: var(--sidebar) minmax(0, 1fr) var(--inspector); }

.sidebar,
.inspector {
  min-width: 0;
  min-height: 0;
  background: var(--panel);
  overflow: hidden;
}

.sidebar {
  z-index: 20;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
}

.brand-row {
  height: 66px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}

.brand-mark,
.dialog-brand {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: linear-gradient(145deg, #234bbf, #4874ee);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: -.4px;
  box-shadow: 0 3px 10px rgba(49, 89, 216, .25);
}

.brand-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.brand-copy strong { font-size: 14px; line-height: 1.3; }
.brand-copy span { margin-top: 2px; color: var(--muted); font-size: 11px; }

.icon-button,
.toolbar-button,
.mini-button,
.compact-tool,
.text-tool {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 5px;
}

.icon-button {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 19px;
}
.icon-button:hover, .toolbar-button:hover, .compact-tool:hover { border-color: var(--line-strong); background: var(--panel-soft); }
.mobile-only, .menu-button { display: none; }

.new-task-button {
  min-height: 38px;
  margin: 12px 12px 9px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #b9c7ef;
  border-radius: 5px;
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.new-task-button:hover { border-color: #8da4e6; background: #e5edff; }
.new-task-button b { flex: 1; text-align: left; font-size: 13px; }
.new-task-button kbd { color: #7783a0; font: 10px/1.8 Consolas, monospace; }

.model-nav { padding: 0 9px 9px; border-bottom: 1px solid var(--line); }
.section-heading { min-height: 30px; padding: 0 5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.section-label { margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mini-button { padding: 3px 6px; color: var(--muted); font-size: 11px; }
.mini-button:hover { color: var(--primary); border-color: #b9c7ef; }

.model-group {
  width: 100%;
  height: 42px;
  padding: 4px 7px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  text-align: left;
}
.model-group:hover { background: var(--panel-soft); border-color: #ebedf2; }
.model-group.is-active { background: var(--primary-soft); border-color: #ced9f8; }
.model-group > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.model-group b { font-size: 12px; line-height: 1.25; }
.model-group small { margin-top: 1px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.model-group em { min-width: 20px; padding: 1px 5px; border-radius: 9px; background: #edf0f5; color: var(--muted); font-size: 10px; font-style: normal; text-align: center; }
.model-group.is-active em { background: #d8e2ff; color: var(--primary-dark); }

.group-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
}
.group-gpt { background: #e9edff; color: #3f55bd; }
.group-claude { background: #fff0e5; color: #9a572a; }
.group-gemini { background: #e8f4ff; color: #2773ac; }
.group-other { background: #edf5ed; color: #3d7546; }
.group-image { background: #fbeafb; color: #9c3f8e; }
.group-video { background: #f1eafd; color: #6845a6; }

.history-section { min-height: 0; padding: 7px 9px 0; display: flex; flex: 1; flex-direction: column; }
.history-search { padding: 1px 4px 7px; }
.history-search input {
  width: 100%;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-soft);
}
.history-list { min-height: 0; overflow: auto; scrollbar-width: thin; }
.history-item {
  position: relative;
  min-height: 43px;
  padding: 5px 27px 5px 8px;
  display: grid;
  grid-template-columns: 3px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}
.history-item:hover { background: var(--panel-soft); }
.history-item.is-active { background: #f0f4ff; border-color: #dbe4fd; }
.history-item > i { width: 3px; height: 25px; border-radius: 2px; }
.history-item > span { min-width: 0; display: flex; flex-direction: column; }
.history-item b { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.history-item small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.history-item.is-running { background: #f5f8ff; }
.history-run-dot { width: 6px; height: 6px; margin-right: 4px; display: inline-block; border-radius: 50%; background: #d3901b; box-shadow: 0 0 0 2px rgba(211,144,27,.13); animation: pulse 1.1s infinite; vertical-align: 0; }
.history-delete { position: absolute; right: 4px; top: 8px; width: 25px; height: 25px; border: 0; border-radius: 4px; background: transparent; color: var(--faint); opacity: 0; }
.history-item:hover .history-delete, .history-delete:focus-visible { opacity: 1; }
.history-delete:hover { background: #ffecef; color: var(--danger); }
.empty-note { padding: 14px 8px; margin: 0; color: var(--faint); font-size: 11px; text-align: center; }

.sidebar-footer { padding: 9px; border-top: 1px solid var(--line); flex: 0 0 auto; }
.account-button {
  width: 100%;
  min-height: 44px;
  padding: 5px 7px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel-soft);
  text-align: left;
}
.account-button:hover { border-color: #b8c5e8; }
.account-button > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.account-button b { font-size: 12px; }
.account-button small { overflow: hidden; margin-top: 2px; color: var(--muted); font: 10px Consolas, monospace; text-overflow: ellipsis; }
.key-status { position: relative; height: 29px; display: grid; place-items: center; border-radius: 4px; background: #e8ecf4; color: #606b7f; font-size: 9px; font-weight: 800; }
.key-status i { position: absolute; right: -2px; top: -2px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #a6adba; }
.key-status i.is-online { background: #20ad75; }
.privacy-note { margin: 7px 0 0; color: var(--faint); font-size: 10px; text-align: center; }
.sidebar-platform-link { min-height: 35px; margin-top: 7px; padding: 0 8px; display: grid; grid-template-columns: 23px auto minmax(0,1fr) auto; align-items: center; gap: 6px; border: 1px solid #c6d2f3; border-radius: 5px; background: #f2f5ff; color: #29459b; text-decoration: none; }
.sidebar-platform-link:hover { border-color: #91a8e8; background: #e9efff; }
.sidebar-platform-link > span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 4px; background: var(--primary); color: #fff; font-size: 8px; font-weight: 900; }
.sidebar-platform-link b { font-size: 10px; white-space: nowrap; }
.sidebar-platform-link small { overflow: hidden; color: #7080aa; font-size: 8px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-platform-link i { font-size: 11px; font-style: normal; }

.workspace { height: 100%; max-height: 100dvh; min-height: 0; overflow: hidden; min-width: 0; max-width: 100%; display: grid; grid-template-rows: 58px auto minmax(0, 1fr) auto; background: #f7f8fa; }
.workspace > .topbar { grid-row: 1; }
.workspace > .context-bar { grid-row: 2; }
.workspace > .content-stage { grid-row: 3; }
.workspace > .composer-wrap { grid-row: 4; }
.topbar {
  min-width: 0;
  padding: 0 14px;
  display: grid;
  grid-template-columns: minmax(180px,1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.96);
}
.topbar-left, .topbar-actions { min-width: 0; display: flex; align-items: center; gap: 9px; }
.topbar-actions { justify-content: flex-end; }
.platform-portal {
  min-width: 196px;
  height: 42px;
  padding: 0 10px 0 7px;
  display: grid;
  grid-template-columns: 29px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #244bc4;
  border-radius: 7px;
  background: linear-gradient(135deg,#3159d8 0%,#2447bd 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(49,89,216,.22);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.platform-portal:hover { transform: translateY(-1px); background: linear-gradient(135deg,#3c66e5 0%,#294fc8 100%); box-shadow: 0 7px 17px rgba(49,89,216,.3); }
.platform-portal-mark { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.34); border-radius: 6px; background: rgba(255,255,255,.14); font-size: 10px; font-weight: 900; letter-spacing: -.3px; }
.platform-portal-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.platform-portal-copy b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.platform-portal-copy small { overflow: hidden; margin-top: 3px; color: rgba(255,255,255,.78); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.platform-portal-arrow { font-size: 15px; line-height: 1; }
.task-heading { min-width: 0; }
.task-heading h1 { max-width: 370px; overflow: hidden; margin: 0; font-size: 14px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.task-heading span { display: block; max-width: 370px; overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.model-picker-button {
  width: 100%;
  height: 38px;
  padding: 3px 8px;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #fff;
  text-align: left;
}
.model-picker-button:hover { border-color: #9baad3; }
.model-picker-button > span:first-child { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 4px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 800; }
.model-picker-button > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.model-picker-button b, .model-picker-button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-picker-button b { font-size: 11px; }
.model-picker-button small { margin-top: 1px; color: var(--muted); font-size: 9px; }

.service-pill { height: 27px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.service-pill i { width: 7px; height: 7px; border-radius: 50%; background: #a5adba; }
.service-pill.is-online i { background: var(--success); box-shadow: 0 0 0 3px rgba(22,134,92,.1); }
.service-pill.is-busy i { background: #d3901b; animation: pulse 1s infinite; }
.service-pill.is-error i { background: var(--danger); }
.toolbar-button { height: 28px; padding: 0 8px; color: #4d596d; font-size: 10px; }

.context-bar {
  min-width: 0;
  min-height: 38px;
  padding: 5px 13px;
  display: grid;
  grid-template-columns: minmax(160px,auto) minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #dce3f2;
  background: #f0f4ff;
}
.context-bar > div:first-child { min-width: 0; display: flex; align-items: center; gap: 7px; }
.context-bar > div:first-child b { color: var(--primary-dark); font-size: 11px; white-space: nowrap; }
.context-bar > div:first-child span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.context-bar > button { border: 0; background: transparent; color: var(--muted); font-size: 10px; }
.context-file-chips { min-width: 0; display: flex; gap: 4px; overflow: hidden; }
.context-file-chips span { max-width: 120px; padding: 2px 6px; overflow: hidden; border: 1px solid #cbd7f5; border-radius: 9px; background: #fff; color: #4d5f8e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.content-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.welcome-state { width: min(940px, calc(100% - 36px)); max-width: 100%; min-width: 0; margin: 24px auto 28px; }
.welcome-header { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 30px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 6px 6px 0 0; background: #fff; }
.welcome-header > *, .workflow-launcher > *, .block-heading > *, .start-guide > *, .connection-summary, .workflow-table { min-width: 0; }
.eyebrow { margin: 0 0 5px; color: var(--primary); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.welcome-header h2 { max-width: 650px; margin: 0; font-size: clamp(20px, 2.4vw, 29px); line-height: 1.3; letter-spacing: -.03em; }
.welcome-header > div > p:last-child { max-width: 660px; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.welcome-header h2, .welcome-header p, .block-heading p { overflow-wrap: anywhere; word-break: break-word; }
.connection-summary { margin: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-soft); }
.connection-summary div { min-height: 34px; padding: 0 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
.connection-summary div:last-child { border-bottom: 0; }
.connection-summary dt { color: var(--muted); font-size: 10px; }
.connection-summary dd { margin: 0; font-size: 10px; font-weight: 600; text-align: right; }

.workflow-launcher { padding: 18px 24px 22px; border: 1px solid var(--line); border-top: 0; background: #fff; }
.block-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.block-heading h3 { margin: 0; font-size: 13px; }
.block-heading p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.block-heading button { padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--primary); font-size: 10px; }

.workflow-table { border: 1px solid var(--line); border-bottom: 0; border-radius: 5px; overflow: hidden; }
.workflow-table button {
  width: 100%;
  min-height: 42px;
  padding: 5px 9px;
  display: grid;
  grid-template-columns: 28px 115px minmax(0,1fr) 38px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  text-align: left;
}
.workflow-table button:hover { background: #f5f7fb; }
.workflow-table button span { color: #8994a5; font: 10px Consolas, monospace; }
.workflow-table button b { font-size: 11px; }
.workflow-table button small { color: var(--muted); font-size: 10px; }
.workflow-table button em { padding: 2px 4px; border-radius: 3px; background: #edf1f7; color: #5e687a; font-size: 9px; font-style: normal; text-align: center; }

.start-guide { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 6px 6px; background: #f8f9fb; }
.start-guide > div { min-height: 61px; padding: 10px 15px; display: flex; align-items: center; gap: 9px; border-right: 1px solid var(--line); }
.start-guide > div:last-child { border-right: 0; }
.start-guide b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #e9edf5; color: #687388; font-size: 10px; }
.start-guide span { display: flex; flex-direction: column; }
.start-guide strong { font-size: 11px; }
.start-guide small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.start-guide-key { background: #f2f5ff; }
.start-guide-key span { position: relative; padding-right: 72px; }
.start-guide-key a { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--primary); font-size: 9px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.start-guide-key a:hover { text-decoration: underline; }

.message-list { width: min(900px, calc(100% - 28px)); margin: 0 auto; padding: 18px 0 26px; }
.message { padding: 13px 4px; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; border-bottom: 1px solid #e4e7ed; }
.message-avatar { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: #596579; font-size: 8px; font-weight: 800; }
.message.assistant .message-avatar { background: var(--primary-soft); color: var(--primary); border-color: #cfdbfa; }
.message-main { min-width: 0; }
.message-meta { min-height: 22px; display: flex; align-items: center; gap: 7px; }
.message-meta b { font-size: 11px; }
.message-meta span { color: var(--faint); font-size: 9px; }
.attachment-note { margin: 4px 0 7px; display: flex; flex-wrap: wrap; gap: 4px; }
.attachment-note span { padding: 2px 6px; border: 1px solid #d4dae5; border-radius: 9px; background: #f8f9fb; color: #697588; font-size: 9px; }
.message-bubble { overflow-wrap: anywhere; color: #263247; font-size: 13px; line-height: 1.72; }
.message-bubble > :first-child { margin-top: 0; }
.message-bubble > :last-child { margin-bottom: 0; }
.message-bubble p { margin: .55em 0; }
.message-bubble h1, .message-bubble h2, .message-bubble h3 { margin: 1em 0 .45em; line-height: 1.35; }
.message-bubble h1 { font-size: 18px; }.message-bubble h2 { font-size: 16px; }.message-bubble h3 { font-size: 14px; }
.message-bubble ul, .message-bubble ol { margin: .55em 0; padding-left: 1.5em; }
.message-bubble blockquote { margin: .6em 0; padding: 4px 9px; border-left: 3px solid #bdc9e9; background: #f4f6fb; color: #596579; }
.message-bubble code { padding: 1px 4px; border-radius: 3px; background: #eef1f6; font: 12px/1.5 Consolas, monospace; }
.message-bubble pre { overflow: auto; margin: .7em 0; padding: 11px; border: 1px solid #d8dde6; border-radius: 5px; background: #111827; color: #e7edf8; }
.message-bubble pre code { padding: 0; background: transparent; color: inherit; }
.typing-caret::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: var(--primary); vertical-align: -.15em; animation: blink .8s step-end infinite; }

.message-actions { min-height: 25px; margin-top: 5px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.message:hover .message-actions, .message-actions.always { opacity: 1; }
.message-actions button { padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--muted); font-size: 9px; }
.message-actions button:hover { color: var(--primary); border-color: #b7c5eb; }
.error-card { padding: 9px 11px; border: 1px solid #f1c5cb; border-radius: 5px; background: #fff4f5; color: #a62e3c; font-size: 12px; line-height: 1.55; }
.error-card small { display: block; margin-top: 5px; color: #87515a; font: 9px Consolas, monospace; }

.generation-status { min-height: 52px; padding: 9px 11px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.status-spinner { width: 18px; height: 18px; border: 2px solid #d8dfea; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
.generation-status span { display: flex; flex-direction: column; }
.generation-status b { font-size: 11px; }.generation-status small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.video-progress { height: 4px; margin-top: 5px; overflow: hidden; border-radius: 2px; background: #e6e9ef; }
.video-progress i { display: block; height: 100%; background: linear-gradient(90deg,#5273dc,#895cd7); transition: width .35s; }

.media-grid { margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 9px; }
.media-card { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #e9edf3; }
.media-card img, .media-card video { width: 100%; max-height: 520px; display: block; object-fit: contain; background: #161b25; }
.media-card-footer { min-height: 32px; padding: 5px 7px; display: flex; align-items: center; justify-content: space-between; gap: 7px; background: #fff; }
.media-card-footer small { color: var(--muted); font-size: 9px; }
.media-card-footer a { padding: 3px 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--primary); font-size: 9px; text-decoration: none; }
.media-placeholder { min-height: 120px; padding: 18px; display: grid; place-items: center; background: #f5f6f8; color: var(--muted); font-size: 11px; text-align: center; }

.jump-bottom { position: sticky; z-index: 5; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; box-shadow: 0 4px 12px rgba(24,33,52,.12); color: #566176; font-size: 10px; }

.composer-wrap { padding: 8px max(14px,calc((100% - 900px)/2)) max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(247,248,250,.98); }
.composer { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; box-shadow: 0 3px 12px rgba(31,43,70,.06); }
.composer:focus-within { border-color: #839be1; box-shadow: 0 0 0 3px rgba(49,89,216,.07); }
.composer-toolbar, .composer-actions { min-height: 34px; padding: 4px 7px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.composer-toolbar { border-bottom: 1px solid #edf0f4; background: #fafbfc; }
.composer-toolbar > div, .composer-actions > div { display: flex; align-items: center; gap: 5px; }
.compact-tool { height: 24px; padding: 0 7px; color: #536078; font-size: 9px; }
.mode-hint { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
#promptInput { width: 100%; min-height: 70px; max-height: 180px; padding: 10px 11px; resize: none; border: 0; outline: 0; color: var(--text); font-size: 13px; line-height: 1.6; }
#promptInput::placeholder { color: #9ba4b3; }
.composer-actions { border-top: 1px solid #edf0f4; }
.composer-submit { min-width: 0; display: grid !important; grid-template-columns: minmax(150px, 260px) auto; align-items: center; gap: 6px !important; }
.composer-model-picker { height: 30px; min-width: 0; padding: 2px 6px; grid-template-columns: 24px minmax(0,1fr) auto; }
.composer-model-picker > span:first-child { width: 23px; height: 23px; }
.composer-model-picker b { font-size: 10px; }
.composer-model-picker small { display: none; }
.reference-strip { min-height: 62px; padding: 6px 8px; display: flex; gap: 7px; overflow-x: auto; border-bottom: 1px solid #edf0f4; background: #fbfcfe; scrollbar-width: thin; }
.reference-thumb { position: relative; width: 70px; height: 50px; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #e8ecf2; }
.reference-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.reference-thumb button { position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(18,25,38,.78); color: #fff; font-size: 12px; line-height: 18px; }
.reference-thumb small { position: absolute; left: 2px; bottom: 2px; max-width: calc(100% - 4px); padding: 1px 3px; overflow: hidden; border-radius: 2px; background: rgba(18,25,38,.72); color: #fff; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.composer.is-image-dragging { border-color: var(--primary); box-shadow: inset 0 0 0 2px rgba(49,89,216,.15); }
.text-tool { padding: 3px 5px; border-color: transparent; background: transparent; color: var(--muted); font-size: 9px; }
.danger-text:hover { color: var(--danger); background: #fff2f4; }
.char-count { color: var(--faint); font-size: 9px; }
.send-button { height: 29px; padding: 0 10px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 4px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; }
.send-button:hover { background: var(--primary-dark); }.send-button.is-stop { background: var(--danger); }
.send-button b { font: 10px Consolas,monospace; opacity: .7; }
.composer-footnote { margin: 5px 0 0; color: var(--faint); font-size: 9px; text-align: center; }

.inspector { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.inspector-header { height: 58px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.inspector-header h2 { margin: 0; font-size: 14px; }.inspector-header .eyebrow { margin-bottom: 2px; }
.inspector-tabs { height: 38px; padding: 5px 8px 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; border-bottom: 1px solid var(--line); background: var(--panel-soft); }
.inspector-tabs button { border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; background: transparent; color: var(--muted); font-size: 10px; }
.inspector-tabs button.is-active { border-color: var(--line); background: #fff; color: var(--primary); font-weight: 700; }
.inspector-body { min-height: 0; padding: 12px; flex: 1; overflow: auto; scrollbar-width: thin; }
.inspector-panel { min-width: 0; }
.field-label { display: block; margin: 0 0 5px; color: #596579; font-size: 10px; font-weight: 600; }
.select-wrap select, .setting-group textarea, .two-fields input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--text);
}
.select-wrap select { height: 32px; padding: 0 8px; }
.setting-group textarea { min-height: 76px; padding: 7px 8px; resize: vertical; line-height: 1.45; }
.model-summary { min-height: 52px; margin-top: 8px; padding: 7px; display: grid; grid-template-columns: 31px minmax(0,1fr); align-items: center; gap: 8px; border: 1px solid #dbe2ef; border-radius: 5px; background: #f7f9fc; }
.model-summary > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 4px; background: var(--primary-soft); color: var(--primary); font-size: 10px; font-weight: 800; }
.model-summary > div { min-width: 0; }.model-summary b, .model-summary p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.model-summary b { display: block; font-size: 10px; }.model-summary p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.setting-group, .task-info { margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line); }
.setting-title { min-height: 26px; display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.setting-title h3 { margin: 0; font-size: 11px; }.setting-title span { color: #9aa3b1; font: 8px Consolas,monospace; letter-spacing: .08em; }
.range-heading { margin: 10px 0 5px; display: flex; justify-content: space-between; color: #596579; font-size: 10px; }
.range-heading output { color: var(--primary); font: 10px Consolas,monospace; }
input[type="range"] { width: 100%; accent-color: var(--primary); }
.two-fields { margin-top: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.two-fields input { height: 31px; padding: 0 7px; }
.toggle-row { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.toggle-row > span { display: flex; flex-direction: column; }.toggle-row b { font-size: 10px; }.toggle-row small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.toggle-row input { position: absolute; opacity: 0; }
.toggle-row i { position: relative; width: 31px; height: 17px; border-radius: 9px; background: #c9ced8; transition: .2s; }
.toggle-row i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: .2s; }
.toggle-row input:checked + i { background: var(--primary); }.toggle-row input:checked + i::after { transform: translateX(14px); }
.segmented { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.segmented button { height: 29px; border: 0; border-right: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 9px; }.segmented button:last-child { border-right: 0; }.segmented button.is-active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
.cost-note, .file-warning { padding: 7px 8px; border: 1px solid #ecd8b7; border-radius: 4px; background: #fff9ed; color: #846022; font-size: 9px; line-height: 1.5; }
.task-info dl { margin: 0; border: 1px solid var(--line); border-bottom: 0; border-radius: 4px; overflow: hidden; }
.task-info dl div { min-height: 29px; padding: 0 7px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.task-info dt { color: var(--muted); font-size: 9px; }.task-info dd { margin: 0; font-size: 9px; font-weight: 600; }
.reset-button { width: 100%; height: 31px; margin-top: 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--muted); font-size: 9px; }.reset-button:hover { border-color: #aebbdc; color: var(--primary); }

.panel-intro { padding-bottom: 10px; border-bottom: 1px solid var(--line); }.panel-intro h3 { margin: 0; font-size: 12px; }.panel-intro p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.workflow-library { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.workflow-entry { padding: 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.workflow-entry.is-active { border-color: #aebfe9; background: #f4f7ff; }
.workflow-entry header { display: flex; align-items: center; justify-content: space-between; gap: 7px; }.workflow-entry h4 { margin: 0; font-size: 11px; }.workflow-entry em { padding: 2px 4px; border-radius: 3px; background: #edf0f5; color: var(--muted); font-size: 8px; font-style: normal; }
.workflow-entry p { margin: 5px 0; color: var(--muted); font-size: 9px; line-height: 1.45; }.workflow-entry ol { margin: 6px 0; padding-left: 20px; color: #546177; font-size: 9px; line-height: 1.6; }
.workflow-entry button { width: 100%; height: 27px; border: 1px solid #bac7e9; border-radius: 4px; background: var(--primary-soft); color: var(--primary-dark); font-size: 9px; }

.file-dropzone { width: 100%; min-height: 76px; margin-top: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px dashed #aeb8c8; border-radius: 5px; background: #f8f9fb; }.file-dropzone:hover, .file-dropzone.is-dragging { border-color: var(--primary); background: var(--primary-soft); }.file-dropzone b { font-size: 10px; }.file-dropzone span { color: var(--muted); font-size: 8px; }
.file-list { margin-top: 8px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.file-item { min-height: 42px; padding: 5px 6px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); }.file-item:last-child { border-bottom: 0; }.file-item > span { min-width: 0; display: flex; flex-direction: column; }.file-item b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.file-item small { margin-top: 3px; color: var(--muted); font-size: 8px; }.file-item button { width: 24px; height: 24px; border: 0; border-radius: 3px; background: transparent; color: var(--faint); font-size: 14px; }.file-item button:hover { background: #fff0f2; color: var(--danger); }
.context-meter { margin-top: 9px; }.context-meter > span { height: 4px; display: block; overflow: hidden; border-radius: 2px; background: #e8ebf0; }.context-meter i { width: 0; height: 100%; display: block; background: var(--primary); transition: width .2s; }.context-meter small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; text-align: right; }
.reference-options { margin-top: 9px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
.reference-options label { min-width: 0; }
.reference-options select { width: 100%; height: 30px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font-size: 9px; }
.reference-options input { width: 100%; }
.reference-options output { float: right; color: var(--primary); font: 9px Consolas,monospace; }
.current-reference-list { margin-top: 8px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.current-reference-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.current-reference-card img { width: 100%; height: 72px; display: block; object-fit: cover; background: #e8ebf0; }
.current-reference-card div { padding: 4px 5px; min-width: 0; }
.current-reference-card b, .current-reference-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.current-reference-card b { font-size: 8px; }.current-reference-card small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.current-reference-card button { position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(18,25,38,.8); color: #fff; }
.library-heading { min-height: 32px; margin-top: 11px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.library-heading h4 { margin: 0; font-size: 10px; }.library-heading button { border: 0; background: transparent; color: var(--primary); font-size: 8px; }
.library-filters { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.library-filters button { min-width: 0; height: 27px; padding: 0 3px; overflow: hidden; border: 0; border-right: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.library-filters button:last-child { border-right: 0; }.library-filters button.is-active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
.media-library-grid { margin-top: 7px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.library-media-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.library-media-preview { position: relative; width: 100%; height: 92px; padding: 0; display: block; overflow: hidden; border: 0; background: #e8ebf0; }
.library-media-preview img, .library-media-preview video { width: 100%; height: 100%; display: block; object-fit: cover; }
.library-media-preview .remote-badge { position: absolute; left: 3px; top: 3px; padding: 2px 4px; border-radius: 3px; background: rgba(18,25,38,.76); color: #fff; font-size: 7px; }
.library-media-copy { padding: 5px; }.library-media-copy b, .library-media-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.library-media-copy b { font-size: 8px; }.library-media-copy small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.library-media-actions { padding: 0 5px 5px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3px; }.library-media-actions button { height: 23px; padding: 0 2px; border: 1px solid var(--line); border-radius: 3px; background: #fff; color: var(--muted); font-size: 7px; }.library-media-actions button:hover { border-color: #b9c7eb; color: var(--primary); }.library-media-actions button.danger:hover { border-color: #efc3c9; color: var(--danger); }
.library-clear-button { color: var(--danger); }

.model-popover {
  position: fixed;
  z-index: 80;
  width: min(440px, calc(100vw - 20px));
  max-height: min(560px,calc(100dvh - 30px));
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--shadow);
}
.model-search { padding: 8px; border-bottom: 1px solid var(--line); }.model-search input { width: 100%; height: 31px; padding: 0 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-soft); }
.model-results { max-height: 480px; padding: 6px; overflow: auto; }.model-results section + section { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }.model-results h3 { margin: 3px 5px 5px; color: var(--muted); font-size: 9px; letter-spacing: .08em; }.model-results h3 em { font-style: normal; }
.model-option { width: 100%; min-height: 40px; padding: 5px 6px; display: grid; grid-template-columns: 27px minmax(0,1fr) auto; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 4px; background: transparent; text-align: left; }.model-option:hover { background: var(--panel-soft); }.model-option.is-active { border-color: #d1dcf9; background: var(--primary-soft); }.model-option > span:first-child { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 4px; background: #edf0f5; font-size: 9px; font-weight: 800; }.model-option > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }.model-option b,.model-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.model-option b { font-size: 10px; }.model-option small { margin-top: 2px; color: var(--muted); font: 8px Consolas,monospace; }.model-option > em { color: var(--primary); font-size: 11px; font-style: normal; }

dialog { color: var(--text); }
.key-dialog, .confirm-dialog, .media-preview-dialog { padding: 0; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(16,24,40,.48); backdrop-filter: blur(2px); }
.key-dialog { width: min(440px,calc(100vw - 24px)); }.key-dialog form { position: relative; padding: 25px; }.dialog-close { position: absolute; right: 10px; top: 10px; width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }.key-dialog .dialog-brand { width: 40px; height: 40px; margin-bottom: 12px; }.key-dialog h2 { margin: 0; font-size: 20px; }.dialog-copy { margin: 8px 0 15px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.platform-entry { margin: 0 0 16px; padding: 12px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 1px solid #b8c8f5; border-radius: 7px; background: linear-gradient(135deg,#f3f6ff,#eaf0ff); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.platform-entry-logo { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; background: linear-gradient(145deg,#234bbf,#4874ee); color: #fff; font-size: 11px; font-weight: 900; box-shadow: 0 4px 10px rgba(49,89,216,.2); }
.platform-entry span { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.platform-entry b { color: #203d96; font-size: 12px; }
.platform-entry small { color: #65718b; font-size: 9px; line-height: 1.4; }
.platform-entry a { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 5px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 800; text-decoration: none; box-shadow: 0 3px 8px rgba(49,89,216,.2); }
.platform-entry a:hover { background: var(--primary-dark); }
.platform-entry a i { font-size: 13px; font-style: normal; }
.key-field > span { display: block; margin-bottom: 5px; color: #536078; font-size: 10px; font-weight: 600; }.key-field > div { height: 38px; display: grid; grid-template-columns: minmax(0,1fr) auto; border: 1px solid var(--line-strong); border-radius: 5px; overflow: hidden; }.key-field input { min-width: 0; padding: 0 10px; border: 0; outline: 0; font: 12px Consolas,monospace; }.key-field button { width: 48px; border: 0; border-left: 1px solid var(--line); background: var(--panel-soft); color: var(--muted); font-size: 9px; }
.endpoint-row { min-height: 34px; margin-top: 8px; padding: 0 8px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-soft); font-size: 9px; }.endpoint-row span { color: var(--muted); }.endpoint-row code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.endpoint-row i { color: var(--success); font-style: normal; }
.remember-row { margin: 11px 0; display: flex; align-items: center; gap: 8px; }.remember-row input { position: absolute; opacity: 0; }.remember-row > i { width: 16px; height: 16px; border: 1px solid var(--line-strong); border-radius: 3px; }.remember-row input:checked + i { position: relative; border-color: var(--primary); background: var(--primary); }.remember-row input:checked + i::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 10px; }.remember-row > span { display: flex; flex-direction: column; }.remember-row b { font-size: 10px; }.remember-row small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.key-error { padding: 7px 8px; border: 1px solid #f0c4ca; border-radius: 4px; background: #fff3f5; color: #ad3543; font-size: 10px; }.connect-button { width: 100%; height: 38px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 5px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; }.connect-button:hover { background: var(--primary-dark); }.trust-row { margin-top: 12px; display: flex; justify-content: center; gap: 12px; color: var(--faint); font-size: 8px; }
.clear-local-data-button { width: 100%; margin-top: 13px; padding: 7px 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #9f3a47; font-size: 9px; text-decoration: underline; text-underline-offset: 2px; }.clear-local-data-button:hover { border-color: #efc8ce; background: #fff4f5; text-decoration: none; }
.confirm-dialog { width: min(350px,calc(100vw - 24px)); }.confirm-dialog form { padding: 22px; text-align: center; }.confirm-icon { width: 35px; height: 35px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; background: #fff1f3; color: var(--danger); font-weight: 800; }.confirm-dialog h2 { margin: 0; font-size: 16px; }.confirm-dialog p { margin: 8px 0 17px; color: var(--muted); font-size: 11px; line-height: 1.55; }.confirm-dialog form > div:last-child { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }.confirm-dialog button { height: 33px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }.confirm-dialog button.danger { border-color: var(--danger); background: var(--danger); color: #fff; }
.media-preview-dialog { width: min(900px,calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: hidden; }
.media-preview-header { height: 52px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.media-preview-header h2 { margin: 0; font-size: 13px; }.media-preview-header .eyebrow { margin-bottom: 2px; }.media-preview-header button { width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.media-preview-body { min-height: 180px; max-height: calc(100dvh - 140px); display: grid; place-items: center; overflow: auto; background: #111722; }.media-preview-body img, .media-preview-body video { max-width: 100%; max-height: calc(100dvh - 150px); display: block; object-fit: contain; }
.media-preview-footer { min-height: 43px; padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; gap: 9px; border-top: 1px solid var(--line); }.media-preview-footer span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.media-preview-footer button { height: 28px; border: 1px solid #b9c7eb; border-radius: 4px; background: var(--primary-soft); color: var(--primary-dark); font-size: 9px; }

.toast-region { position: fixed; z-index: 120; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 7px; pointer-events: none; }.toast { min-width: 230px; max-width: 360px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; border: 1px solid #b9dcca; border-radius: 5px; background: #f2fff8; box-shadow: 0 6px 18px rgba(31,45,63,.16); color: #216747; font-size: 10px; animation: toast-in .18s ease-out; }.toast.error { border-color: #efc3c9; background: #fff4f5; color: #9c2f3c; }.toast i { font-style: normal; font-weight: 800; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes toast-in { from { transform: translateY(6px); opacity: 0; } }

@media (max-width: 1180px) {
  .app-shell.inspector-open { grid-template-columns: var(--sidebar) minmax(0,1fr) 292px; }
  :root { --inspector: 292px; }
  .welcome-header { grid-template-columns: minmax(0,1fr) 225px; }
  .service-pill { display: none; }
}

@media (max-width: 940px) {
  .app-shell, .app-shell.inspector-open { grid-template-columns: 230px minmax(0,1fr); }
  :root { --sidebar: 230px; }
  .inspector { position: fixed; z-index: 50; right: 0; top: 0; bottom: 0; width: min(340px,calc(100vw - 30px)); transform: translateX(105%); box-shadow: -10px 0 30px rgba(24,33,52,.14); transition: transform .2s; }
  .app-shell.inspector-open .inspector { transform: translateX(0); }
  .topbar { grid-template-columns: minmax(130px,1fr) auto; }
  .platform-portal { min-width: 154px; }
  .platform-portal-copy b { font-size: 10px; }
  .platform-portal-copy small { font-size: 7px; }
  .welcome-header { grid-template-columns: 1fr; }.connection-summary { display: grid; grid-template-columns: repeat(2,1fr); }.connection-summary div:nth-child(odd) { border-right: 1px solid var(--line); }.connection-summary div:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 760px) {
  body { overflow: hidden; }
  .app-shell, .app-shell.inspector-open { grid-template-columns: minmax(0,1fr); }
  .sidebar { position: fixed; z-index: 70; left: 0; top: 0; bottom: 0; width: min(280px,calc(100vw - 45px)); transform: translateX(-105%); box-shadow: 12px 0 30px rgba(20,29,45,.2); transition: transform .2s; }
  .sidebar.is-open { transform: translateX(0); }
  .mobile-backdrop { position: fixed; z-index: 60; inset: 0; background: rgba(15,23,38,.42); }
  .mobile-only, .menu-button { display: inline-grid; }
  .topbar { height: 54px; padding: 0 9px; grid-template-columns: minmax(0,1fr) auto; gap: 6px; }
  .task-heading span, .toolbar-button:not(#toggleInspectorButton), .service-pill { display: none; }
  .platform-portal { min-width: 132px; height: 38px; grid-template-columns: 27px minmax(0,1fr) auto; gap: 6px; padding-right: 8px; }
  .platform-portal-mark { width: 27px; height: 27px; }
  .platform-portal-copy b { font-size: 9px; }
  .platform-portal-copy small { display: none; }
  .task-heading h1 { max-width: 120px; }
  .context-bar { grid-template-columns: minmax(0,1fr) auto; }.context-file-chips { display: none; }
  .welcome-state { width: calc(100% - 18px); max-width: calc(100% - 18px); margin: 10px auto 18px; }.welcome-header, .workflow-launcher { min-width: 0; padding: 15px; }.welcome-header h2 { max-width: 100%; font-size: 20px; }.welcome-header > div > p:last-child { max-width: 100%; font-size: 11px; }.connection-summary { width: 100%; grid-template-columns: minmax(0,1fr); }.connection-summary div, .connection-summary div:nth-child(odd) { min-width: 0; border-right: 0; border-bottom: 1px solid var(--line); }.connection-summary div:last-child { border-bottom: 0; }
  .workflow-table button { grid-template-columns: 23px 90px minmax(0,1fr); }.workflow-table button em { display: none; }.start-guide { grid-template-columns: 1fr; }.start-guide > div { min-height: 50px; border-right: 0; border-bottom: 1px solid var(--line); }.start-guide > div:last-child { border-bottom: 0; }
  .start-guide-key span { padding-right: 90px; }
  .message-list { width: calc(100% - 16px); padding-top: 6px; }.message { grid-template-columns: 28px minmax(0,1fr); gap: 7px; }.message-avatar { width: 26px; height: 26px; }.message-actions { opacity: 1; }
  .composer-wrap { padding: 6px 7px max(6px,env(safe-area-inset-bottom)); }.composer-toolbar { min-height: 31px; }.mode-hint { display: none; }#promptInput { min-height: 58px; }.composer-footnote { display: none; }.composer-actions { align-items: stretch; flex-direction: column; }.composer-actions > div:first-child { min-height: 22px; }.composer-submit { width: 100%; grid-template-columns: minmax(0,1fr) 72px; }.composer-model-picker { width: 100%; }.send-button { justify-content: center; }
  .inspector { width: min(340px,calc(100vw - 26px)); }
  .toast-region { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); }.toast { min-width: 0; max-width: none; }
}

@media (max-width: 520px) {
  .topbar { grid-template-columns: minmax(0,1fr) auto; }.topbar-actions { gap: 0; }.task-heading { display: none; }
  .platform-portal { min-width: 110px; }
  .platform-portal-copy b { max-width: 52px; white-space: normal; line-height: 1.05; }
  .platform-entry { grid-template-columns: 34px minmax(0,1fr); }
  .platform-entry-logo { width: 34px; height: 34px; }
  .platform-entry a { grid-column: 1 / -1; justify-content: center; }
  .workflow-table button { grid-template-columns: 23px 82px minmax(0,1fr); }.workflow-table button small { font-size: 9px; }
  .composer-toolbar .compact-tool { padding: 0 4px; font-size: 8px; }.media-grid { grid-template-columns: 1fr; }.reference-options { grid-template-columns: 1fr; }.media-library-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-height: 520px) and (orientation:landscape) {
  .topbar { height: 46px; }.welcome-state { margin-top: 7px; }.welcome-header { padding: 10px 14px; }.welcome-header h2 { font-size: 18px; }.connection-summary { display: none; }.workflow-launcher { padding: 9px 14px; }.workflow-table button { min-height: 34px; }.start-guide { display: none; }.composer-wrap { padding-top: 4px; }.composer-toolbar { display: none; }#promptInput { min-height: 44px; max-height: 82px; padding-top: 7px; padding-bottom: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}