/* Verity AI-native patterns. Every state an agent can be in has exactly one visual
   grammar: iris = working, jade = grounded/verified, amber = uncertain, clay = human. */

/* ── Agent persona avatar ──
   states: idle · listening · thinking · speaking · error */
.v-agent{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-circle);background:var(--n-900);color:var(--n-25);flex:none;transition:box-shadow var(--duration-slow) var(--ease-standard)}
.v-agent--sm{width:28px;height:28px}
.v-agent--lg{width:56px;height:56px}
.v-agent--xl{width:88px;height:88px}
.v-agent__core{width:38%;height:38%;border-radius:var(--radius-circle);background:currentColor;transition:transform var(--duration-slow) var(--ease-spring)}
.v-agent__ring{position:absolute;inset:-4px;border-radius:var(--radius-circle);border:1.5px solid transparent}
.v-agent[data-state="idle"]{color:var(--n-400)}
.v-agent[data-state="listening"]{color:var(--cobalt-300)}
.v-agent[data-state="listening"] .v-agent__ring{border-color:var(--cobalt-400);animation:v-ring 2s var(--ease-breathe) infinite}
.v-agent[data-state="thinking"]{color:var(--iris-400);box-shadow:var(--shadow-glow-thinking)}
.v-agent[data-state="thinking"] .v-agent__core{animation:var(--animation-pulse-generating)}
.v-agent[data-state="thinking"] .v-agent__ring{border-color:transparent;border-top-color:var(--iris-400);border-right-color:var(--iris-400);animation:var(--animation-orbit-listening)}
.v-agent[data-state="speaking"]{color:var(--jade-200)}
.v-agent[data-state="error"]{color:var(--crimson-200);box-shadow:0 0 0 3px var(--crimson-100)}
.v-agent__wave{display:flex;align-items:center;gap:2px;height:44%}
.v-agent__wave span{width:2px;height:100%;border-radius:1px;background:currentColor;animation:var(--animation-waveform-speaking)}
.v-agent__wave span:nth-child(2){animation-delay:.12s}
.v-agent__wave span:nth-child(3){animation-delay:.24s}
.v-agent__wave span:nth-child(4){animation-delay:.36s}
.v-agent-label{display:inline-flex;align-items:center;gap:var(--space-2)}
.v-agent-label__name{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-primary)}
.v-agent-label__state{font-size:var(--fs-caption);color:var(--text-tertiary)}

/* ── Thinking dots (inline, in-bubble) ── */
.v-dots{display:inline-flex;align-items:center;gap:4px;height:16px}
.v-dots span{width:5px;height:5px;border-radius:var(--radius-circle);background:var(--ai-thinking);animation:var(--animation-thinking-dots)}
.v-dots span:nth-child(2){animation-delay:.15s}
.v-dots span:nth-child(3){animation-delay:.3s}

/* ── Generative container / streaming text ── */
.v-stream{position:relative;max-width:var(--measure-generated);font-size:var(--text-generated);line-height:var(--lh-body-lg);color:var(--text-primary);text-wrap:pretty}
.v-stream[data-status="streaming"]{min-height:var(--stream-reserve,3lh)}
.v-stream__caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--ai-thinking);animation:var(--animation-caret-stream)}
.v-stream__line{animation:v-fade var(--duration-normal) var(--ease-standard)}
.v-stream[data-status="streaming"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.2em;background:linear-gradient(to top,var(--surface-card) 12%,rgba(255,255,255,0));pointer-events:none;opacity:.0}
.v-skeleton{border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--n-100) 0%,var(--n-50) 40%,var(--n-100) 80%);background-size:320px 100%;animation:var(--animation-shimmer-skeleton);height:1em}
.v-skeleton+.v-skeleton{margin-top:10px}
.v-skeleton--line{width:100%}
.v-skeleton--short{width:62%}
.v-skeleton--block{height:96px;border-radius:var(--radius-md)}
.v-genframe{border:1px solid var(--border-subtle);border-radius:var(--radius-panel);background:var(--surface-card);padding:var(--space-5);transition:border-color var(--duration-slow) var(--ease-standard),box-shadow var(--duration-slow) var(--ease-standard)}
.v-genframe[data-status="streaming"]{border-color:var(--color-border-ai-thinking);box-shadow:var(--shadow-glow-thinking)}
.v-genframe[data-status="verified"]{border-color:var(--color-border-ai-verified)}
.v-genframe[data-status="uncertain"]{border-color:var(--color-border-ai-uncertain)}
.v-genframe[data-status="error"]{border-color:var(--color-border-ai-error)}
.v-genframe__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3);font-size:var(--fs-caption);color:var(--text-tertiary)}

/* ── Message bubbles ── */
.v-bubble{max-width:min(680px,86%);padding:var(--space-3) var(--space-4);border-radius:var(--radius-bubble);font-size:var(--fs-body-md);line-height:var(--lh-body-md);text-wrap:pretty}
.v-bubble--agent{background:var(--bubble-agent-bg);border:1px solid var(--bubble-agent-border);color:var(--text-primary);border-top-left-radius:var(--radius-sm)}
.v-bubble--user{background:var(--bubble-user-bg);color:var(--bubble-user-fg);border-top-right-radius:var(--radius-sm);margin-left:auto}
.v-bubble--system{background:var(--bubble-system-bg);color:var(--text-secondary);font-size:var(--fs-body-sm);border-radius:var(--radius-md);max-width:100%;text-align:center}
.v-msg{display:flex;gap:var(--space-3);align-items:flex-start}
.v-msg--user{flex-direction:row-reverse}
.v-msg__col{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;flex:1}

/* ── Confidence indicator ── */
.v-confidence{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--fs-caption);color:var(--text-tertiary)}
.v-confidence__bars{display:flex;gap:2px;align-items:flex-end;height:12px}
.v-confidence__bars i{width:3px;border-radius:1px;background:var(--n-300);display:block}
.v-confidence__bars i:nth-child(1){height:5px}
.v-confidence__bars i:nth-child(2){height:8px}
.v-confidence__bars i:nth-child(3){height:11px}
.v-confidence[data-level="high"] i:nth-child(-n+3){background:var(--ai-verified)}
.v-confidence[data-level="high"]{color:var(--color-text-ai-verified)}
.v-confidence[data-level="medium"] i:nth-child(-n+2){background:var(--ai-uncertain)}
.v-confidence[data-level="medium"]{color:var(--color-text-ai-uncertain)}
.v-confidence[data-level="low"] i:nth-child(1){background:var(--clay-500)}
.v-confidence[data-level="low"]{color:var(--color-text-ai-human)}
.v-confidence__pill{display:inline-flex;align-items:center;gap:var(--space-1-5);height:22px;padding:0 var(--space-2);border-radius:var(--radius-pill);border:1px solid currentColor;font-size:var(--fs-micro);font-weight:var(--fw-semibold);letter-spacing:.02em;text-transform:uppercase}

/* ── Citation chip ── */
.v-cite{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 6px;margin:0 2px;border-radius:var(--radius-xs);background:var(--jade-50);border:1px solid var(--jade-200);color:var(--jade-700);font-size:var(--fs-micro);font-weight:var(--fw-semibold);vertical-align:1px;cursor:pointer;transition:var(--transition-control)}
.v-cite:hover{background:var(--jade-100)}
.v-cite--unverified{background:var(--amber-50);border-color:var(--amber-200);color:var(--amber-700)}

/* ── Tool / action execution ── */
.v-tool{display:flex;align-items:flex-start;gap:var(--space-3);padding:10px var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-subtle);font-size:var(--fs-body-sm);transition:var(--transition-control)}
.v-tool__icon{width:24px;height:24px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex:none;background:var(--n-100);color:var(--text-secondary)}
.v-tool__name{font-weight:var(--fw-medium);color:var(--text-primary)}
.v-tool__detail{color:var(--text-tertiary);font-family:var(--font-mono);font-size:var(--fs-caption);margin-top:2px;word-break:break-all}
.v-tool__status{margin-left:auto;flex:none;font-size:var(--fs-caption);display:flex;align-items:center;gap:6px}
.v-tool[data-status="running"]{border-color:var(--color-border-ai-thinking);background:var(--color-bg-ai-thinking)}
.v-tool[data-status="running"] .v-tool__icon{background:var(--iris-100);color:var(--ai-thinking-strong)}
.v-tool[data-status="running"] .v-tool__status{color:var(--color-text-ai-thinking)}
.v-tool[data-status="done"] .v-tool__icon{background:var(--jade-100);color:var(--jade-600)}
.v-tool[data-status="done"] .v-tool__status{color:var(--jade-600)}
.v-tool[data-status="failed"]{border-color:var(--color-border-ai-error);background:var(--color-bg-ai-error)}
.v-tool[data-status="failed"] .v-tool__icon{background:var(--crimson-100);color:var(--crimson-600)}
.v-tool[data-status="failed"] .v-tool__status{color:var(--crimson-600)}
.v-tool[data-status="awaiting"]{border-color:var(--color-border-ai-human);background:var(--color-bg-ai-human)}
.v-tool[data-status="awaiting"] .v-tool__status{color:var(--color-text-ai-human)}
.v-tool-trace{display:flex;flex-direction:column;gap:var(--space-2)}

/* ── Prompt composer ── */
.v-composer{width:100%;max-width:var(--composer-max);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-panel);box-shadow:var(--shadow-sm);transition:var(--transition-control)}
.v-composer:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--cobalt-100),var(--shadow-sm)}
.v-composer[data-state="dragover"]{border-color:var(--cobalt-500);border-style:dashed;background:var(--cobalt-50)}
.v-composer[data-state="disabled"]{background:var(--surface-sunken);opacity:.7}
.v-composer[data-state="over-limit"]{border-color:var(--crimson-500)}
.v-composer__attachments{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-3) var(--space-3) 0}
.v-composer__input{width:100%;border:0;background:transparent;resize:none;padding:var(--space-3) var(--space-4) var(--space-1);font:var(--fw-regular) var(--fs-body-md)/var(--lh-body-md) var(--font-sans);color:var(--text-primary);max-height:200px;overflow-y:auto}
.v-composer__input:focus{outline:none}
.v-composer__input::placeholder{color:var(--text-disabled)}
.v-composer__bar{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-2-5,10px)}
.v-composer__spacer{flex:1}
.v-composer__count{font-size:var(--fs-micro);font-family:var(--font-mono);color:var(--text-tertiary);letter-spacing:0}
.v-composer__count[data-tone="warn"]{color:var(--amber-600)}
.v-composer__count[data-tone="over"]{color:var(--crimson-600);font-weight:var(--fw-semibold)}
.v-slash{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-card);box-shadow:var(--elevation-popover);padding:var(--space-1);width:100%;max-width:340px}
.v-slash__item{display:flex;align-items:center;gap:var(--space-2);padding:7px var(--space-2);border-radius:var(--radius-sm);font-size:var(--fs-body-sm);color:var(--text-primary);cursor:pointer}
.v-slash__item[aria-selected="true"]{background:var(--surface-accent)}
.v-slash__cmd{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--cobalt-700)}
.v-slash__desc{color:var(--text-tertiary);font-size:var(--fs-caption);margin-left:auto}
.v-attachment{display:inline-flex;align-items:center;gap:var(--space-2);height:30px;padding:0 var(--space-1) 0 var(--space-2);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-subtle);font-size:var(--fs-caption);color:var(--text-secondary)}

/* ── Response feedback ── */
.v-feedback{display:flex;align-items:center;gap:var(--space-1);opacity:.0;transition:opacity var(--duration-normal) var(--ease-standard)}
.v-msg:hover .v-feedback,.v-feedback[data-persistent="true"]{opacity:1}
.v-feedback__btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:26px;min-width:26px;padding:0 6px;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--text-tertiary);cursor:pointer;font-size:var(--fs-caption);transition:var(--transition-control)}
.v-feedback__btn:hover{background:var(--action-ghost-bg-hover);color:var(--text-primary)}
.v-feedback__btn[data-active="up"]{background:var(--jade-50);color:var(--jade-600)}
.v-feedback__btn[data-active="down"]{background:var(--crimson-50);color:var(--crimson-600)}
.v-correction{border:1px solid var(--color-border-ai-human);background:var(--color-bg-ai-human);border-radius:var(--radius-md);padding:var(--space-3)}
.v-correction__label{font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--color-text-ai-human);margin-bottom:var(--space-2);display:flex;align-items:center;gap:6px}

/* ── Human handoff banner ── */
.v-handoff{display:flex;align-items:center;gap:var(--space-3);padding:10px var(--space-4);border-radius:var(--radius-md);background:var(--color-bg-ai-human);border:1px solid var(--color-border-ai-human);color:var(--color-text-ai-human);font-size:var(--fs-body-sm)}
.v-handoff__rule{display:flex;align-items:center;gap:var(--space-3);color:var(--color-text-ai-human);font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:.04em;text-transform:uppercase}
.v-handoff__rule::before,.v-handoff__rule::after{content:"";flex:1;height:1px;background:var(--color-border-ai-human)}

/* ── Live region helper ── */
.v-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}