@import url("../v2-layout.css?v=20261012-secondary1");

:root { color-scheme: light; --canvas: var(--v2-surface-canvas); --surface: oklch(0.992 0.0018 245); --surface-soft: oklch(0.975 0.003 245); --surface-strong: oklch(0.945 0.004 245); --line: oklch(0.89 0.006 245); --text: oklch(0.22 0.012 250); --text-secondary: oklch(0.46 0.016 250); --text-tertiary: oklch(0.61 0.014 250); --agent: oklch(0.46 0.065 242); --agent-soft: oklch(0.955 0.012 242); --counter-soft: oklch(0.952 0.006 275); --attention: oklch(0.52 0.082 68); --success: oklch(0.46 0.075 153); --danger: oklch(0.49 0.12 28); --radius-sm: 8px; --radius-md: 12px; --shadow: 0 20px 64px oklch(0.2 0.01 250 / .14); font-family: Inter, "Noto Sans SC", "PingFang SC", system-ui, sans-serif; }
* { box-sizing: border-box; }
html { height: 100%; background: var(--canvas); }
body { height: 100%; margin: 0; min-width: 320px; overflow: hidden; background: var(--canvas); color: var(--text); font: 14px/1.62 Inter, "Noto Sans SC", "PingFang SC", system-ui, sans-serif; }
button { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid var(--agent); outline-offset: 3px; }
[hidden] { display: none !important; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.site-header { position: sticky; top: 0; z-index: 20; height: 64px; background: var(--canvas); }
.site-header.is-scrolled { box-shadow: inset 0 -1px var(--line); }
.site-header__inner { width: min(var(--v2-layout-shell), calc(100% - var(--v2-layout-gutter))); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-size: 18px; font-weight: 650; text-decoration: none; }
.brand__mark { width: 20px; height: 20px; }
.main-nav { align-self: stretch; display: flex; align-items: center; gap: 8px; }
.main-nav a { min-height: 40px; padding: 0 14px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; color: var(--text-secondary); font-weight: 500; text-decoration: none; }
.main-nav a:hover { background: var(--surface-strong); color: var(--text); }
.main-nav .is-current { background: var(--surface-strong); color: var(--text); font-weight: 600; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.agent-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.agent-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.account-trigger { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-strong); display: inline-flex; align-items: center; justify-content: center; color: inherit; font-weight: 600; text-decoration: none; }

.negotiation-page { width: min(var(--v2-layout-workspace), calc(100% - var(--v2-layout-gutter))); height: calc(100dvh - 64px); min-height: 0; margin: 0 auto; padding: 12px 0 16px; display: flex; flex-direction: column; }
.negotiation-heading { flex: 0 0 auto; margin-bottom: 22px; }
.back-link { width: fit-content; min-height: 36px; margin-left: -8px; padding: 0 8px; border-radius: 7px; display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); text-decoration: none; }
.back-link svg { width: 16px; height: 16px; }
.back-link:hover { background: var(--surface-strong); color: var(--text); }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 12px 0 0; font-size: 27px; line-height: 1.3; font-weight: 620; letter-spacing: -.018em; }
h2 { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: -.008em; }
h3 { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 600; }
.negotiation-layout { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 24px; align-items: stretch; }

.conversation-panel { min-width: 0; height: 100%; border-radius: var(--radius-md); background: var(--surface); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.conversation-header { position: relative; z-index: 2; min-height: 60px; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.conversation-header__title { min-width: 0; display: flex; align-items: center; gap: 8px; }
.conversation-header__meta { max-width: min(58%, 560px); display: grid; justify-items: end; gap: 2px; }
.conversation-header__meta p { margin: 0; color: oklch(0.72 0.007 245); font-size: 12px; font-weight: 400; text-align: right; }
.conversation-header__meta time { color: oklch(0.74 0.006 245); font-size: 10px; font-weight: 400; }
.live-state { min-height: 26px; padding: 3px 8px; border-radius: 6px; background: var(--agent-soft); color: var(--agent); display: inline-flex; align-items: center; font-size: 11px; font-weight: 500; white-space: nowrap; }
.mobile-context-card { display: none; }
.conversation-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-behavior: smooth; }
.messages { margin: 0; padding: 20px 32px 36px 28px; list-style: none; display: flex; flex-direction: column; gap: 28px; }
.message { width: 100%; }
.message__meta { min-height: 28px; display: flex; align-items: center; gap: 8px; }
.message__meta > span:not(.message__avatar, .message__role) { font-size: 13px; font-weight: 590; }
.message__meta time { color: oklch(0.7 0.008 245); font-size: 10px; }
.message__role { color: var(--text-tertiary); font-size: 11px; }
.message__avatar, .mini-avatar { display: grid; place-items: center; border-radius: 50%; }
.message__avatar { --glyph-cutout: var(--agent-soft); width: 28px; height: 28px; flex: 0 0 auto; background: var(--agent-soft); color: var(--agent); }
.message--counter-agent .message__avatar { --glyph-cutout: var(--counter-soft); background: var(--counter-soft); color: var(--text-secondary); }
.message__avatar svg { width: 15px; height: 15px; }
.message__bubble { max-width: 74ch; margin: 0 0 0 36px; color: oklch(0.285 0.012 250); font-size: 14px; line-height: 1.72; white-space: pre-wrap; }

.tail-status { min-height: 58px; margin: 0 32px 36px 64px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-soft); display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--text-secondary); font-size: 12px; }
.tail-status strong, .tail-status small { display: block; }
.tail-status strong { color: var(--text); font-weight: 540; }
.tail-status small { margin-top: 2px; color: var(--text-tertiary); }
.tail-status--neutral { justify-content: center; text-align: center; }
.tail-status--error { background: color-mix(in oklch, var(--danger) 6%, var(--surface)); }
.tail-status--error strong { color: var(--danger); }
.outcome { margin: 0 32px 36px 28px; padding: 20px; border-radius: var(--radius-md); background: var(--surface-soft); }
.outcome__eyebrow, .eyebrow { margin: 0 0 5px; color: var(--text-tertiary); font-size: 11px; }
.outcome dl { margin: 18px 0 0; display: grid; gap: 11px; }
.outcome dl div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
.outcome dt { color: var(--text-tertiary); }
.outcome dd { margin: 0; }
.outcome__note { margin: 18px 0; color: var(--text-secondary); }
.primary, .secondary { min-height: 40px; padding: 0 15px; border-radius: var(--radius-sm); font-weight: 560; cursor: pointer; }
.primary { border: 1px solid var(--text); background: var(--text); color: var(--surface); }
.primary:hover { background: oklch(0.29 0.014 250); }
.secondary { border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.secondary:hover { background: var(--surface-soft); }
.sample-links { display: none !important; }

.context-panel { min-width: 0; height: 100%; padding: 4px 2px 16px 10px; display: flex; flex-direction: column; overflow: auto; }
.context-section + .context-section { margin-top: 30px; }
.context-section--status > p:last-child { margin: 8px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.65; }
.participants { margin-top: 12px; display: grid; gap: 12px; }
.participants > div { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; }
.participants strong, .participants small { display: block; }
.participants strong { font-size: 13px; font-weight: 560; }
.participants small { margin-top: 1px; color: var(--text-tertiary); font-size: 11px; }
.mini-avatar { width: 32px; height: 32px; background: var(--counter-soft); color: var(--text-secondary); }
.mini-avatar--mine { background: var(--agent-soft); color: var(--agent); }
.mini-avatar svg { width: 16px; height: 16px; }
.context-facts { margin: 12px 0 0; display: grid; gap: 11px; }
.context-facts div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
.context-facts dt { color: var(--text-tertiary); }
.context-facts dd { margin: 0; color: var(--text-secondary); }
.context-link { min-height: 44px; margin-top: auto; padding: 0; border: 0; border-radius: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; color: var(--text); cursor: pointer; }
.context-link:hover { color: var(--agent); }
.context-link svg { width: 16px; height: 16px; color: var(--text-tertiary); }

dialog { width: min(440px, calc(100% - 32px)); padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
dialog::backdrop { background: oklch(0.2 0.01 250 / .28); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.icon-button { width: 32px; height: 32px; margin: -5px -6px 0 0; padding: 0; border: 0; border-radius: 7px; background: transparent; display: grid; place-items: center; cursor: pointer; }
.icon-button:hover { background: var(--surface-strong); }
.icon-button svg { width: 18px; height: 18px; }
#dialog-content { margin-bottom: 22px; color: var(--text-secondary); }
.mobile-context-dialog__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.mobile-context-dialog__heading .eyebrow { margin-bottom: 3px; }
.mobile-context-dialog__body { margin-top: 20px; display: grid; gap: 28px; }
.mobile-context-section { padding: 0; }
.mobile-context-section + .mobile-context-section { padding-top: 0; border-top: 0; }
.mobile-context-section--status h3 { font-size: 17px; line-height: 1.45; }
.mobile-context-section--status > p:last-child { margin: 6px 0 0; color: var(--text-secondary); }
.mobile-context-section__summary { margin: 0; color: var(--text-secondary); }
.mobile-outcome-facts { margin: 18px 0 0; display: grid; gap: 12px; }
.mobile-outcome-facts div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 14px; }
.mobile-outcome-facts dt { color: var(--text-tertiary); }
.mobile-outcome-facts dd { margin: 0; color: var(--text); }
.mobile-outcome-note { margin: 20px 0 0; padding-top: 0; border-top: 0; color: var(--text-secondary); font-size: 12px; }
.mobile-outcome-route { width: 100%; min-height: 44px; margin-top: 16px; }
.mobile-context-dialog__detail { margin-top: -6px; border-top: 0; }
.toast { position: fixed; z-index: 60; top: 88px; left: 50%; max-width: calc(100vw - 32px); padding: 10px 14px; transform: translateX(-50%); border-radius: 8px; background: var(--text); color: var(--surface); box-shadow: var(--shadow); }

@media (max-width: 980px) { .site-header__inner, .negotiation-page { width: calc(100% - 48px); } .negotiation-layout { grid-template-columns: minmax(0, 1fr) 272px; gap: 18px; } }
@media (max-width: 820px) {
  html, body { height: 100%; min-height: 100%; background: var(--surface); } body { overflow: hidden; } body.has-mobile-context-dialog { overflow: hidden; }
  .site-header { height: auto; min-height: 64px; } .site-header__inner { width: calc(100% - 32px); min-height: 64px; gap: 12px; }
  .main-nav { display: none; } .header-actions { margin-left: auto; } .agent-state span { display: none; } .account-trigger { width: 36px; height: 36px; }
  .negotiation-page { width: 100%; height: 100dvh; min-height: 0; padding: env(safe-area-inset-top) 0 max(10px, env(safe-area-inset-bottom)); background: var(--surface); overflow: hidden; }
  .negotiation-heading { min-height: 44px; margin: 0; padding: 0 16px; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; }
  .negotiation-heading .back-link { grid-column: 1; grid-row: 1; width: 44px; height: 44px; min-height: 44px; margin: 0 0 0 -10px; padding: 0; justify-content: center; }
  .negotiation-heading .back-link svg { width: 20px; height: 20px; }
  .negotiation-heading .back-link span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  body[data-page-level="secondary"] .negotiation-heading.negotiation-heading h1 { grid-column: 2; grid-row: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 20px; line-height: 1.3; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-context-card { grid-column: 1 / -1; grid-row: 2; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; display: grid; grid-template-columns: auto auto minmax(0, 1fr) 44px; align-content: start; align-items: center; row-gap: 1px; text-align: left; cursor: pointer; }
  .mobile-context-card__context { grid-column: 1; grid-row: 1; color: var(--text-secondary); font-size: 12px; line-height: 1.42; font-weight: 500; white-space: nowrap; }
  .mobile-context-card__separator { grid-column: 2; grid-row: 1; margin: 0 3px; color: var(--text-tertiary); font-size: 11px; line-height: 1; font-weight: 650; }
  .mobile-context-card > strong { grid-column: 3; grid-row: 1; min-width: 0; overflow: hidden; font-size: 14px; line-height: 1.42; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-context-card__note { grid-column: 1 / 4; grid-row: 2; min-width: 0; overflow: hidden; color: var(--text-tertiary); font-size: 11px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-context-card > svg { grid-column: 4; grid-row: 1 / 3; width: 18px; height: 18px; align-self: center; justify-self: center; color: var(--text-secondary); }
  .mobile-context-card:hover { color: var(--text); }
  .negotiation-layout { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid color-mix(in oklch, var(--line) 56%, transparent); } .conversation-panel { height: 100%; min-height: 0; border-radius: 0; background: transparent; }
  .conversation-header { padding: 12px 16px 11px; display: block; }
  .conversation-header__title { flex-wrap: wrap; row-gap: 5px; }
  .conversation-header__meta { width: 100%; max-width: none; margin-top: 7px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .conversation-header__meta p { min-width: 0; line-height: 1.42; text-align: left; }
  .conversation-header__meta time { flex: 0 0 auto; }
  .conversation-scroll { overflow: auto; } .messages { padding: 20px 16px 30px; } .message__bubble { max-width: none; margin-top: 4px; }
  .tail-status { margin: 0 16px 30px 52px; } .outcome { display: none; } .context-panel { display: none; }
  .mobile-context-dialog { inset: auto 0 0; width: 100%; max-width: none; max-height: min(78dvh, 680px); margin: 0; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); border: 0; border-radius: 18px 18px 0 0; overflow: auto; overscroll-behavior: contain; }
  .mobile-context-dialog::backdrop { background: oklch(0.2 0.01 250 / .36); }
  .mobile-context-dialog__heading { position: sticky; top: -10px; z-index: 1; margin: 0 -4px; padding: 8px 4px 10px; background: var(--surface); }
}
@media (max-width: 480px) {
  .brand span { display: none; } .negotiation-page { width: 100%; }
  .conversation-header__meta { gap: 10px; }
  .messages { padding-inline: 15px; } .message__bubble { margin-left: 0; } .tail-status, .outcome { margin-inline: 15px; } .outcome dl div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .conversation-scroll { scroll-behavior: auto; } }