/* ============================================================================
   AMD Texts — staff messaging console
   Design system: Catppuccin Mocha — matched 1:1 to the VA portal (assets/portal.css)
   Pure reskin: every selector below is consumed by the existing templates + app.js,
   so the look changes and the behavior does not.
   ============================================================================ */
:root{
  /* Catppuccin Mocha — identical tokens to the VA portal */
  --base:#1e1e2e; --mantle:#181825; --crust:#11111b;
  --ink:#cdd6f4; --text:#cdd6f4; --muted:#a6adc8; --overlay:#7f849c;
  --surface0:#313244; --surface1:#45475a; --surface2:#585b70; --line:#313244;
  --blue:#89b4fa; --lavender:#b4befe; --sapphire:#74c7ec; --sky:#89dceb;
  --teal:#94e2d5; --green:#a6e3a1; --yellow:#f9e2af; --peach:#fab387;
  --maroon:#eba0ac; --red:#f38ba8; --mauve:#cba6f7; --pink:#f5c2e7;
  /* semantic aliases used across the console */
  --brand:#89b4fa; --accent:#89b4fa; --accent-d:#b4befe;
  --send:#a6e3a1; --send-d:#94e2d5; --amber:#f9e2af; --amber-bg:rgba(249,226,175,.10);
  --grad:linear-gradient(135deg,var(--blue),var(--mauve));
  --shadow:0 12px 32px rgba(0,0,0,.35);
  --radius:14px;
  --font:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'Fira Code','JetBrains Mono','Cascadia Code',monospace;
  --serif:'Georgia','Times New Roman',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{font-family:var(--font);background:var(--base);color:var(--text);font-size:15px;
  line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:rgba(137,180,250,.30)}

/* scrollbars — match the portal */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--crust)}
::-webkit-scrollbar-thumb{background:var(--surface1);border-radius:6px;border:2px solid var(--crust)}
::-webkit-scrollbar-thumb:hover{background:var(--surface2)}

/* ── top bar ─────────────────────────────────────────── */
.top{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;
  background:rgba(17,17,27,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--surface0);
  position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:38px;height:38px;border-radius:10px;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:19px;background:var(--grad);box-shadow:0 4px 14px rgba(137,180,250,.35)}
.brand-txt{font-weight:800;font-size:16px;letter-spacing:.2px;line-height:1.1;
  font-family:var(--serif);font-style:italic;
  background:linear-gradient(90deg,var(--blue),var(--mauve),var(--pink));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.brand-txt small{display:block;font-family:var(--font);font-style:normal;font-weight:500;
  font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--overlay);
  -webkit-text-fill-color:var(--overlay);margin-top:2px}
.top-right{display:flex;align-items:center;gap:12px}
.status{color:var(--muted);font-size:12.5px;font-family:var(--mono)}
.logout{color:var(--blue);text-decoration:none;font-weight:600;font-size:13.5px;padding:7px 12px;border-radius:9px;transition:.14s}
.logout:hover{background:var(--surface0);color:var(--lavender)}
.iconbtn{background:var(--mantle);border:1px solid var(--surface0);border-radius:9px;font-size:15px;
  padding:6px 11px;cursor:pointer;line-height:1;color:var(--muted);opacity:.8;transition:.14s}
.iconbtn:hover{border-color:var(--surface1);opacity:1}
.iconbtn.on{background:rgba(137,180,250,.15);border-color:var(--blue);opacity:1}

/* ── layout ──────────────────────────────────────────── */
.app{display:grid;grid-template-columns:340px 1fr 300px;height:calc(100vh - 60px);position:relative}
.sidebar{background:var(--crust);border-right:1px solid var(--surface0);display:flex;flex-direction:column;min-height:0;min-width:0}
.thread{display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;background:var(--base)}

/* ── sidebar head ────────────────────────────────────── */
.side-head{padding:14px 14px 10px;border-bottom:1px solid var(--surface0);display:flex;flex-direction:column;gap:10px}
.newbtn{align-self:stretch;background:var(--grad);color:var(--crust);border:none;font-weight:700;
  font-size:13.5px;padding:10px 14px;border-radius:10px;cursor:pointer;transition:.15s}
.newbtn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(137,180,250,.25)}
.search-wrap{position:relative}
.search{width:100%;border:1px solid var(--surface0);background:var(--mantle);border-radius:10px;
  padding:10px 13px;font-size:13.5px;color:var(--text);outline:none;font-family:var(--font);transition:border-color .15s}
.search::placeholder{color:var(--overlay)}
.search:focus{border-color:var(--blue)}
.filters{display:flex;gap:8px}
.chip{border:1px solid var(--surface0);background:var(--mantle);color:var(--muted);border-radius:20px;
  padding:6px 13px;font-size:12.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.14s}
.chip:hover{border-color:var(--surface1);color:var(--text)}
.chip.active{background:rgba(137,180,250,.16);color:var(--blue);border-color:var(--blue)}
.needbadge{background:var(--amber);color:var(--crust);border-radius:10px;font-size:11px;
  font-weight:800;padding:1px 7px;min-width:18px;text-align:center}
.chip.active .needbadge{background:var(--blue);color:var(--crust)}

/* ── conversation list ───────────────────────────────── */
.list{flex:1;overflow-y:auto;min-height:0}
.row{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid var(--surface0);cursor:pointer;
  align-items:center;position:relative;transition:background .12s}
.row:hover{background:var(--surface0)}
.row.active{background:linear-gradient(90deg,rgba(137,180,250,.16),rgba(203,166,247,.05))}
.row.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--grad)}
.row.need{background:rgba(249,226,175,.07)}
.row.need.active{background:linear-gradient(90deg,rgba(249,226,175,.16),rgba(203,166,247,.05))}
.avatar{width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:15px;color:#fff;background:var(--surface2);
  box-shadow:0 2px 8px rgba(0,0,0,.25)}
.row-main{flex:1;min-width:0}
.row-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0}
.row-name{font-weight:600;font-size:14.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-name.unknown{color:var(--muted)}
.row-time{color:var(--overlay);font-size:11.5px;font-family:var(--mono);flex:none}
.row-prev{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--amber);flex:none;margin-left:4px;box-shadow:0 0 0 3px rgba(249,226,175,.14)}
.hflag{width:19px;height:19px;border-radius:50%;background:rgba(166,227,161,.16);color:var(--green);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;border:1px solid rgba(166,227,161,.4);margin-left:4px}
.list-empty{padding:34px 18px;text-align:center;color:var(--overlay);font-size:13.5px}

/* ── thread pane ─────────────────────────────────────── */
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--overlay);gap:12px;
  background:radial-gradient(ellipse at top,rgba(137,180,250,.08),transparent 62%)}
.empty-emoji{font-size:44px;opacity:.45}
.thread-inner{display:flex;flex-direction:column;height:100%;min-height:0}
.thread-head{display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--mantle);border-bottom:1px solid var(--surface0)}
.back{display:none;background:none;border:none;font-size:26px;color:var(--blue);cursor:pointer;line-height:1;padding:0 4px 0 0}
.who{flex:1;min-width:0}
.who-name{font-weight:700;font-size:16px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-sub{color:var(--muted);font-size:12.5px;font-family:var(--mono);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.callbtn{color:var(--crust);background:var(--green);text-decoration:none;font-weight:700;font-size:13.5px;
  padding:8px 15px;border-radius:9px;flex:none;transition:.15s}
.callbtn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(166,227,161,.25)}
.hdrbtn{background:var(--surface0);border:1px solid var(--surface1);border-radius:9px;font-weight:600;font-size:13px;
  color:var(--text);padding:8px 13px;cursor:pointer;flex:none;white-space:nowrap;transition:.14s}
.hdrbtn:hover{border-color:var(--blue)}
.hdrbtn.on{background:rgba(166,227,161,.16);border-color:rgba(166,227,161,.4);color:var(--green)}

/* vehicle bar — which car this conversation is about, links to the live VDP */
.vehbar{display:flex;align-items:center;gap:10px;padding:11px 18px;text-decoration:none;color:var(--text);
  cursor:pointer;min-width:0;border-bottom:1px solid var(--surface0);
  background:linear-gradient(135deg,rgba(137,180,250,.12),rgba(203,166,247,.05));transition:.14s}
.vehbar:hover{background:linear-gradient(135deg,rgba(137,180,250,.20),rgba(203,166,247,.08))}
.veh-ic{font-size:18px;flex:none}
.veh-label{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.veh-tag{font-size:10.5px;font-weight:800;letter-spacing:.4px;padding:2px 8px;border-radius:10px;flex:none}
.veh-go{margin-left:auto;color:var(--blue);font-weight:700;font-size:12.5px;white-space:nowrap;flex:none}
.vehbar.sold{background:rgba(243,139,168,.10);cursor:default}
.vehbar.sold:hover{background:rgba(243,139,168,.10)}
.vehbar.sold .veh-tag{background:rgba(243,139,168,.18);color:var(--red)}
.vehbar.sold .veh-go{color:var(--overlay);font-weight:600}
.vehbar.none{background:var(--mantle);cursor:default;color:var(--muted)}
.vehbar.none:hover{background:var(--mantle)}
.vehbar.none .veh-ic{opacity:.5}

.messages{flex:1;overflow-y:auto;min-height:0;padding:20px 18px;display:flex;flex-direction:column;gap:8px;
  background:radial-gradient(ellipse at top,rgba(137,180,250,.05),transparent 55%),var(--base)}
.bubble{max-width:74%;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.45;
  word-wrap:break-word;white-space:pre-wrap}
.bubble.them{background:var(--surface0);color:var(--text);align-self:flex-start;border:1px solid var(--surface1);border-bottom-left-radius:5px}
.bubble.us{background:var(--grad);color:var(--crust);align-self:flex-end;border-bottom-right-radius:5px;box-shadow:0 4px 14px rgba(137,180,250,.18);font-weight:500}
.bubble .meta{display:block;font-size:10.5px;margin-top:4px;opacity:.7;font-family:var(--mono)}
.bubble.us .meta{color:var(--crust);opacity:.6}
.bubble.us.failed{background:rgba(243,139,168,.14);color:var(--red);border:1px solid rgba(243,139,168,.45);box-shadow:none;font-weight:400}
.bubble.us.failed .meta{color:var(--red);opacity:1}
.retry{background:none;border:none;color:var(--red);font-weight:700;font-size:11px;cursor:pointer;text-decoration:underline;padding:0 0 0 8px}
.retry.dismiss{color:var(--overlay);text-decoration:none}
.daysep{align-self:center;color:var(--overlay);font-size:11.5px;font-family:var(--mono);background:var(--mantle);
  border:1px solid var(--surface0);padding:3px 12px;border-radius:20px;margin:6px 0}

/* ── composer ────────────────────────────────────────── */
.composer{border-top:1px solid var(--surface0);background:var(--mantle);padding:12px 16px 16px}
.quick{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.quickbtn{background:var(--surface0);color:var(--lavender);border:1px solid var(--surface1);border-radius:20px;
  padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.14s}
.quickbtn:hover{border-color:var(--blue);color:var(--blue)}
.replyform{display:flex;gap:10px;align-items:flex-end}
.replybox{flex:1;border:1px solid var(--surface0);background:var(--crust);color:var(--text);border-radius:18px;
  padding:11px 16px;font-size:14.5px;resize:none;max-height:140px;outline:none;font-family:var(--font);line-height:1.45;transition:border-color .15s}
.replybox::placeholder{color:var(--overlay)}
.replybox:focus{border-color:var(--blue)}
.sendbtn{background:var(--green);color:var(--crust);border:none;border-radius:18px;padding:0 22px;height:43px;
  font-weight:700;font-size:14.5px;cursor:pointer;flex:none;transition:.15s}
.sendbtn:hover{background:var(--teal);transform:translateY(-1px)}
.sendbtn:disabled{opacity:.5;cursor:default;transform:none}

/* ── modals ──────────────────────────────────────────── */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);display:flex;
  align-items:center;justify-content:center;z-index:50;padding:18px}
.modal{background:var(--mantle);border:1px solid var(--surface0);border-radius:16px;padding:24px;width:100%;
  max-width:420px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.modal-title{font-weight:700;font-size:18px;color:var(--text);margin-bottom:6px}
.modal-label{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:6px}
.modal-input{border:1px solid var(--surface0);background:var(--crust);color:var(--text);border-radius:10px;
  padding:11px 13px;font-size:14.5px;font-family:var(--font);outline:none;transition:border-color .15s}
.modal-input::placeholder{color:var(--overlay)}
.modal-input:focus{border-color:var(--blue)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--surface1);border-radius:10px;padding:10px 16px;font-weight:600;cursor:pointer;transition:.14s}
.btn-ghost:hover{background:var(--surface0);border-color:var(--blue)}
.btn-primary{background:var(--grad);color:var(--crust);border:none;border-radius:10px;padding:10px 18px;font-weight:700;cursor:pointer;transition:.15s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(137,180,250,.25)}

/* ── toast ───────────────────────────────────────────── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--surface0);color:var(--text);
  border:1px solid var(--surface1);padding:11px 18px;border-radius:11px;font-size:13.5px;font-weight:500;z-index:60;box-shadow:var(--shadow)}
.toast.err{background:rgba(243,139,168,.18);border-color:var(--red);color:var(--red)}

/* ── login ───────────────────────────────────────────── */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--base);
  background-image:radial-gradient(ellipse at top,rgba(137,180,250,.14),transparent 60%)}
.login-card{background:var(--mantle);border:1px solid var(--surface0);border-radius:18px;padding:32px 30px;width:100%;
  max-width:380px;box-shadow:var(--shadow);display:flex;flex-direction:column;margin:18px}
.login-brand{display:flex;align-items:center;gap:13px;margin-bottom:24px}
.login-logo{width:46px;height:46px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:24px;background:var(--grad);box-shadow:0 4px 16px rgba(137,180,250,.35)}
.login-title{font-family:var(--serif);font-style:italic;font-weight:700;font-size:23px;letter-spacing:.2px;
  background:linear-gradient(90deg,var(--blue),var(--mauve),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.login-sub{color:var(--overlay);font-size:11.5px;letter-spacing:.4px;margin-top:3px}
.login-label{font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:8px}
.login-input{border:1px solid var(--surface0);background:var(--crust);color:var(--text);border-radius:11px;
  padding:12px 14px;font-size:15px;font-family:var(--font);outline:none;transition:border-color .15s}
.login-input::placeholder{color:var(--overlay)}
.login-input:focus{border-color:var(--blue)}
.login-error{background:rgba(243,139,168,.12);color:var(--red);border:1px solid rgba(243,139,168,.4);border-radius:9px;padding:9px 12px;font-size:13px;margin-top:12px}
.login-btn{margin-top:20px;background:var(--grad);color:var(--crust);border:none;border-radius:11px;padding:13px;font-weight:700;font-size:15px;cursor:pointer;transition:.15s}
.login-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(137,180,250,.3)}
.login-foot{color:var(--overlay);font-size:11.5px;text-align:center;margin-top:18px}

/* ── right rail: customer card + quick replies ───────── */
.rail{background:var(--crust);border-left:1px solid var(--surface0);overflow-y:auto;min-width:0;display:flex;flex-direction:column}
.rail-empty{padding:26px 18px;color:var(--overlay);font-size:13px;text-align:center;margin-top:20px}
.rail-body{display:flex;flex-direction:column}
.rail-card{padding:18px 16px;border-bottom:1px solid var(--surface0)}
.cc-top{display:flex;gap:11px;align-items:center;margin-bottom:12px}
.cc-name{font-weight:700;font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:8px 0;border-top:1px solid var(--surface0)}
.cc-row .k{color:var(--overlay);flex:none}
.cc-row .v{font-weight:600;color:var(--text);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-row a.v{color:var(--blue);text-decoration:none}
.cc-row a.v:hover{color:var(--lavender)}
.cc-sold{color:var(--red)}
.rail-section{padding:16px}
.rail-h{font-size:10.5px;font-weight:700;color:var(--overlay);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:11px}
.rail-note{color:var(--overlay);font-size:11.5px;margin-top:11px}
.qlist{display:flex;flex-direction:column;gap:8px}
.qbtn{text-align:left;background:var(--mantle);border:1px solid var(--surface0);border-radius:10px;padding:10px 12px;
  font-size:13px;color:var(--text);cursor:pointer;line-height:1.35;transition:.14s}
.qbtn:hover{border-color:var(--blue);background:var(--surface0)}
.qbtn .qb-label{font-weight:600;display:block}
.qbtn .qb-prev{color:var(--muted);font-size:11.5px;display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qbtn.credit{border-color:rgba(137,180,250,.4)}
.qbtn.car{border-color:rgba(166,227,161,.4)}

/* inline quick-reply tray (⚡ button, esp. on narrow screens) */
.qtray{display:flex;flex-wrap:wrap;gap:7px;padding:0 0 10px}
.qtray .qchip{background:var(--surface0);border:1px solid var(--surface1);border-radius:16px;padding:7px 12px;
  font-size:12px;font-weight:600;color:var(--lavender);cursor:pointer;transition:.14s}
.qtray .qchip:hover{border-color:var(--blue);color:var(--blue)}

/* ── responsive: drop the rail on mid widths ─────────── */
@media(max-width:1080px){
  .app{grid-template-columns:340px 1fr}
  .rail{display:none}
}
/* ── responsive (phone) ──────────────────────────────── */
@media(max-width:760px){
  .app{grid-template-columns:1fr}
  .thread{position:absolute;inset:0;background:var(--base);transform:translateX(100%);transition:transform .22s ease;z-index:30}
  .app.show-thread .thread{transform:translateX(0)}
  .back{display:block}
}