/* Blur AI workspace -------------------------------------------------------
   A structural layer for the AI tab only. It keeps the existing IDs and
   handlers intact while giving the workspace a more intentional rail,
   reading column, and composer rhythm.
*/

.ai-app {
  --ai-rail-width: 248px;
  background: var(--bg);
}

.ai-sidebar {
  flex: 0 0 var(--ai-rail-width);
  width: var(--ai-rail-width);
  min-width: var(--ai-rail-width);
  padding: 22px 15px 16px;
  border-right: 1px solid var(--border);
  background: var(--sidebar);
}

.ai-sidebar-brand {
  display: grid;
  gap: 5px;
  min-height: 42px;
  padding: 0 9px 18px;
  border-bottom: 1px solid var(--border);
}

.ai-sidebar-eyebrow {
  color: var(--accent);
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ai-sidebar-brand strong {
  color: var(--text-primary);
  font: 500 16px/1.15 var(--font-display);
}

.ai-sidebar-nav {
  gap: 4px;
  padding: 17px 0 16px;
  border-bottom: 1px solid var(--border);
}

.ai-sidebar-nav-item {
  min-height: 37px;
  gap: 10px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.ai-sidebar-nav-item:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.ai-sidebar-nav-item.active {
  color: var(--text-primary);
  background: var(--surface-selected);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

.ai-sidebar-nav-item.active svg { color: var(--accent); }

.ai-sidebar-search {
  display: flex;
  align-items: center;
  height: 34px;
  gap: 8px;
  margin: 16px 2px 7px;
  padding: 0 9px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  background: var(--surface);
  transition: border-color var(--speed) var(--ease-standard), background var(--speed) var(--ease-standard);
}

.ai-sidebar-search:focus-within {
  border-color: var(--accent);
  background: var(--surface-selected);
  box-shadow: var(--focus-ring);
}

.ai-sidebar-search svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.ai-sidebar-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--text-primary);
  background: transparent;
  font: 500 var(--text-xs)/1 var(--font-body);
}

.ai-sidebar-search input::placeholder { color: var(--text-tertiary); }

.ai-sidebar-section-label {
  min-height: 29px;
  padding: 12px 9px 5px;
  color: var(--text-tertiary);
  font-size: 9px;
  letter-spacing: .14em;
}

.ai-sidebar-list { padding: 0 1px; }

.ai-sidebar-item {
  min-height: 39px;
  gap: 8px;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
}

.ai-sidebar-item:hover { background: var(--surface-hover); }

.ai-sidebar-item.active {
  background: var(--surface-selected);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

.ai-sidebar-item.active .ai-sidebar-item-copy strong { color: var(--text-primary); }

.ai-sidebar-item-copy strong { font-size: 12px; font-weight: 500; }

.ai-sidebar-item-del {
  border-radius: var(--radius-sm);
}

.ai-sidebar-bottom {
  padding: 15px 1px 0;
  border-top: 1px solid var(--border);
}

.ai-usage-card {
  padding: 11px 10px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.ai-usage-track { height: 4px; border-radius: 2px; }

.ai-main { background: var(--bg); }

.ai-chat-header {
  position: relative;
  min-height: 62px;
  gap: 12px;
  padding: 0 clamp(24px, 5vw, 56px);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.ai-header-copy { gap: 5px; }

.ai-header-kicker { color: var(--accent); letter-spacing: .13em; }

.ai-header-copy h1 {
  font-size: 16px;
  font-weight: 500;
}

.ai-header-status { color: var(--text-tertiary); font-size: 9px; }

.ai-messages {
  gap: 30px;
  padding: 30px clamp(24px, 7vw, 120px) 174px;
}

.ai-empty {
  position: relative;
  inset: auto;
  display: grid;
  width: min(780px, 100%);
  margin: auto;
  place-content: center;
  padding: 32px 0 20px;
  text-align: left;
}

.ai-empty-mark,
.ai-empty > p,
.ai-empty-note,
.ai-suggest-grid { display: initial; }

.ai-empty-mark {
  margin-bottom: 13px;
  color: var(--accent);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .14em;
}

.ai-empty h2 {
  max-width: 560px;
  font-size: clamp(30px, 4vw, 43px);
  font-weight: 500;
  line-height: 1.05;
}

.ai-empty > p {
  max-width: 510px;
  margin-top: 13px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.ai-suggest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 640px;
  margin-top: 27px;
}

.ai-suggest-card {
  display: flex;
  align-items: flex-start;
  min-height: 65px;
  gap: 11px;
  padding: 12px 13px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--surface);
  text-align: left;
  transition: border-color var(--speed) var(--ease-standard), background var(--speed) var(--ease-standard), transform var(--speed) var(--ease-standard);
}

.ai-suggest-card:hover {
  border-color: var(--border-emphasis);
  color: var(--text-primary);
  background: var(--surface-selected);
  transform: translateY(-1px);
}

.ai-suggest-index {
  color: var(--accent);
  font: 500 10px/1.2 var(--font-mono);
}

.ai-suggest-card span:last-child { display: grid; gap: 4px; }

.ai-suggest-card strong { color: inherit; font-size: var(--text-sm); font-weight: 500; }

.ai-suggest-card small { color: var(--text-tertiary); font-size: 10px; line-height: 1.35; }

.ai-empty-note {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 640px;
  margin-top: 25px;
  color: var(--text-tertiary);
  font: 500 9px/1.3 var(--font-mono);
}

.ai-empty-note-rule { width: 28px; height: 1px; background: var(--border-emphasis); }

.ai-msg { width: min(100%, 800px); }

.ai-msg.user .ai-msg-content {
  max-width: min(76%, 620px);
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-selected);
}

.ai-msg-content { font-size: 14px; line-height: 1.7; }

.ai-composer-wrap {
  right: 0;
  bottom: 20px;
  padding: 0 clamp(24px, 7vw, 120px);
}

.ai-main:has(.ai-empty) .ai-composer-wrap {
  top: auto;
  bottom: 20px;
  transform: none;
}

.ai-composer {
  width: min(100%, 800px);
  min-height: 103px;
  padding: 13px 13px 10px;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.ai-composer:focus-within { background: var(--surface-selected); }

.ai-composer textarea { min-height: 42px; font-size: 13px; }

.ai-composer-bottom {
  gap: 8px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

.ai-composer-controls { gap: 5px; }

.ai-composer-tool,
.ai-model-selector {
  height: 29px;
  min-height: 29px;
  border-radius: var(--radius-sm);
}

.ai-composer-tool { padding: 0 9px; }

.ai-composer-tool.active { box-shadow: inset 0 0 0 1px var(--accent-dim); }

.ai-model-selector {
  max-width: 230px;
  border-color: var(--border-subtle);
  background: transparent;
}

.ai-model-selector:hover,
.ai-model-selector.active { background: var(--surface-hover); }

.ai-send {
  width: 31px;
  height: 31px;
  border-radius: var(--radius-sm);
}

.ai-composer-footnote { width: min(100%, 800px); margin-top: 7px; }

/* Model catalog follows the same reading width and row rhythm. */
.ai-models-page {
  padding: 36px clamp(24px, 5vw, 56px) 30px;
  background: var(--bg);
}

.ai-models-heading { width: min(100%, 980px); margin: 0 auto 18px; }

.ai-models-heading h2 { font-size: clamp(28px, 4vw, 40px); }

.ai-models-search,
.ai-models-table,
.ai-cowork-popover,
.ai-model-dropdown { border-radius: var(--radius-md); }

.ai-models-search { width: min(100%, 980px); margin: 0 auto; }

.ai-model-filters { width: min(100%, 980px); margin: 12px auto 16px; }

.ai-model-filter { border-radius: var(--radius-sm); }

.ai-models-table { width: min(100%, 980px); margin: 0 auto; }

@media (max-width: 780px) {
  .ai-sidebar { width: min(280px, calc(100% - 42px)); min-width: min(280px, calc(100% - 42px)); }
  .ai-chat-header { min-height: 58px; padding: 0 16px; }
  .ai-messages { gap: 24px; padding: 24px 16px 160px; }
  .ai-empty { padding: 20px 0 12px; }
  .ai-empty h2 { font-size: 31px; }
  .ai-suggest-grid { grid-template-columns: 1fr; margin-top: 21px; }
  .ai-composer-wrap { bottom: 12px; padding: 0 14px; }
  .ai-main:has(.ai-empty) .ai-composer-wrap { bottom: 12px; }
  .ai-composer { min-height: 98px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-suggest-card { transition: none; }
}