/* AI Projects extends Sibyla's restrained operational visual language: one continuous workbench,
   explicit state, and context kept beside the transcript instead of hidden in dialogs. */
.ai-brandmark { width: 34px; border-radius: var(--sib-radius-sm); font-size: 11px; letter-spacing: -.02em; }
.ai-page-head, .ai-chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sib-sp-4); }
.ai-page-head .btn { flex: 0 0 auto; }
.ai-title-line { display: flex; align-items: center; gap: var(--sib-sp-3); }
.ai-title-line h2 { margin: 0; }
.ai-project-index { display: grid; gap: var(--sib-sp-4); }
.ai-project-row { display: grid; grid-template-columns: minmax(16rem, 1.15fr) auto minmax(15rem, .85fr); gap: var(--sib-sp-5); align-items: start; margin: 0; }
.ai-project-copy p { max-width: 68ch; margin: var(--sib-sp-2) 0; color: var(--sib-text-body); }
.ai-meta { display: flex; gap: var(--sib-sp-3); flex-wrap: wrap; color: var(--sib-muted); font-size: var(--sib-fs-sm); }
.ai-meta span + span::before { content: "·"; margin-right: var(--sib-sp-3); }
.ai-project-action { padding-top: 2px; }
.ai-recent { border-left: 1px solid var(--sib-line); padding-left: var(--sib-sp-4); }
.ai-recent h3 { margin: 0 0 var(--sib-sp-2); font-size: var(--sib-fs-body); }
.ai-session-line { display: flex; justify-content: space-between; gap: var(--sib-sp-3); padding: 6px 0; color: var(--sib-text-body); }
.ai-session-line:hover span { color: var(--sib-brand-dark); }
.ai-muted { color: var(--sib-muted); }
.ai-empty { max-width: 44rem; }
.ai-empty h2 { margin-top: 0; }
.ai-project-facts { display: flex; flex-wrap: wrap; gap: var(--sib-sp-2) var(--sib-sp-5); padding: var(--sib-sp-3) 0 var(--sib-sp-5); color: var(--sib-muted); }
.ai-project-facts strong { color: var(--sib-text-label); margin-right: var(--sib-sp-1); }
.ai-session-list h2 { margin-top: 0; }
.ai-session-list h3 { color: var(--sib-muted); font-size: var(--sib-fs-sm); text-transform: uppercase; letter-spacing: .04em; }
.ai-session-row { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(8rem, .45fr) auto 8rem; gap: var(--sib-sp-3); align-items: center; padding: 10px var(--sib-sp-2); border-top: 1px solid var(--sib-line); color: var(--sib-text-body); }
.ai-session-row:hover { background: var(--sib-brand-tint-bg); text-decoration: none; }
.ai-session-row time { color: var(--sib-muted); text-align: right; font-size: var(--sib-fs-sm); }
.ai-session-title { font-weight: var(--sib-fw-semibold); color: var(--sib-ink); }
.ai-new-session { max-width: 42rem; }
.ai-worktree-origin { display: grid; grid-template-columns: max-content 1fr; gap: 3px var(--sib-sp-3); padding: var(--sib-sp-3) 0 var(--sib-sp-4); margin-bottom: var(--sib-sp-4); border-bottom: 1px solid var(--sib-line); }
.ai-worktree-origin > span { color: var(--sib-muted); font-size: var(--sib-fs-sm); font-weight: var(--sib-fw-semibold); }
.ai-worktree-origin p, .ai-worktree-origin small { grid-column: 1 / -1; margin: var(--sib-sp-1) 0 0; }
.ai-worktree-origin p { color: var(--sib-warning); }
.ai-readonly-fields, .ai-context dl { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sib-sp-2) var(--sib-sp-3); margin: 0 0 var(--sib-sp-5); }
.ai-readonly-fields dt, .ai-context dt { color: var(--sib-muted); font-size: var(--sib-fs-sm); font-weight: var(--sib-fw-semibold); }
.ai-readonly-fields dd, .ai-context dd { margin: 0; min-width: 0; }
.ai-readonly-fields dd small, .ai-context dd small { display: block; overflow-wrap: anywhere; margin-top: 2px; }
.ai-project-picker { border: 1px solid var(--sib-line); border-radius: var(--sib-radius); padding: var(--sib-sp-3); }
.ai-project-picker legend { color: var(--sib-text-label); font-size: var(--sib-fs-sm); font-weight: var(--sib-fw-semibold); padding: 0 var(--sib-sp-1); }
.ai-check-row { display: grid !important; grid-template-columns: auto 1fr; align-items: start; padding: var(--sib-sp-2); }
.ai-check-row span small { display: block; font-weight: normal; overflow-wrap: anywhere; }
.ai-form-actions { display: flex; gap: var(--sib-sp-2); align-items: center; }
.ai-chat-head { margin-bottom: var(--sib-sp-4); }
.ai-chat-head h1 { margin: var(--sib-sp-1) 0 0; font-size: var(--sib-fs-h2); }
.ai-chat-layout { display: grid; grid-template-columns: minmax(30rem, 1fr) minmax(17rem, 21rem); gap: var(--sib-sp-4); align-items: start; min-width: 0; max-width: 100%; }
.ai-transcript { padding: 0; overflow: hidden; margin: 0; min-width: 0; max-width: 100%; box-sizing: border-box; }
.ai-message-list { min-height: 28rem; max-height: calc(100vh - 22rem); overflow-y: auto; padding: var(--sib-sp-5); display: flex; flex-direction: column; gap: var(--sib-sp-4); }
.ai-chat-empty { margin: auto; max-width: 34rem; text-align: center; color: var(--sib-muted); }
.ai-chat-empty h2 { color: var(--sib-ink); }
.ai-message { max-width: min(46rem, 88%); position: relative; }
.ai-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-message time { display: block; color: var(--sib-muted); font-size: var(--sib-fs-xs); margin-top: 4px; }
.ai-message-user { align-self: flex-end; box-sizing: border-box; background: var(--sib-brand-tint-bg); border-radius: var(--sib-radius) var(--sib-radius) 3px var(--sib-radius); padding: var(--sib-sp-3) var(--sib-sp-4); }
.ai-message-user time { text-align: right; }
.ai-message-assistant { align-self: flex-start; }
.ai-message-system { align-self: stretch; max-width: none; padding: var(--sib-sp-3); border: 1px solid var(--sib-warning-border); border-radius: var(--sib-radius); background: var(--sib-warning-bg); color: var(--sib-warning); }
.ai-message-event, .ai-live-event { display: flex; gap: var(--sib-sp-2); align-items: baseline; max-width: 100%; color: var(--sib-muted); }
.ai-message-event code, .ai-live-event code { white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-markdown { line-height: 1.6; overflow-wrap: anywhere; }
.ai-markdown > :first-child { margin-top: 0; }
.ai-markdown > :last-child { margin-bottom: 0; }
.ai-markdown pre { overflow: auto; background: var(--sib-surface-track); padding: var(--sib-sp-3); border-radius: var(--sib-radius-sm); }
.ai-markdown code { font-size: .9em; }
.ai-markdown blockquote { margin-left: 0; padding-left: var(--sib-sp-4); border-left: 1px solid var(--sib-line-strong); color: var(--sib-muted); }
.ai-thinking { background: var(--sib-surface-track); border-radius: var(--sib-radius-sm); padding: var(--sib-sp-2) var(--sib-sp-3); color: var(--sib-muted); font-size: var(--sib-fs-sm); }
.ai-thinking summary { cursor: pointer; font-weight: var(--sib-fw-semibold); }
.ai-thinking p { white-space: pre-wrap; }
.ai-stream-cursor { display: inline-block; width: 7px; height: 1em; background: var(--sib-brand); vertical-align: text-bottom; animation: ai-cursor 1s steps(2, end) infinite; }
@keyframes ai-cursor { 50% { opacity: .2; } }
.ai-composer { border-top: 1px solid var(--sib-line); padding: var(--sib-sp-3); background: var(--sib-surface-tint); min-width: 0; box-sizing: border-box; }
.ai-validation-strip { border-top: 1px solid var(--sib-line); padding: var(--sib-sp-3) var(--sib-sp-4); background: var(--sib-surface-track); }
.ai-validation-summary { display: flex; align-items: center; gap: var(--sib-sp-3); }
.ai-validation-summary > div { display: grid; gap: 2px; }
.ai-validation-summary small { overflow-wrap: anywhere; }
.ai-preview-indicator { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--sib-muted-3); }
.ai-preview-indicator.changed { background: var(--sib-brand); }
.ai-preview-indicator.ready { background: var(--sib-success); }
.ai-preview-indicator.failed { background: var(--sib-danger); }
.ai-preview-indicator.working { background: var(--sib-attention); animation: ai-preview-pulse 1.4s ease-out infinite; }
@keyframes ai-preview-pulse { 50% { box-shadow: 0 2px 8px var(--sib-brand-a22); } }
.ai-validation-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sib-sp-2); margin-top: var(--sib-sp-3); }
.ai-change-list { display: grid; gap: 3px; max-height: 11rem; overflow: auto; margin-top: var(--sib-sp-3); padding: var(--sib-sp-2) 0; border-top: 1px solid var(--sib-line); }
.ai-change-list code { overflow-wrap: anywhere; color: var(--sib-text-body); }
.ai-preview-output { margin-top: var(--sib-sp-3); border-top: 1px solid var(--sib-line); padding-top: var(--sib-sp-2); }
.ai-preview-output summary { cursor: pointer; font-size: var(--sib-fs-sm); font-weight: var(--sib-fw-semibold); color: var(--sib-text-label); }
.ai-preview-output summary.success { color: var(--sib-success); }
.ai-preview-output summary.danger { color: var(--sib-danger); }
.ai-preview-output pre { max-height: 14rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--sib-sp-2) 0 0; padding: var(--sib-sp-2); background: var(--sib-surface); border-radius: var(--sib-radius-sm); font-size: var(--sib-fs-xs); }
.ai-composer textarea { width: 100%; min-height: 5rem; resize: vertical; background: var(--sib-surface); }
.ai-composer-actions { display: flex; align-items: center; gap: var(--sib-sp-3); margin-top: var(--sib-sp-2); }
.ai-composer-actions small { margin-right: auto; }
.ai-composer-notice { margin: 0 0 var(--sib-sp-2); color: var(--sib-warning); font-size: var(--sib-fs-sm); }
button.danger { color: var(--sib-danger); border-color: var(--sib-danger-border); }
button.danger:hover { background: var(--sib-danger-bg); }
.ai-context { position: sticky; top: calc(var(--sib-topbar-h) + var(--sib-sp-4)); margin: 0; }
.ai-context h2 { margin-top: 0; text-transform: uppercase; letter-spacing: .04em; font-size: var(--sib-fs-sm); color: var(--sib-muted); }
.ai-context-critical { display: grid; gap: 3px; padding-bottom: var(--sib-sp-4); margin-bottom: var(--sib-sp-4); border-bottom: 1px solid var(--sib-line); }
.ai-context-critical > span { color: var(--sib-muted); font-size: var(--sib-fs-sm); font-weight: var(--sib-fw-semibold); }
.ai-context-add { padding: var(--sib-sp-3) 0; border-top: 1px solid var(--sib-line); }
.ai-context-add > label { display: block; color: var(--sib-text-label); font-size: var(--sib-fs-sm); font-weight: var(--sib-fw-semibold); margin-bottom: 4px; }
.ai-context-add > div { display: flex; gap: var(--sib-sp-1); }
.ai-context-add select { min-width: 0; flex: 1; }
.ai-run-facts { padding-top: var(--sib-sp-4); border-top: 1px solid var(--sib-line); }
.ai-run-facts code { overflow-wrap: anywhere; }
.ai-archive-button { width: 100%; color: var(--sib-danger); }
.ai-archive-confirm { padding: var(--sib-sp-3); background: var(--sib-danger-bg); border: 1px solid var(--sib-danger-border); border-radius: var(--sib-radius); }
.ai-archive-confirm p { margin-top: 0; }
.ai-archive-confirm > div { display: flex; flex-wrap: wrap; gap: var(--sib-sp-2); }
.ai-nav-project summary small { text-transform: none; letter-spacing: normal; font-weight: normal; }
.sib-sidenav .ai-nav-session span, .sib-sidenav .ai-nav-session small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sib-sidenav .ai-nav-session small { font-size: var(--sib-fs-xs); color: var(--sib-muted); }
.sib-nav-separator { border-top: 1px solid var(--sib-line); margin: var(--sib-sp-4) var(--sib-sp-3); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .ai-stream-cursor, .ai-preview-indicator.working { animation: none; } }
@media (max-width: 1120px) {
  .ai-project-row { grid-template-columns: 1fr auto; }
  .ai-recent { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--sib-line); padding: var(--sib-sp-3) 0 0; }
  .ai-chat-layout { grid-template-columns: 1fr; }
  .ai-context { position: static; }
}
@media (max-width: 720px) {
  .sib-content, .sib-container { width: 100%; max-width: 100vw; min-width: 0; box-sizing: border-box; overflow-x: hidden; }
  .sib-topbar-right { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 2px; }
  .sib-sidenav.ai-sidenav { width: 100%; max-width: 100vw; min-width: 0; box-sizing: border-box; flex-wrap: nowrap; overflow-x: auto; align-items: center; }
  .sib-sidenav.ai-sidenav > *, .sib-sidenav.ai-sidenav .sib-nav-section { flex: 0 0 auto; }
  .sib-sidenav.ai-sidenav .sib-nav-group { margin: var(--sib-sp-1); }
  .sib-sidenav.ai-sidenav .sib-nav-separator { height: 1.5rem; border-top: 0; border-left: 1px solid var(--sib-line); margin: 0 var(--sib-sp-1); }
  .ai-page-head, .ai-chat-head { flex-direction: column; }
  .ai-project-row { grid-template-columns: 1fr; }
  .ai-project-action, .ai-recent { grid-column: auto; }
  .ai-session-row { grid-template-columns: 1fr auto; }
  .ai-session-row > :nth-child(2), .ai-session-row time { grid-column: 1; }
  .ai-session-row .sib-chip { grid-column: 2; grid-row: 1; }
  .ai-chat-layout { display: block; }
  .ai-transcript { margin-bottom: var(--sib-sp-4); }
  .ai-message-list { min-height: 22rem; max-height: none; }
  .ai-message { max-width: 94%; }
  .ai-composer-actions { align-items: flex-end; }
}