spb/zyquo-cloud-web Public MIT

1/*2 *  components.css3 *  Zyquo Cloud Web4 *5 *  Author: Simon-Pierre Boucher6 *  Mail: contact@spboucher.ai7 *8 *  Component styles — every value comes from tokens.css. Layout mirrors the9 *  native app (sidebar 260 + centered 760 transcript column), responsive:10 *  the sidebar becomes a drawer under 768px.11 */1213/* ---------- Shell ---------- */1415.shell {16  display: flex;17  height: 100%;18  background: var(--z-background);19}2021.chat-area {22  flex: 1;23  display: flex;24  flex-direction: column;25  min-width: 0;26  height: 100%;27}2829/* ---------- Sidebar ---------- */3031.sidebar {32  width: var(--z-sidebar-width);33  min-width: var(--z-sidebar-width);34  display: flex;35  flex-direction: column;36  border-right: var(--z-hairline) solid var(--z-border);37  background: var(--z-background);38  height: 100%;39}4041.sidebar-wordmark {42  display: flex;43  align-items: center;44  gap: var(--z-space-xs);45  padding: 12px var(--z-space-md) var(--z-space-xs);46  font-size: 14px;47  font-weight: 500;48  user-select: none;49}5051.sidebar-search {52  display: flex;53  align-items: center;54  gap: 6px;55  margin: 0 var(--z-space-sm) var(--z-space-xs);56  padding: 5px var(--z-space-xs);57  border-radius: var(--z-radius-small);58  background: color-mix(in srgb, var(--z-surface-secondary) 70%, transparent);59  color: var(--z-text-tertiary);60}61.sidebar-search input {62  flex: 1;63  border: none;64  outline: none;65  background: transparent;66  font-size: 12.5px;67  color: var(--z-text-primary);68  min-width: 0;69}7071.new-chat-button {72  display: flex;73  align-items: center;74  justify-content: center;75  gap: 6px;76  margin: 0 var(--z-space-sm) var(--z-space-xs);77  padding: 7px var(--z-space-sm);78  border-radius: var(--z-radius-small);79  background: var(--z-accent);80  color: var(--z-on-accent);81  font-size: 13px;82  font-weight: 500;83  transition: transform var(--z-motion-hover);84}85.new-chat-button:active {86  transform: scale(var(--z-motion-pressed-scale));87}8889.conversation-list {90  flex: 1;91  overflow-y: auto;92  padding: 0 var(--z-space-xs);93}9495.conversation-group-header {96  font-size: var(--z-font-size-caption);97  color: var(--z-text-tertiary);98  padding: 12px var(--z-space-xs) 2px;99  user-select: none;100}101102.conversation-row {103  display: flex;104  align-items: center;105  gap: 6px;106  width: 100%;107  text-align: left;108  padding: 5px var(--z-space-xs);109  border-radius: var(--z-radius-small);110  margin-bottom: 2px;111  transition: background var(--z-motion-hover);112  position: relative;113}114.conversation-row:hover {115  background: color-mix(in srgb, var(--z-surface-secondary) 60%, transparent);116}117.conversation-row.selected {118  background: var(--z-accent-subtle);119}120.conversation-row-main {121  flex: 1;122  min-width: 0;123}124.conversation-row-title {125  font-size: 13px;126  color: var(--z-text-primary);127  white-space: nowrap;128  overflow: hidden;129  text-overflow: ellipsis;130}131.conversation-row-sub {132  font-size: var(--z-font-size-caption);133  color: var(--z-text-tertiary);134  white-space: nowrap;135  overflow: hidden;136  text-overflow: ellipsis;137  margin-top: 1px;138}139.conversation-row-actions {140  display: none;141  gap: 4px;142  color: var(--z-text-tertiary);143}144.conversation-row:hover .conversation-row-actions {145  display: flex;146}147.conversation-row .pin-indicator {148  color: var(--z-text-tertiary);149  font-size: 9px;150}151.conversation-row:hover .pin-indicator {152  display: none;153}154155.sidebar-footer {156  display: flex;157  align-items: center;158  justify-content: space-between;159  padding: var(--z-space-xs) var(--z-space-md);160  border-top: var(--z-hairline) solid var(--z-border);161  color: var(--z-text-tertiary);162  font-size: var(--z-font-size-caption);163}164165.icon-button {166  display: inline-flex;167  align-items: center;168  justify-content: center;169  width: 26px;170  height: 26px;171  border-radius: var(--z-radius-small);172  color: var(--z-text-secondary);173  transition: background var(--z-motion-hover);174}175.icon-button:hover {176  background: var(--z-surface-secondary);177}178.icon-button.danger:hover {179  color: var(--z-danger);180}181182/* ---------- Chat header ---------- */183184.chat-header {185  height: var(--z-chat-header-height);186  min-height: var(--z-chat-header-height);187  display: grid;188  grid-template-columns: 1fr auto 1fr;189  align-items: center;190  padding: 0 var(--z-space-md);191  border-bottom: var(--z-hairline) solid var(--z-border);192  gap: var(--z-space-xs);193}194.chat-header-left {195  display: flex;196  align-items: center;197  gap: var(--z-space-xs);198  min-width: 0;199}200.chat-header-right {201  display: flex;202  align-items: center;203  gap: 2px;204  justify-content: flex-end;205}206.chat-title {207  font-size: 13px;208  font-weight: 500;209  max-width: 220px;210  white-space: nowrap;211  overflow: hidden;212  text-overflow: ellipsis;213  cursor: default;214}215.chat-title-input {216  font-size: 13px;217  font-weight: 500;218  border: none;219  outline: none;220  background: var(--z-surface-secondary);221  border-radius: var(--z-radius-small);222  padding: 2px 6px;223  max-width: 220px;224}225226/* ---------- Model chip ---------- */227228.model-chip {229  display: inline-flex;230  align-items: center;231  gap: 6px;232  padding: 4px var(--z-space-xs);233  border-radius: var(--z-radius-small);234  background: var(--z-surface-secondary);235  font-size: 12.5px;236  font-weight: 500;237  color: var(--z-text-primary);238  transition: transform var(--z-motion-hover);239  white-space: nowrap;240  max-width: 60vw;241  overflow: hidden;242  text-overflow: ellipsis;243}244.model-chip:active {245  transform: scale(var(--z-motion-pressed-scale));246}247.model-chip .glyph {248  color: var(--z-accent);249  display: inline-flex;250}251.model-chip .chevron {252  color: var(--z-text-tertiary);253  font-size: 8px;254}255256/* ---------- Model menu (command-palette style) ---------- */257258.overlay {259  position: fixed;260  inset: 0;261  background: rgba(10, 12, 20, 0.25);262  display: flex;263  align-items: flex-start;264  justify-content: center;265  padding: 8vh var(--z-space-md) var(--z-space-md);266  z-index: 100;267  animation: overlay-in 120ms ease-out;268}269@keyframes overlay-in {270  from {271    opacity: 0;272  }273  to {274    opacity: 1;275  }276}277278.panel {279  background: var(--z-surface);280  border: var(--z-hairline) solid var(--z-border);281  border-radius: var(--z-radius-large);282  box-shadow: var(--z-shadow-panel);283  width: 620px;284  max-width: 100%;285  max-height: 72vh;286  display: flex;287  flex-direction: column;288  overflow: hidden;289  animation: panel-in 150ms ease-out;290}291@keyframes panel-in {292  from {293    opacity: 0;294    transform: translateY(6px) scale(0.99);295  }296  to {297    opacity: 1;298    transform: none;299  }300}301302.panel-search {303  display: flex;304  align-items: center;305  gap: var(--z-space-xs);306  padding: var(--z-space-sm) var(--z-space-md);307  border-bottom: var(--z-hairline) solid var(--z-border);308  color: var(--z-text-tertiary);309  flex-shrink: 0;310}311.panel-search input {312  flex: 1;313  border: none;314  outline: none;315  background: transparent;316  font-size: 15px;317  color: var(--z-text-primary);318}319320.panel-filters {321  display: flex;322  gap: 6px;323  padding: var(--z-space-xs) var(--z-space-md);324  border-bottom: var(--z-hairline) solid var(--z-border);325  overflow-x: auto;326  flex-wrap: nowrap;327  flex-shrink: 0;328}329.panel-footer {330  flex-shrink: 0;331}332.filter-chip {333  font-size: var(--z-font-size-caption);334  padding: 3px 10px;335  border-radius: 999px;336  background: var(--z-surface-secondary);337  color: var(--z-text-secondary);338  white-space: nowrap;339  transition: background var(--z-motion-hover);340}341.filter-chip.active {342  background: var(--z-accent);343  color: var(--z-on-accent);344}345346.panel-list {347  flex: 1;348  overflow-y: auto;349  padding: var(--z-space-xs);350}351352.panel-section-header {353  font-size: var(--z-font-size-caption);354  color: var(--z-text-tertiary);355  padding: 10px var(--z-space-xs) 2px;356  display: flex;357  align-items: center;358  gap: 6px;359  user-select: none;360}361362.model-row {363  display: flex;364  align-items: center;365  gap: var(--z-space-xs);366  width: 100%;367  text-align: left;368  padding: 5px var(--z-space-xs);369  border-radius: var(--z-radius-small);370  transition: background var(--z-motion-hover);371}372.model-row:hover,373.model-row.highlighted {374  background: var(--z-surface-secondary);375}376.model-row.current {377  background: var(--z-accent-subtle);378}379.model-row .glyph {380  color: var(--z-accent);381  width: 16px;382  display: inline-flex;383  justify-content: center;384}385.model-row-name {386  font-size: 12.5px;387  color: var(--z-text-primary);388  white-space: nowrap;389  overflow: hidden;390  text-overflow: ellipsis;391}392.model-row-provider {393  font-size: var(--z-font-size-caption);394  color: var(--z-text-tertiary);395}396.model-row-badges {397  display: flex;398  align-items: center;399  gap: 6px;400  margin-left: auto;401  color: var(--z-text-tertiary);402  font-size: var(--z-font-size-caption);403  flex-shrink: 0;404}405.capability-badge {406  font-size: 10px;407}408.model-row .star {409  color: var(--z-text-tertiary);410  font-size: 11px;411}412.model-row .star.active {413  color: var(--z-warning);414}415.badge {416  font-size: 10px;417  padding: 1px 6px;418  border-radius: 999px;419  background: var(--z-surface-secondary);420  color: var(--z-text-secondary);421  white-space: nowrap;422}423.badge.accent {424  background: var(--z-accent-subtle);425  color: var(--z-accent);426}427.badge.warn {428  background: color-mix(in srgb, var(--z-warning) 12%, transparent);429  color: var(--z-warning);430}431432.panel-empty {433  padding: var(--z-space-xl);434  text-align: center;435  color: var(--z-text-tertiary);436  font-size: 12.5px;437}438439.panel-footer {440  display: flex;441  gap: var(--z-space-md);442  padding: var(--z-space-xs) var(--z-space-md);443  border-top: var(--z-hairline) solid var(--z-border);444  color: var(--z-text-tertiary);445  font-size: var(--z-font-size-caption);446}447.panel-footer kbd {448  background: var(--z-surface-secondary);449  border-radius: 4px;450  padding: 0 5px;451  font-size: 10px;452}453454/* ---------- Transcript ---------- */455456.transcript {457  flex: 1;458  overflow-y: auto;459  overflow-x: hidden;460  position: relative;461}462.transcript-column {463  max-width: var(--z-max-message-column);464  margin: 0 auto;465  padding: var(--z-space-md);466  display: flex;467  flex-direction: column;468  gap: var(--z-turn-rhythm);469}470.density-compact .transcript-column {471  gap: 10px;472}473474.turn {475  display: flex;476  gap: var(--z-space-xs);477  animation: message-in var(--z-motion-send);478}479@keyframes message-in {480  from {481    opacity: 0;482    transform: translateY(4px);483  }484  to {485    opacity: 1;486    transform: none;487  }488}489.turn.user {490  justify-content: flex-end;491  padding-left: 60px;492}493.turn.assistant {494  padding-right: 60px;495}496497.avatar {498  width: 26px;499  height: 26px;500  min-width: 26px;501  border-radius: 50%;502  background: var(--z-accent-subtle);503  color: var(--z-accent);504  display: flex;505  align-items: center;506  justify-content: center;507  margin-top: 2px;508}509510.turn-body {511  display: flex;512  flex-direction: column;513  gap: 4px;514  min-width: 0;515  max-width: 100%;516}517518.bubble {519  padding: 10px var(--z-space-sm);520  border-radius: var(--z-radius-medium);521  font-size: var(--z-chat-font-size);522  line-height: var(--z-line-height-body);523  overflow-wrap: break-word;524  min-width: 0;525}526.turn.user .bubble {527  background: var(--z-accent-subtle);528  white-space: pre-wrap;529}530.turn.assistant .bubble {531  background: var(--z-surface);532  border: var(--z-hairline) solid var(--z-border);533}534.bubble .error-note {535  display: flex;536  gap: 6px;537  align-items: flex-start;538  color: var(--z-danger);539  background: color-mix(in srgb, var(--z-danger) 8%, transparent);540  border-radius: var(--z-radius-small);541  padding: var(--z-space-xs);542  font-size: calc(var(--z-chat-font-size) - 1px);543  margin-top: 6px;544}545546.meta-row {547  display: flex;548  align-items: center;549  gap: var(--z-space-xs);550  font-size: var(--z-font-size-caption);551  color: var(--z-text-tertiary);552  opacity: 0;553  transition: opacity var(--z-motion-hover);554  min-height: 18px;555  flex-wrap: wrap;556}557.turn:hover .meta-row,558.meta-row.always {559  opacity: 1;560}561.turn.user .meta-row {562  justify-content: flex-end;563}564.meta-action {565  display: inline-flex;566  align-items: center;567  gap: 3px;568  color: var(--z-text-tertiary);569  border-radius: 4px;570  padding: 1px 4px;571  transition: background var(--z-motion-hover);572  font-size: var(--z-font-size-caption);573}574.meta-action:hover {575  background: var(--z-surface-secondary);576  color: var(--z-text-secondary);577}578579.reasoning-section {580  margin-bottom: 6px;581}582.reasoning-toggle {583  display: inline-flex;584  align-items: center;585  gap: 5px;586  font-size: var(--z-font-size-caption);587  color: var(--z-text-secondary);588}589.reasoning-toggle .chev {590  display: inline-block;591  transition: transform 120ms ease;592  font-size: 8px;593}594.reasoning-toggle .chev.open {595  transform: rotate(90deg);596}597.reasoning-body {598  margin-top: 6px;599  padding: var(--z-space-xs);600  background: var(--z-surface-secondary);601  border-radius: var(--z-radius-small);602  font-family: var(--z-font-mono);603  font-size: calc(var(--z-chat-font-size) - 2px);604  color: var(--z-text-secondary);605  white-space: pre-wrap;606  max-height: 320px;607  overflow-y: auto;608}609610.citations {611  display: flex;612  flex-wrap: wrap;613  gap: 4px;614  margin-top: 8px;615}616.citation-chip {617  display: inline-flex;618  align-items: center;619  gap: 5px;620  padding: 3px 8px;621  border-radius: 999px;622  background: var(--z-surface-secondary);623  font-size: var(--z-font-size-caption);624  color: var(--z-text-secondary);625  max-width: 220px;626}627.citation-chip:hover {628  text-decoration: none;629  background: var(--z-accent-subtle);630}631.citation-chip .num {632  width: 13px;633  height: 13px;634  min-width: 13px;635  border-radius: 50%;636  background: var(--z-accent);637  color: var(--z-on-accent);638  font-size: 9px;639  font-weight: 600;640  display: inline-flex;641  align-items: center;642  justify-content: center;643}644.citation-chip .title {645  white-space: nowrap;646  overflow: hidden;647  text-overflow: ellipsis;648}649650.streaming-caret {651  display: inline-block;652  width: 7px;653  height: 15px;654  border-radius: 3px;655  background: var(--z-accent);656  vertical-align: text-bottom;657  margin-left: 2px;658  animation: caret-blink 1.1s ease-in-out infinite;659}660@keyframes caret-blink {661  0%,662  100% {663    opacity: 1;664  }665  50% {666    opacity: 0.15;667  }668}669670.jump-pill {671  position: absolute;672  bottom: var(--z-space-xs);673  left: 50%;674  transform: translateX(-50%);675  display: flex;676  align-items: center;677  gap: 5px;678  padding: 5px var(--z-space-sm);679  border-radius: 999px;680  background: var(--z-surface);681  border: var(--z-hairline) solid var(--z-border);682  box-shadow: var(--z-shadow-soft);683  font-size: var(--z-font-size-caption);684  color: var(--z-text-secondary);685  z-index: 5;686}687688.variant-switch {689  display: inline-flex;690  align-items: center;691  gap: 4px;692  font-size: var(--z-font-size-caption);693  color: var(--z-text-tertiary);694}695696/* ---------- Markdown ---------- */697698.markdown > *:first-child {699  margin-top: 0;700}701.markdown > *:last-child {702  margin-bottom: 0;703}704.markdown p,705.markdown ul,706.markdown ol,707.markdown blockquote,708.markdown table,709.markdown pre {710  margin: 0 0 12px;711}712.markdown h1,713.markdown h2,714.markdown h3,715.markdown h4,716.markdown h5,717.markdown h6 {718  font-weight: 600;719  margin: 16px 0 8px;720  line-height: 1.3;721}722.markdown h1 {723  font-size: calc(var(--z-chat-font-size) * 1.55);724}725.markdown h2 {726  font-size: calc(var(--z-chat-font-size) * 1.35);727}728.markdown h3 {729  font-size: calc(var(--z-chat-font-size) * 1.2);730}731.markdown h4,732.markdown h5,733.markdown h6 {734  font-size: calc(var(--z-chat-font-size) * 1.05);735}736.markdown blockquote {737  border-left: 3px solid var(--z-accent);738  border-radius: 2px;739  padding-left: 12px;740  color: var(--z-text-secondary);741}742.markdown ul,743.markdown ol {744  padding-left: 24px;745}746.markdown li {747  margin-bottom: 3px;748}749.markdown code:not(pre code) {750  font-size: calc(var(--z-chat-font-size) - 1px);751  background: var(--z-surface-secondary);752  border-radius: 4px;753  padding: 1px 5px;754}755.markdown hr {756  border: none;757  border-top: var(--z-hairline) solid var(--z-border);758  margin: 12px 0;759}760.markdown table {761  border-collapse: collapse;762  border: var(--z-hairline) solid var(--z-border);763  border-radius: var(--z-radius-small);764  overflow: hidden;765  display: block;766  max-width: 100%;767  overflow-x: auto;768  width: fit-content;769}770.markdown th,771.markdown td {772  padding: 8px 12px;773  border: var(--z-hairline) solid var(--z-border);774  font-size: calc(var(--z-chat-font-size) - 0.5px);775  text-align: left;776}777.markdown thead th {778  background: var(--z-surface-secondary);779  font-weight: 600;780}781.markdown tbody tr:nth-child(odd) {782  background: color-mix(in srgb, var(--z-surface-secondary) 40%, transparent);783}784.markdown img {785  max-width: 100%;786  border-radius: var(--z-radius-small);787}788.markdown input[type='checkbox'] {789  accent-color: var(--z-accent);790  margin-right: 4px;791}792793/* Code blocks */794.code-block {795  background: var(--z-surface-secondary);796  border-radius: var(--z-radius-medium);797  overflow: hidden;798}799.code-block-header {800  display: flex;801  align-items: center;802  justify-content: space-between;803  padding: 8px 12px 0;804  font-size: var(--z-font-size-caption);805  color: var(--z-text-secondary);806  text-transform: uppercase;807  letter-spacing: 0.04em;808}809.code-block-actions {810  display: flex;811  gap: 4px;812  opacity: 0;813  transition: opacity var(--z-motion-hover);814}815.code-block:hover .code-block-actions,816.code-block-actions.confirming {817  opacity: 1;818}819.code-block-copy {820  font-size: var(--z-font-size-caption);821  color: var(--z-text-secondary);822  text-transform: none;823  letter-spacing: normal;824  padding: 1px 6px;825  border-radius: 4px;826}827.code-block-copy:hover {828  background: color-mix(in srgb, var(--z-border) 50%, transparent);829}830.code-block-copy.ok {831  color: var(--z-success);832}833.code-block pre {834  margin: 0;835  padding: 4px 12px 8px;836  overflow-x: auto;837  font-size: calc(var(--z-chat-font-size) - 1px);838  line-height: 1.5;839}840.code-block pre.wrap {841  white-space: pre-wrap;842  overflow-wrap: break-word;843}844.code-block code {845  background: none;846  padding: 0;847  font-size: inherit;848}849850/* highlight.js theme mapped to Zyquo syntax tokens */851.hljs-keyword,852.hljs-selector-tag,853.hljs-built_in,854.hljs-tag {855  color: var(--z-code-keyword);856}857.hljs-string,858.hljs-regexp,859.hljs-addition {860  color: var(--z-code-string);861}862.hljs-comment,863.hljs-quote,864.hljs-deletion,865.hljs-meta {866  color: var(--z-code-comment);867}868.hljs-number,869.hljs-literal,870.hljs-symbol {871  color: var(--z-code-number);872}873.hljs-type,874.hljs-class .hljs-title,875.hljs-title.class_ {876  color: var(--z-code-type);877}878.hljs-function .hljs-title,879.hljs-title.function_ {880  color: var(--z-code-function);881}882.hljs-attr,883.hljs-property,884.hljs-variable {885  color: var(--z-code-property);886}887.hljs-attribute,888.hljs-name {889  color: var(--z-code-attribute);890}891892/* ---------- Input bar ---------- */893894.input-dock {895  padding: 0 var(--z-space-sm) var(--z-space-sm);896}897.input-bar {898  max-width: var(--z-max-message-column);899  margin: 0 auto;900  background: var(--z-surface);901  border: var(--z-hairline) solid var(--z-border);902  border-radius: var(--z-radius-large);903  box-shadow: var(--z-shadow-soft);904  padding: var(--z-space-sm);905  display: flex;906  flex-direction: column;907  gap: var(--z-space-xs);908}909.input-bar.drag-target {910  border: 1.5px dashed var(--z-accent);911}912.attachment-strip {913  display: flex;914  gap: var(--z-space-xs);915  overflow-x: auto;916}917.attachment-thumb {918  position: relative;919  width: var(--z-attachment-thumb);920  height: var(--z-attachment-thumb);921  min-width: var(--z-attachment-thumb);922  border-radius: var(--z-radius-small);923  overflow: hidden;924  background: var(--z-surface-secondary);925  display: flex;926  align-items: center;927  justify-content: center;928  font-size: 9px;929  color: var(--z-text-secondary);930  text-align: center;931  padding: 2px;932}933.attachment-thumb img {934  width: 100%;935  height: 100%;936  object-fit: cover;937}938.attachment-remove {939  position: absolute;940  top: 2px;941  right: 2px;942  width: 16px;943  height: 16px;944  border-radius: 50%;945  background: var(--z-text-primary);946  color: var(--z-background);947  font-size: 10px;948  line-height: 1;949  display: flex;950  align-items: center;951  justify-content: center;952}953.input-row {954  display: flex;955  align-items: flex-end;956  gap: var(--z-space-xs);957}958.input-editor {959  flex: 1;960  border: none;961  outline: none;962  background: transparent;963  resize: none;964  font-size: var(--z-chat-font-size);965  line-height: var(--z-line-height-body);966  max-height: 200px;967  min-height: 22px;968  padding: 2px 0;969  color: var(--z-text-primary);970}971.send-button {972  width: 28px;973  height: 28px;974  min-width: 28px;975  border-radius: 50%;976  background: var(--z-accent);977  color: var(--z-on-accent);978  display: flex;979  align-items: center;980  justify-content: center;981  transition: transform var(--z-motion-hover), background var(--z-motion-hover);982}983.send-button:disabled {984  background: var(--z-surface-secondary);985  color: var(--z-text-tertiary);986  cursor: default;987}988.send-button.stop {989  background: var(--z-danger);990}991.send-button:active:not(:disabled) {992  transform: scale(var(--z-motion-pressed-scale));993}994.input-hud {995  display: flex;996  align-items: center;997  gap: var(--z-space-xs);998  font-size: var(--z-font-size-caption);999  color: var(--z-text-tertiary);1000  flex-wrap: wrap;1001}1002.context-bar {1003  flex: 1;1004  min-width: 60px;1005  max-width: 160px;1006  height: 3px;1007  border-radius: 2px;1008  background: var(--z-surface-secondary);1009  overflow: hidden;1010}1011.context-bar-fill {1012  height: 100%;1013  background: var(--z-accent);1014  border-radius: 2px;1015  transition: width 300ms ease;1016}1017.context-bar-fill.warn {1018  background: var(--z-warning);1019}10201021/* ---------- Empty state ---------- */10221023.empty-state {1024  flex: 1;1025  display: flex;1026  flex-direction: column;1027  align-items: center;1028  justify-content: center;1029  gap: var(--z-space-lg);1030  padding: var(--z-space-xl);1031  overflow-y: auto;1032}1033.empty-title {1034  font-size: var(--z-font-size-title);1035  font-weight: 600;1036  margin: 0;1037}1038.empty-subtitle {1039  color: var(--z-text-secondary);1040  margin: 0;1041}1042.suggestion-grid {1043  display: grid;1044  grid-template-columns: 1fr 1fr;1045  gap: var(--z-space-sm);1046  max-width: 460px;1047  width: 100%;1048}1049.suggestion-card {1050  display: flex;1051  align-items: center;1052  gap: var(--z-space-xs);1053  text-align: left;1054  padding: var(--z-space-sm);1055  background: var(--z-surface);1056  border: var(--z-hairline) solid var(--z-border);1057  border-radius: var(--z-radius-medium);1058  font-size: 13px;1059  transition: transform var(--z-motion-hover), background var(--z-motion-hover);1060}1061.suggestion-card:hover {1062  background: var(--z-surface-secondary);1063}1064.suggestion-card:active {1065  transform: scale(var(--z-motion-pressed-scale));1066}1067.suggestion-card .glyph {1068  color: var(--z-accent);1069  width: 20px;1070  display: inline-flex;1071  justify-content: center;1072}10731074/* ---------- First run ---------- */10751076.first-run-note {1077  max-width: 560px;1078  margin: 0 auto;1079  background: var(--z-surface);1080  border: var(--z-hairline) solid var(--z-border);1081  border-radius: var(--z-radius-medium);1082  padding: var(--z-space-md);1083  font-size: 12.5px;1084  color: var(--z-text-secondary);1085  display: flex;1086  flex-direction: column;1087  gap: var(--z-space-xs);1088}1089.first-run-note strong {1090  color: var(--z-text-primary);1091}1092.first-run-actions {1093  display: flex;1094  gap: var(--z-space-xs);1095  justify-content: flex-end;1096}1097.button {1098  padding: 6px 14px;1099  border-radius: var(--z-radius-small);1100  font-size: 12.5px;1101  font-weight: 500;1102  background: var(--z-surface-secondary);1103  color: var(--z-text-primary);1104  transition: transform var(--z-motion-hover);1105}1106.button.primary {1107  background: var(--z-accent);1108  color: var(--z-on-accent);1109}1110.button.danger {1111  background: color-mix(in srgb, var(--z-danger) 10%, transparent);1112  color: var(--z-danger);1113}1114.button:active {1115  transform: scale(var(--z-motion-pressed-scale));1116}1117.button:disabled {1118  opacity: 0.5;1119  cursor: default;1120}11211122/* ---------- Settings ---------- */11231124.settings-panel {1125  width: 760px;1126  max-width: 100%;1127  height: 560px;1128  max-height: 85vh;1129}1130.settings-body {1131  display: flex;1132  flex: 1;1133  min-height: 0;1134}1135.settings-tabs {1136  width: 168px;1137  min-width: 168px;1138  border-right: var(--z-hairline) solid var(--z-border);1139  padding: var(--z-space-xs);1140  display: flex;1141  flex-direction: column;1142  gap: 2px;1143}1144.settings-tab {1145  text-align: left;1146  padding: 6px 10px;1147  border-radius: var(--z-radius-small);1148  font-size: 13px;1149  color: var(--z-text-secondary);1150  transition: background var(--z-motion-hover);1151}1152.settings-tab:hover {1153  background: var(--z-surface-secondary);1154}1155.settings-tab.active {1156  background: var(--z-accent-subtle);1157  color: var(--z-text-primary);1158}1159.settings-content {1160  flex: 1;1161  overflow-y: auto;1162  padding: var(--z-space-md);1163  min-width: 0;1164}1165.settings-content h3 {1166  margin: 0 0 var(--z-space-sm);1167  font-size: 14px;1168}1169.settings-row {1170  display: flex;1171  align-items: center;1172  gap: var(--z-space-xs);1173  padding: var(--z-space-xs) 0;1174  border-bottom: var(--z-hairline) solid var(--z-border);1175  flex-wrap: wrap;1176}1177.settings-row:last-child {1178  border-bottom: none;1179}1180.provider-name {1181  display: flex;1182  align-items: center;1183  gap: 6px;1184  font-size: 13px;1185  font-weight: 500;1186  width: 140px;1187  min-width: 140px;1188}1189.status-dot {1190  width: 8px;1191  height: 8px;1192  border-radius: 50%;1193  background: var(--z-border);1194}1195.status-dot.ok {1196  background: var(--z-success);1197}1198.status-dot.fail {1199  background: var(--z-danger);1200}1201.status-dot.saved {1202  background: var(--z-text-tertiary);1203}1204.key-input {1205  flex: 1;1206  min-width: 160px;1207  font-family: var(--z-font-mono);1208  font-size: 11px;1209  padding: 5px 8px;1210  border: var(--z-hairline) solid var(--z-border);1211  border-radius: var(--z-radius-small);1212  background: var(--z-background);1213  outline: none;1214}1215.key-input:focus {1216  border-color: var(--z-accent);1217}1218.settings-sub {1219  font-size: var(--z-font-size-caption);1220  color: var(--z-text-tertiary);1221  width: 100%;1222}1223.settings-sub.ok {1224  color: var(--z-success);1225}1226.settings-sub.fail {1227  color: var(--z-danger);1228}1229.select,1230.number-input,1231.text-input {1232  padding: 5px 8px;1233  border: var(--z-hairline) solid var(--z-border);1234  border-radius: var(--z-radius-small);1235  background: var(--z-background);1236  font-size: 12.5px;1237  outline: none;1238}1239.text-input:focus,1240.number-input:focus {1241  border-color: var(--z-accent);1242}1243.settings-section {1244  margin-bottom: var(--z-space-lg);1245}1246.settings-note {1247  font-size: var(--z-font-size-caption);1248  color: var(--z-text-tertiary);1249  line-height: 1.5;1250}1251textarea.text-input {1252  width: 100%;1253  resize: vertical;1254  font-family: inherit;1255}12561257/* ---------- Toasts ---------- */12581259.toasts {1260  position: fixed;1261  bottom: var(--z-space-md);1262  right: var(--z-space-md);1263  display: flex;1264  flex-direction: column;1265  gap: var(--z-space-xs);1266  z-index: 200;1267  max-width: min(380px, calc(100vw - 32px));1268}1269.toast {1270  display: flex;1271  align-items: center;1272  gap: var(--z-space-xs);1273  background: var(--z-surface);1274  border: var(--z-hairline) solid var(--z-border);1275  border-left: 3px solid var(--z-accent);1276  border-radius: var(--z-radius-medium);1277  box-shadow: var(--z-shadow-soft);1278  padding: var(--z-space-xs) var(--z-space-sm);1279  font-size: 12.5px;1280  animation: message-in var(--z-motion-send);1281}1282.toast.error {1283  border-left-color: var(--z-danger);1284}1285.toast.success {1286  border-left-color: var(--z-success);1287}1288.toast .undo {1289  color: var(--z-accent);1290  font-weight: 500;1291}12921293/* ---------- Drawer / responsive ---------- */12941295.drawer-scrim {1296  display: none;1297}1298.menu-button {1299  display: none;1300}13011302@media (max-width: 768px) {1303  .sidebar {1304    position: fixed;1305    left: 0;1306    top: 0;1307    bottom: 0;1308    z-index: 60;1309    transform: translateX(-100%);1310    transition: transform 200ms ease;1311    box-shadow: none;1312    width: min(300px, 85vw);1313    min-width: 0;1314  }1315  .sidebar.open {1316    transform: none;1317    box-shadow: var(--z-shadow-panel);1318  }1319  .drawer-scrim {1320    display: block;1321    position: fixed;1322    inset: 0;1323    background: rgba(10, 12, 20, 0.3);1324    z-index: 50;1325  }1326  .menu-button {1327    display: inline-flex;1328  }1329  .turn.user {1330    padding-left: 24px;1331  }1332  .turn.assistant {1333    padding-right: 12px;1334  }1335  .avatar {1336    display: none;1337  }1338  .overlay {1339    padding: 4vh var(--z-space-xs) var(--z-space-xs);1340  }1341  .settings-body {1342    flex-direction: column;1343  }1344  .settings-tabs {1345    width: 100%;1346    min-width: 0;1347    flex-direction: row;1348    overflow-x: auto;1349    border-right: none;1350    border-bottom: var(--z-hairline) solid var(--z-border);1351  }1352  .settings-panel {1353    height: 90vh;1354  }1355  .icon-button,1356  .meta-action,1357  .conversation-row {1358    min-height: 32px;1359  }1360  .chat-title {1361    max-width: 120px;1362  }1363}13641365/* Focus mode hides the sidebar on desktop */1366.focus-mode .sidebar {1367  display: none;1368}1369@media (max-width: 768px) {1370  .focus-mode .sidebar {1371    display: flex;1372  }1373}1374