/* ============================================================
   Agent Ibex chat — "texting the harbor agent" surface.
   Extends design-system.css. Chunky ink borders, hard shadows,
   craft accents. Three-column app shell: identity rail /
   conversation / live-extracted profile.
   ============================================================ */

:root {
  --chat-head-h: 54px;
}

body { overflow: hidden; }            /* app-shell: chat scrolls internally */

.shell {
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr) 304px;
  gap: 18px;
  padding: 18px 22px;
  max-width: 1560px;
  margin: 0 auto;
  height: calc(100dvh - 92px);
  min-height: 480px;
}

.rail { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding-bottom: 4px; }
.rail .card { padding: 18px; flex-shrink: 0; }

/* ---------------- left rail : identity ---------------- */
.idcard { overflow: hidden; }
.id-top { display: flex; gap: 14px; align-items: center; }
.avatar-frame {
  width: 108px; height: 108px; flex: 0 0 108px;
  background:
    linear-gradient(180deg, var(--sky) 0 62%, var(--water-light) 62% 78%, var(--water) 78%);
  border: var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  display: grid; place-items: center; overflow: hidden;
}
.avatar-letter {
  font-family: var(--font-display); font-size: 2.6rem; color: var(--ink);
  line-height: 1; user-select: none;
}

.id-name { font-size: 1.5rem; margin: 0 0 4px; }
.presence {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft);
  display: flex; align-items: center; gap: 7px; margin-top: 8px;
}
.live-dot {
  width: 10px; height: 10px; background: var(--grass);
  border: 2px solid var(--ink); box-shadow: var(--shadow-xs);
  animation: blinkdot 2.4s steps(2) infinite;
}
@keyframes blinkdot { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

.id-tagline {
  font-size: 0.86rem; color: var(--ink-soft); margin: 14px 0 12px;
  border-left: 4px solid var(--terracotta); padding-left: 10px; line-height: 1.4;
}

/* harbor wire — mini ticker */
.wire { border: var(--border-thin); border-radius: var(--radius-sm); background: var(--ink); color: var(--cream); overflow: hidden; }
.wire-label {
  display: block; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.18em; color: var(--sun); padding: 5px 10px 0;
}
.wire-ticker { overflow: hidden; white-space: nowrap; padding: 4px 0 7px; }
.wire-track {
  display: inline-block; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  animation: ticker 26s linear infinite;
}
.wire-track b { color: var(--water-light); }
.wire-track .sep { color: var(--terracotta-light); margin: 0 10px; }

/* ---------------- meter card ---------------- */
.meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.meter-pct { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.meter-segs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 10px 0 8px; }
.meter-segs i {
  height: 14px; background: var(--cream-2);
  border: 2px solid var(--ink); border-radius: 3px;
  transition: background 0.25s steps(3), transform 0.25s steps(3);
}
.meter-segs i.on { background: var(--water); }
.meter-segs i.on:last-child { background: var(--sun); }
.meter-segs i.pop { transform: translateY(-3px); }
.meter-sub { font-size: 0.66rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.metercard.done .meter-segs i { background: var(--grass); }

/* ---------------- channels ---------------- */
.chan-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.chan-list li {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  border: var(--border-thin); border-radius: var(--radius-sm);
  background: var(--cream-2); padding: 8px 10px;
}
.chan-list .cico {
  width: 24px; height: 24px; flex: 0 0 24px;
  border: 2px solid var(--ink); border-radius: 5px; box-shadow: var(--shadow-xs);
  display: grid; place-items: center;
  font-size: 0.62rem; font-style: normal;
}
.chan-list .ck { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6rem; }
.chan-list .cv { margin-left: auto; text-align: right; color: var(--ink); }

/* ---------------- chat column ---------------- */
.chat { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }

.chat-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: var(--border);
  background: var(--cream-2); position: relative;
}
.chat-head .chip { font-size: 0.78rem; padding: 6px 14px; }
.chat-sub { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.chat-head .switch {
  margin-left: auto; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  color: var(--water-deep); text-decoration: none; letter-spacing: 0.05em;
  border-bottom: 2px solid var(--water-deep); padding-bottom: 1px;
}
.chat-head .switch:hover { color: var(--terracotta); border-color: var(--terracotta); }
.mprog { display: none; position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; background: var(--cream-2); }
.mprog i { display: block; height: 100%; width: 0%; background: var(--water); transition: width 0.3s steps(6); }

/* message stream */
.msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 18px 8px; scroll-behavior: smooth; }
.msgs::-webkit-scrollbar { width: 10px; }
.msgs::-webkit-scrollbar-thumb { background: var(--timber-light); border: 2px solid var(--ink); }

.daypill { text-align: center; margin: 2px 0 16px; }
.daypill span {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em;
  background: var(--ink); color: var(--cream); padding: 4px 14px; border-radius: 4px;
}

.msg { display: flex; margin-bottom: 16px; animation: msgin 0.22s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
@keyframes msgin { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
.msg .aicon {
  width: 34px; height: 34px; flex: 0 0 34px; margin-right: 9px; margin-top: 2px;
  border: var(--border-thin); border-radius: 7px; background: var(--sky);
  box-shadow: var(--shadow-xs);
}
.msg .aicon.av-ph {
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 0.82rem; color: var(--ink);
}
.msg .body { max-width: 78%; }
.msg .bubble {
  border: var(--border-thin); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 0.92rem; line-height: 1.5;
  position: relative; word-wrap: break-word;
}
.msg .who { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-faint); margin-bottom: 4px; }
.msg .time { font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-faint); margin-top: 5px; letter-spacing: 0.05em; }

.msg.agent .bubble { background: var(--paper); box-shadow: var(--shadow-sm); }
.msg.agent.done .bubble { animation: ping 0.7s steps(4); }
@keyframes ping {
  0% { box-shadow: var(--shadow-sm), 0 0 0 0 rgba(242, 194, 75, 0.85); }
  60% { box-shadow: var(--shadow-sm), 0 0 0 7px rgba(242, 194, 75, 0.28); }
  100% { box-shadow: var(--shadow-sm), 0 0 0 10px rgba(242, 194, 75, 0); }
}

.msg.user { justify-content: flex-end; }
.msg.user .body { display: flex; flex-direction: column; align-items: flex-end; }
.msg.user .bubble {
  background: var(--water); color: #fff; box-shadow: var(--shadow-sm);
  border-color: var(--ink);
}
.msg.user .time { text-align: right; }

/* typewriter caret */
.caret {
  display: inline-block; width: 9px; height: 1.05em;
  background: var(--terracotta); vertical-align: text-bottom; margin-left: 2px;
  animation: caret 0.7s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* typing indicator — ink dots */
.msg.typing .bubble { padding: 12px 16px; display: flex; gap: 7px; align-items: center; }
.tdot { width: 11px; height: 11px; border: 2px solid var(--ink); box-shadow: var(--shadow-xs); animation: td 0.9s steps(3) infinite; }
.tdot:nth-child(1) { background: var(--water); }
.tdot:nth-child(2) { background: var(--terracotta); animation-delay: 0.15s; }
.tdot:nth-child(3) { background: var(--sun); animation-delay: 0.3s; }
@keyframes td { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }

/* ---------------- chips row + composer ---------------- */
.chips-row {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 4px;
  border-top: var(--border-thin); background: var(--cream-2);
  min-height: 20px;
}
.chips-row:empty { padding: 6px 14px; }
.qchip {
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700;
  border: var(--border-thin); border-radius: 999px; background: var(--paper);
  color: var(--ink); padding: 8px 15px; cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform 0.07s steps(2), box-shadow 0.07s steps(2), background 0.07s;
  animation: chipin 0.2s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}
@keyframes chipin { from { opacity: 0; transform: translateY(8px) scale(0.92); } }
.qchip:hover { background: var(--sun); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(47,39,29,.92); }
.qchip:active { transform: translate(2px, 2px); box-shadow: 0 0 0 rgba(47,39,29,.92); }
.qchip.q-info { background: var(--cream-2); color: var(--ink-soft); border-style: dashed; }
.qchip.q-info:hover { color: var(--ink); }
.qchip.q-go { background: var(--leaf); color: #fff; }
.qchip.q-go:hover { background: var(--grass); color: var(--ink); }

.composer {
  display: flex; gap: 10px; padding: 12px 14px;
  border-top: var(--border); background: var(--paper);
}
.composer input {
  flex: 1; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
  border: var(--border); border-radius: var(--radius-sm); background: var(--cream);
  padding: 12px 14px; outline: none;
  box-shadow: inset 2px 2px 0 rgba(47, 39, 29, 0.12);
}
.composer input:focus { background: var(--paper); box-shadow: inset 2px 2px 0 rgba(47,39,29,.12), 0 0 0 3px var(--water-light); }
.composer input::placeholder { color: var(--ink-faint); }
.btn-send { padding: 12px 20px; }

/* ---------------- payoff card (inside stream) ---------------- */
.msg.payoff .body { max-width: 92%; width: 92%; }
.paycard {
  border: var(--border); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow); overflow: hidden;
}
.paycard .p-head {
  background: var(--ink); color: var(--cream); padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.paycard .p-head .px-dot { border: 2px solid var(--cream); }
.paycard .p-inner { padding: 16px; }
.paycard h3 { margin: 0 0 6px; font-size: 1.3rem; }
.paycard .p-sub { color: var(--ink-soft); font-size: 0.88rem; margin-bottom: 12px; }

.buildsteps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.buildsteps li {
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700;
  display: flex; align-items: center; gap: 9px; color: var(--ink-faint);
}
.buildsteps li .bx {
  width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid var(--ink);
  background: var(--cream-2); display: grid; place-items: center;
  font-size: 0.6rem; color: transparent;
}
.buildsteps li.doing { color: var(--ink); }
.buildsteps li.doing .bx { background: var(--sun); animation: bxspin 0.5s steps(2) infinite; }
@keyframes bxspin { 50% { transform: scale(0.75); } }
.buildsteps li.ok { color: var(--ink); }
.buildsteps li.ok .bx { background: var(--grass); color: var(--ink); }

.pay-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.pay-actions.ready { opacity: 1; transform: none; }

/* buyer deal mini-cards */
.deal-list { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 12px; }
.deal {
  display: block; text-decoration: none; color: var(--ink);
  border: var(--border-thin); border-radius: var(--radius-sm); background: var(--cream);
  padding: 10px 12px; box-shadow: var(--shadow-xs);
  transition: transform 0.07s steps(2), box-shadow 0.07s steps(2);
}
.deal:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(47,39,29,.92); background: var(--paper); }
.deal .d-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.deal .d-name { font-family: var(--font-display); font-size: 0.86rem; text-transform: uppercase; }
.deal .d-nums { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; color: var(--water-deep); margin-left: auto; }
.deal .d-loc { font-family: var(--font-mono); font-size: 0.64rem; color: var(--ink-soft); margin-top: 3px; }
.deal .d-teaser { font-size: 0.78rem; color: var(--ink-soft); margin-top: 5px; line-height: 1.4; }
.deal .d-cta { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; color: var(--terracotta); margin-top: 6px; letter-spacing: 0.06em; }

/* ---------------- right rail : profile ---------------- */
.profile-rows { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.profile-rows li {
  border: var(--border-thin); border-radius: var(--radius-sm);
  background: var(--cream-2); padding: 8px 11px;
}
.profile-rows .fl {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.14em; color: var(--ink-faint); text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between;
}
.profile-rows .fl .tick { color: var(--leaf); font-size: 0.7rem; opacity: 0; }
.profile-rows li.filled .fl .tick { opacity: 1; }
.profile-rows .fv {
  font-size: 0.85rem; font-weight: 600; margin-top: 3px; min-height: 1.2em;
  color: var(--ink-faint); letter-spacing: 0.1em;
}
.profile-rows li.filled { background: var(--paper); }
.profile-rows li.filled .fv { color: var(--ink); letter-spacing: 0; }
.profile-rows li.flash { animation: fieldflash 0.7s steps(4); }
@keyframes fieldflash {
  0% { background: var(--sun); transform: translateY(-2px); }
  100% { background: var(--paper); }
}
.profile-note { font-size: 0.62rem; color: var(--ink-faint); margin: 12px 0 0; letter-spacing: 0.03em; }
#profileTag.done { background: var(--leaf); color: #fff; }

.next-steps { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 0.82rem; color: var(--ink-soft); }
.next-steps b { color: var(--ink); }
.next-steps li::marker { font-family: var(--font-mono); font-weight: 700; color: var(--terracotta); }

/* ---------------- responsive ---------------- */
@media (max-width: 1180px) {
  .shell { grid-template-columns: 270px minmax(0, 1fr); }
  .rail-r { display: contents; }
  .rail-r .profile { grid-column: 1 / -1; }
  .rail-r .nextcard { display: none; }
  .rail-r .profile .profile-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 760px) {
  body { overflow: auto; }
  .shell { grid-template-columns: 1fr; height: auto; padding: 10px 12px 20px; gap: 12px; }
  .rail { overflow: visible; display: contents; }
  .idcard { order: 1; padding: 12px; }
  .id-top { gap: 10px; }
  .avatar-frame { width: 64px; height: 64px; flex-basis: 64px; }
  .id-name { font-size: 1.1rem; }
  .id-tagline, .wire { display: none; }
  .chat { order: 2; height: 76dvh; min-height: 420px; }
  .rail-r .profile { order: 3; }
  .metercard { order: 4; }
  .chans { order: 5; }
  .chan-list { flex-direction: row; flex-wrap: wrap; }
  .msg .body { max-width: 88%; }
  .mprog { display: block; }
  .btn-send { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .msg, .qchip, .avatar-frame canvas, .live-dot, .tdot { animation: none !important; }
  .wire-track { animation: none; }
}