/* AI: chats on the left behind one thin line, the conversation in the middle, a floating input bar. Black and white, round, no gradients. */
.ai { box-sizing: border-box; display: grid; grid-template-columns: 15rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: var(--s-4); height: 100%; } /* fills the screen: the view is .is-fill, so only the conversation scrolls */
.ai-gate { grid-column: 1 / -1; max-height: 100%; overflow-y: auto; display: grid; justify-items: center; gap: var(--s-4); max-width: 30rem; margin: 8vh auto 0; text-align: center; }
.ai-gate h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); }
.ai-gate p, .ai-gate ul { margin: 0; color: var(--muted); }
.ai-gate ul { display: grid; gap: var(--s-2); padding: 0; list-style: none; text-align: left; }
.ai-gate li::before { content: "•"; margin-right: var(--s-2); color: var(--white); }
.ai-gate .consent-check { text-align: left; }
.ai-gate-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.ai-gate .btn { text-decoration: none; }

/* Chats */
.ai-side { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; padding-right: var(--s-3); border-right: 1px solid var(--line-strong); }
.ai-side-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-2) var(--s-3) var(--s-3); }
.ai-side-head h2 { margin: 0; color: var(--muted); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ai-list { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(var(--fg-rgb) / 0.28) transparent; }
.ai-chat { display: flex; align-items: center; border-radius: var(--r-md); }
.ai-chat:hover, .ai-chat.is-active { background: rgb(var(--fg-rgb) / 0.09); }
.ai-chat-open { display: block; flex: 1; align-self: stretch; min-width: 0; padding: var(--s-2) var(--s-3); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-chat .gbtn { flex: none; width: 1.75rem; height: 1.75rem; margin-right: 2px; opacity: 0; }
@media (hover: none) { .ai-chat .gbtn { opacity: 1; } }
.ai-chat:hover .gbtn, .ai-chat:focus-within .gbtn { opacity: 1; }
.ai-chat .gbtn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ai-chat input { flex: 1; min-width: 0; margin: 2px; padding: var(--s-1) var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg-2); color: var(--white); font: inherit; }
.ai-clear { margin: var(--s-3) 0 0 var(--s-3); padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer; }
.ai-clear:hover { color: var(--white); }
.ai-note { padding: var(--s-2) var(--s-3); color: var(--muted); font-size: 0.875rem; }

/* Conversation */
.ai-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ai-top { display: none; margin-bottom: var(--s-3); } /* only holds the chats button on narrow screens */
.ai-thread { display: grid; flex: 1; align-content: start; gap: var(--s-5); width: min(100%, 48rem); min-height: 0; margin-inline: auto; padding-bottom: var(--s-4); overflow-y: auto; overscroll-behavior: contain; }
.ai-msg { display: grid; gap: var(--s-2); min-width: 0; }
.ai-msg.is-user { justify-self: end; max-width: 85%; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: rgb(var(--fg-rgb) / 0.09); color: var(--white); white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-shot-tag { display: block; margin-top: var(--s-1); color: var(--muted); font-size: 0.8125rem; }
.ai-text { color: var(--white); overflow-wrap: anywhere; }
.ai-text > :first-child { margin-top: 0; }
.ai-text > :last-child { margin-bottom: 0; }
.ai-text p, .ai-text ul, .ai-text ol { margin: 0 0 var(--s-3); }
.ai-text ul, .ai-text ol { padding-left: var(--s-5); }
.ai-text code { padding: 0.05rem 0.35rem; border-radius: 6px; background: rgb(var(--fg-rgb) / 0.1); font-size: 0.9em; }
.ai-code { margin: 0 0 var(--s-3); overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg-1); }
.ai-code header { display: flex; align-items: center; justify-content: space-between; padding: var(--s-1) var(--s-2) var(--s-1) var(--s-3); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.75rem; }
.ai-code pre { margin: 0; padding: var(--s-3); overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgb(var(--fg-rgb) / 0.28) transparent; }
.ai-code code { padding: 0; background: none; }
.ai-tools { display: flex; gap: var(--s-1); opacity: 0; transition: opacity var(--dur-fast); }
.ai-msg:hover .ai-tools, .ai-msg:focus-within .ai-tools { opacity: 1; }
.ai-small { padding: 0.15rem 0.65rem; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 0.75rem; cursor: pointer; }
.ai-small:hover { color: var(--white); border-color: var(--white); }
.ai-thinking { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--white); animation: ai-pulse 1s ease-in-out infinite; }
@keyframes ai-pulse { 50% { opacity: 0.25; scale: 0.7; } }
.ai-error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--white); }

.ai-empty { display: grid; justify-items: center; gap: var(--s-4); margin-top: 8vh; text-align: center; }
.ai-empty small { color: var(--muted); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.3em; }
.ai-empty h1 { margin: 0; font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
.ai-starters { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.ai-starters button { padding: 0.5rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--white-2); font: inherit; font-size: 0.9375rem; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.ai-starters button:hover { background: rgb(var(--fg-rgb) / 0.1); }

/* Input bar */
.ai-composer { flex: none; display: grid; gap: var(--s-2); width: min(100%, 48rem); margin: var(--s-2) auto 0; }
.ai-shot { position: relative; justify-self: start; }
.ai-shot img { display: block; max-height: 5.5rem; max-width: 12rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.ai-shot button { position: absolute; top: -0.5rem; right: -0.5rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg-0); color: var(--white); cursor: pointer; }
.ai-shot button svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ai-box { display: flex; align-items: flex-end; gap: var(--s-1); padding: var(--s-2); border: 1px solid var(--line-strong); border-radius: 1.75rem; background: color-mix(in srgb, var(--bg-1) 92%, transparent); box-shadow: var(--shadow-float); }
.ai-box textarea { flex: 1; min-width: 0; max-height: 9rem; padding: 0.55rem var(--s-3); border: 0; background: none; color: var(--white); font: inherit; resize: none; }
.ai-box textarea:focus { outline: none; }
.ai-box .gbtn { width: 2.5rem; height: 2.5rem; }
.ai-box .gbtn svg, .ai-side-head .gbtn svg, .ai-menu svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ai-send { background: var(--white); color: var(--black); }
.ai-send:hover { background: var(--white-2); color: var(--black); }
.ai-send:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 52rem) {
  .ai { grid-template-columns: minmax(0, 1fr); }
  .ai { grid-template-rows: auto minmax(0, 1fr); }
  .ai-side { display: none; max-height: 14rem; padding: 0 0 var(--s-3); border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .ai.is-side-open .ai-side { display: grid; }
  .ai-top { display: block; }
  .ai-chat .gbtn { opacity: 1; }
}