/* AI Reply Agent — on top of Bootstrap 5.3. Accent: deep teal; human replies amber; the customer's messages white. */
:root { --ag-accent: #0f766e; --ag-accent-dark: #0b3b37; --ag-ground: #f2f5f4; --ag-ai: #e3f2ef; --ag-owner: #fff2d1; --ag-system: #eceff2; --ag-ink-soft: #5d6b69; }
body { background: var(--ag-ground); color: #1d2b29; }
a { color: var(--ag-accent); }
.btn-primary { --bs-btn-bg: var(--ag-accent); --bs-btn-border-color: var(--ag-accent); --bs-btn-hover-bg: #0c5f59; --bs-btn-hover-border-color: #0c5f59; --bs-btn-active-bg: #0a514c; --bs-btn-disabled-bg: var(--ag-accent); --bs-btn-disabled-border-color: var(--ag-accent); }
.btn-outline-primary { --bs-btn-color: var(--ag-accent); --bs-btn-border-color: var(--ag-accent); --bs-btn-hover-bg: var(--ag-accent); --bs-btn-hover-border-color: var(--ag-accent); --bs-btn-active-bg: #0a514c; }
.form-control:focus, .form-select:focus { border-color: #5fb3a9; box-shadow: 0 0 0 .2rem rgba(15, 118, 110, .2); }
main.container, footer.container { max-width: 1120px; }

/* top bar */
.topbar { background: var(--ag-accent-dark); color: #fff; }
.topbar-inner { max-width: 1120px; margin: 0 auto; padding: .6rem 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.topbar .brand { color: #fff; text-decoration: none; font-weight: 600; display: flex; flex-direction: column; line-height: 1.2; }
.topbar .brand small { font-weight: 400; color: rgba(255, 255, 255, .7); font-size: .8rem; }
.topbar .menu { display: flex; flex-wrap: wrap; gap: .25rem; }
.topbar .menu a { color: rgba(255, 255, 255, .85); text-decoration: none; padding: .35rem .7rem; border-radius: .4rem; font-size: .92rem; }
.topbar .menu a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.topbar .menu a.active { background: rgba(255, 255, 255, .16); color: #fff; }
.topbar .menu a:focus-visible, .btn:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }

.card { border: 1px solid #e1e7e6; box-shadow: none; }
.small-muted { font-size: .82rem; color: var(--ag-ink-soft); }
.steps { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.steps li { padding: .35rem .75rem; border-radius: 999px; background: #e3e8e7; font-size: .875rem; }
.steps li.done { background: #cfe9e3; } .steps li.now { background: var(--ag-accent); color: #fff; }
pre.json, pre.report { white-space: pre-wrap; font-size: .8rem; background: #f8faf9; padding: .75rem; border-radius: .5rem; border: 1px solid #e1e7e6; }
h1, h2, h3, h4, h5 { text-wrap: balance; }

/* inbox list */
.inbox-row { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 1rem; border-bottom: 1px solid #e8eeec; color: inherit; text-decoration: none; }
.inbox-row:hover { background: #f7faf9; }
.inbox-row:last-child { border-bottom: 0; }
.inbox-row .who { font-weight: 600; }
.inbox-row .preview { color: var(--ag-ink-soft); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.inbox-row .main { flex: 1; min-width: 0; }
.inbox-row .side { text-align: right; white-space: nowrap; font-size: .8rem; color: var(--ag-ink-soft); }
.inbox-row.waiting .who::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #e0a100; margin-right: .4rem; vertical-align: middle; }
.filters { display: flex; flex-wrap: wrap; gap: .4rem; }

/* conversation */
.thread { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; background: #f6f8f7; border-radius: .5rem; max-height: 65vh; overflow-y: auto; }
.bubble { max-width: min(78%, 560px); padding: .5rem .75rem; border-radius: .75rem; overflow-wrap: anywhere; font-size: .95rem; }
.bubble .text { white-space: pre-wrap; }
.bubble.in { align-self: flex-start; background: #fff; border: 1px solid #e1e7e6; border-top-left-radius: .2rem; }
.bubble.out { align-self: flex-end; background: var(--ag-ai); border-top-right-radius: .2rem; }
.bubble.owner { background: var(--ag-owner); }
.bubble.system { background: var(--ag-system); }
.bubble .meta { display: block; font-size: .72rem; color: var(--ag-ink-soft); margin-top: .25rem; text-align: right; white-space: normal; }
.bubble.in .meta { text-align: left; }
.try-result .bubble { max-width: 100%; }
.tick { font-size: .72rem; color: var(--ag-ink-soft); margin-left: .25rem; }
.tick.read { color: #0b74c4; } .tick.fail { color: #b42318; font-weight: 600; } .tick.warn { color: #b54708; }
.window { font-size: .85rem; }
.try-list li { margin-bottom: .35rem; }
.try-list .btn { white-space: normal; }

/* tables and numbers */
.table td, .table th { vertical-align: middle; }
.num { font-variant-numeric: tabular-nums; }
.stat { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 576px) {
  .bubble { max-width: 92%; }
  .inbox-row { padding: .65rem .75rem; }
  .thread { max-height: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }