/* Genexts Agent. Builds on design.css (.gd variables, buttons, side panel); calm & minimal, one teal accent. */
.ag { position: relative; }
.ag .gd-side.ag-side { width: 360px; }
.ag-main { flex: 1; min-width: 0; overflow-y: auto; padding: 24px clamp(16px, 4vw, 48px) 0; display: flex; flex-direction: column; }
.ag-main > * { width: 100%; max-width: 860px; margin-left: auto; margin-right: auto; }
.ag-hero { width: 56px; height: 56px; margin: 0 auto; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.ag-hero svg.i { width: 28px; height: 28px; }
.ag-side-actions { margin-top: auto; }

.ag-modes { display: flex; flex-direction: column; gap: 6px; }
.ag-mode { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.ag-mode input { position: absolute; opacity: 0; pointer-events: none; }
.ag-mode b { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.ag-mode span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.4; }
.ag-mode.on { border-color: var(--accent); background: var(--accent-soft); }
.ag-mode.on b { color: var(--accent); }
.ag-mode.full.on { border-color: #d97706; background: rgba(217,119,6,.08); }
.ag-mode.full.on b { color: #b45309; }
.ag[data-theme="dark"] .ag-mode.full.on b { color: #fbbf24; }
.ag-mode:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-soft); }

.ag-check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.ag-check input { margin-top: 3px; accent-color: var(--accent); }
.ag-check span { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; }
.ag-check small { grid-column: 2; color: var(--muted); font-size: 12px; }
.ag-folders { margin: 2px 0 0 26px; display: flex; flex-direction: column; gap: 4px; }
.ag-folders label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.ag-folders input { accent-color: var(--accent); }
.ag-link { border: 0; background: none; color: var(--accent); font-size: 12px; padding: 0; text-align: left; }
.ag-pair { margin: 4px 0 0 26px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ag-cmd { white-space: pre-wrap; word-break: break-all; font-size: 11.5px; background: var(--soft); border-radius: 8px; padding: 8px 10px; margin: 0; user-select: all; }

.ag-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.ag-head > div { flex: 1; min-width: 0; }
.ag-head h2 { margin: 0 0 4px; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.ag-head p { margin: 0; color: var(--muted); font-size: 13px; }
.ag-status { font-weight: 600; text-transform: capitalize; }
.ag-status.running, .ag-status.starting { color: var(--accent); }
.ag-status.waiting { color: #b45309; }
.ag-status.error { color: var(--danger); }
.ag-plan { margin: 0 0 14px; padding: 10px 14px 10px 32px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--muted); font-size: 13px; }
.ag-card { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--shadow); }
.ag-card > b { display: flex; align-items: center; gap: 6px; }
.ag-card p { margin: 6px 0 0; color: var(--muted); }
.ag-card.warn { border-color: #d97706; }
.ag-card.result { line-height: 1.55; }
.ag-card pre, .ag-ev pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; background: var(--soft); border-radius: 8px; padding: 8px 10px; max-height: 280px; overflow: auto; }
.ag-card .li { padding-left: 14px; position: relative; } .ag-card .li::before { content: "•"; position: absolute; left: 2px; color: var(--accent); }
.ag-card .li.n::before { content: none; } .ag-card .li.n i { font-style: normal; color: var(--muted); margin-right: 4px; }
.ag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.ag-row input { flex: 1; min-width: 160px; }
.ag-media { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.ag-media img { width: 180px; height: 180px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.ag-files { margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.ag-file { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 8px 12px; }
.ag-file:hover { border-color: var(--accent); }
.ag-file span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ag-file small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ag-events { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; }
.ag-ev { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 5px 0; color: var(--muted); }
.ag-ev > div { flex: 1; min-width: 0; }
.ag-ev svg.i { margin-top: 2px; }
.ag-ev.tool { color: var(--text); font-weight: 500; }
.ag-ev.tool svg.i { color: var(--accent); }
.ag-ev.approval svg.i, .ag-ev.note svg.i { color: #d97706; }
.ag-ev.error { color: var(--danger); }
.ag-ev.user { color: var(--text); }
.ag-ev.done { color: var(--accent); }
.ag-ev details summary { cursor: pointer; font-size: 12px; }
.ag-compose { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 12px 0 18px; background: linear-gradient(transparent, var(--bg) 30%); margin-top: auto; }
.ag-compose input { flex: 1; }

.ag-drawer-bg { position: absolute; inset: 0; background: rgba(0,0,0,.25); z-index: 20; }
.ag-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: var(--panel); border-left: 1px solid var(--line); z-index: 21; padding: 18px; overflow-y: auto; }
.ag-drawer h3 { margin: 0 0 12px; font-size: 16px; }
.ag-close { position: absolute; top: 12px; right: 12px; }
.ag-hist { display: flex; flex-direction: column; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 9px 12px; margin-bottom: 6px; }
.ag-hist:hover { border-color: var(--accent); }
.ag-hist b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-hist small { color: var(--muted); font-size: 12px; }
.ag-agent { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.ag-agent span { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; }
.ag-agent small { grid-column: 2; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-toast { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 9px 14px; border-radius: 10px; font-size: 13px; z-index: 30; }

@media (max-width: 820px) {
  .ag .gd-body { flex-direction: column; overflow-y: auto; }
  .ag .gd-side.ag-side { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); }
  .ag-main { overflow: visible; }
}

/* ---------- Chat layout with polished glass ---------- */
#agent-root { height: 100%; }
#agent-root .ag { display: flex; flex-direction: column; height: 100%; min-height: 0; }
#agent-root .ag .gd-body { flex: 1; min-height: 0; display: flex; }
.ag .gd-top { padding-right: 104px; }
.ag { --ag-glass: rgba(255,255,255,0.06); --ag-glass-2: rgba(255,255,255,0.1); --ag-edge: rgba(255,255,255,0.16); --ag-shine: rgba(255,255,255,0.14); --ag-shadow: 0 16px 44px rgba(0,0,0,0.32); isolation: isolate; overflow: hidden; }
.ag[data-theme="light"] { --ag-glass: rgba(255,255,255,0.52); --ag-glass-2: rgba(255,255,255,0.72); --ag-edge: rgba(255,255,255,0.85); --ag-shine: rgba(255,255,255,0.8); --ag-shadow: 0 14px 38px rgba(79,70,229,0.13); }
.ag::before { content: ""; position: absolute; inset: -6%; z-index: -1; pointer-events: none; opacity: 0.4; filter: blur(46px) saturate(130%);
  background: radial-gradient(34% 40% at 14% 16%, #2dd4bf, transparent 72%), radial-gradient(34% 42% at 86% 14%, #818cf8, transparent 72%), radial-gradient(32% 38% at 78% 88%, #f472b6, transparent 72%), radial-gradient(28% 34% at 18% 88%, #fbbf24, transparent 72%); animation: ag-drift 28s ease-in-out infinite alternate; }
.ag[data-theme="light"]::before { opacity: 0.28; }
@keyframes ag-drift { from { transform: translate3d(-1.5%, -1%, 0); } to { transform: translate3d(1.5%, 1.5%, 0) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .ag::before { animation: none; } }
.ag, .ag .gd-body { background: transparent; }
.ag .gd-top { background: var(--ag-glass); border-bottom: 1px solid var(--ag-edge); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
.ag .gd-top .gd-btn svg + span { margin-left: 2px; }
.ag .gd-body { position: relative; }
.ag-chat { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ag .ag-main { flex: 1; min-height: 0; padding: 20px 16px 12px; overflow-x: hidden; overscroll-behavior: contain; }
.ag .ag-card pre, .ag .ag-ev pre { overflow-x: auto; }
.ag .ag-card table { display: block; max-width: 100%; overflow-x: auto; }
.ag .ag-ev > div { min-width: 0; overflow-wrap: anywhere; }
.ag .ag-main > * { max-width: 760px; }
.ag-empty .ag-chat { justify-content: center; }
.ag-empty .ag-main { flex: 0 1 auto; padding-bottom: 20px; }
.ag-welcome { text-align: center; }
.ag-welcome h2 { margin: 14px 0 6px; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 650; letter-spacing: -0.01em; }
.ag-welcome p { margin: 0; color: var(--muted); }
.ag-examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.ag-examples button { max-width: 340px; padding: 8px 14px; font: inherit; font-size: 13px; line-height: 1.35; text-align: left; color: var(--text, inherit); cursor: pointer; background: var(--ag-glass); border: 1px solid var(--ag-edge); border-radius: 14px; box-shadow: inset 0 1px 0 var(--ag-shine); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: transform .15s, background .15s; }
.ag-examples button:hover { transform: translateY(-1px); background: var(--ag-glass-2); }
.ag-composer { position: relative; box-sizing: border-box; flex: none; width: calc(100% - 32px); max-width: 760px; margin: 0 auto 16px; padding: 12px 12px 10px 16px; border: 1px solid var(--ag-edge); border-radius: 22px; background: linear-gradient(135deg, var(--ag-glass-2), var(--ag-glass)); box-shadow: var(--ag-shadow), inset 0 1px 0 var(--ag-shine); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); transition: border-color .15s, box-shadow .15s; }
.ag-composer::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(115deg, #2dd4bf, #818cf8 45%, #f472b6 80%, #fbbf24); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; transition: opacity .2s; }
.ag-composer:focus-within::before { opacity: 0.9; }
.ag .ag-composer textarea { display: block; width: 100%; height: 34px; min-height: 34px; max-height: 180px; padding: 2px 0 8px; font: inherit; font-size: 16px; line-height: 1.45; color: inherit; background: transparent; border: 0; outline: 0; resize: none; box-shadow: none; }
.ag-composer-row { display: flex; align-items: center; gap: 8px; }
.ag-pick { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 60%; padding: 0 10px; min-height: 36px; color: var(--muted); background: var(--ag-glass); border: 1px solid var(--ag-edge); border-radius: 999px; }
.ag .ag-pick select { min-width: 0; max-width: 100%; padding: 0; font-size: 13px; color: inherit; background: transparent; border: 0; outline: 0; box-shadow: none; }
.ag-pick select option, .ag-pick select optgroup { color: #111; }
.ag-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ag-send { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: #fff; cursor: pointer; border: 0; border-radius: 50%; background: linear-gradient(135deg, #0d9488, #4f46e5 65%, #c026d3); box-shadow: 0 6px 18px rgba(79,70,229,.4), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .15s, filter .15s; }
.ag-send:hover { transform: scale(1.05); filter: brightness(1.08); }
.ag-send:focus-visible, .ag-examples button:focus-visible { outline: 2px solid #2dd4bf; outline-offset: 2px; }
.ag-stop[hidden] { display: none; }
.ag .ag-side { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; width: min(360px, 100%); box-sizing: border-box; overflow-y: auto; background: linear-gradient(160deg, var(--ag-glass-2), var(--ag-glass)); border-left: 1px solid var(--ag-edge); box-shadow: var(--ag-shadow); -webkit-backdrop-filter: blur(34px) saturate(170%); backdrop-filter: blur(34px) saturate(170%); transform: translateX(105%); visibility: hidden; transition: transform .22s ease, visibility .22s; }
.ag.ag-settings .ag-side { transform: none; visibility: visible; }
.ag-side-bg { position: absolute; inset: 0; z-index: 4; background: rgba(0,0,0,.2); }
.ag-side-bg[hidden] { display: none; }
.ag-side-head { display: flex; align-items: center; justify-content: space-between; }
.ag .ag-head { margin-bottom: 12px; padding: 0; border: 0; background: transparent; }
.ag .ag-head p { margin: 0; font-size: 12px; color: var(--muted); }
.ag .ag-ev.user { display: flex; justify-content: flex-end; }
.ag .ag-ev.user > svg, .ag .ag-ev.user > .i { display: none; }
.ag .ag-ev.user > div { max-width: min(80%, 560px); padding: 10px 14px; white-space: pre-wrap; overflow-wrap: anywhere; background: linear-gradient(135deg, rgba(45,212,191,.2), rgba(129,140,248,.22)); border: 1px solid var(--ag-edge); border-radius: 18px 18px 4px 18px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ag .ag-events { margin: 8px 0; }
.ag .ag-card, .ag .ag-plan-box, .ag .ag-file { background: linear-gradient(135deg, var(--ag-glass-2), var(--ag-glass)); border: 1px solid var(--ag-edge); border-radius: 16px; box-shadow: inset 0 1px 0 var(--ag-shine); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); }
.ag .ag-plan-box { margin: 8px 0; padding: 10px 14px; font-size: 13px; }
.ag .ag-plan-box summary { min-height: 24px; cursor: pointer; font-weight: 600; }
.ag-hint { margin-top: 8px; font-size: 12px; color: var(--muted); }
@media (max-width: 767px) {
  .ag .gd-top { padding-left: 60px; padding-right: 110px; min-height: 56px; flex-wrap: nowrap; overflow-x: auto; }
  .ag .gd-top .gd-brand { display: none; }
  .ag .gd-top .gd-btn { min-width: 40px; min-height: 40px; padding: 0 8px; justify-content: center; }
  .ag .gd-top .gd-btn span { display: none; }
  .ag .ag-side { width: 100%; }
  .ag .ag-main { padding: 14px 14px 8px; }
  .ag-composer { width: calc(100% - 20px); margin-bottom: calc(10px + env(safe-area-inset-bottom)); border-radius: 18px; }
  .ag-examples button { max-width: 100%; width: 100%; }
  .ag .ag-ev.user > div { max-width: 88%; }
  .ag .ag-row { flex-wrap: wrap; }
  .ag .ag-row .gd-btn { min-height: 44px; }
}