/* Concierge workspace (/shop). Three panes: shopper rail · conversation · order manifest.
   Self-contained; layers on the site's warm theme. */
@font-face{font-family:'MealPot Display';src:url('/fonts/fraunces-medium.ttf') format('truetype');font-weight:400 900;font-display:swap}
@font-face{font-family:'MealPot Sans';src:url('/fonts/dm-sans-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'MealPot Sans';src:url('/fonts/dm-sans-semibold.ttf') format('truetype');font-weight:600 900;font-display:swap}

.cx{
  --dark:#182219; --dark2:#212e22; --cream:#eaf0e7; --mut:#8c9f8d; --mut2:#69726a;
  --line:rgba(35,41,31,.09); --acc:#c2562a; --ink:#222922; --paper:#faf8f2; --user:#22301e;
  width:100%; margin:0;
  font-family:'MealPot Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink);
  display:grid; grid-template-columns:270px minmax(0,1fr) 340px;
  height:100vh; height:100dvh; overflow:hidden; font-size:15px;
}
body.app-shell{background:var(--paper,#faf8f2)}
.cx *{min-width:0}

/* ---------- shopper rail ---------- */
.cx-rail{background:var(--dark); color:var(--cream); padding:24px 22px 22px; display:flex; flex-direction:column; min-width:0}
.cx-eyebrow{display:flex; align-items:center; justify-content:space-between; gap:10px}
.cx-eyebrow .lbl{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:#c3d3c2; font-weight:700}
.cx-verified{display:inline-flex; align-items:center; gap:4px; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#9ec4a2; font-weight:700; white-space:nowrap}
.cx-verified svg{width:13px; height:13px; fill:#5bb162}

.cx-shopper{margin-top:24px; display:flex; gap:13px; align-items:center}
.cx-pfp{position:relative; width:50px; height:50px; flex:none}
.cx-pfp .mono{width:50px; height:50px; border-radius:14px; display:block; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 3px 8px rgba(0,0,0,.28)}
.cx-pfp .live{position:absolute; right:0; bottom:1px; width:13px; height:13px; border-radius:50%; background:#57b45f; border:2.5px solid var(--dark)}
.cx-shopper .nm{font-size:14.5px; font-weight:600; color:#eef3ea; line-height:1.25}
.cx-shopper .rl{font-size:11.5px; color:var(--mut); margin-top:2px}
.cx-shopper .rl b{color:#9ec4a2; font-weight:600}
.cx-shopstat{margin-top:12px; display:flex; align-items:center; gap:7px; font-size:11.5px; color:#c6d4c4; background:var(--dark2); border-radius:9px; padding:8px 11px}
.cx-shopstat .pd{width:6px; height:6px; border-radius:50%; background:#57b45f; box-shadow:0 0 0 3px rgba(87,180,95,.22); flex:none}

.cx-steps{margin-top:26px; padding-top:24px; border-top:1px solid rgba(233,240,231,.1); display:flex; flex-direction:column}
.cx-step{display:flex; gap:13px; position:relative; padding-bottom:26px}
.cx-step:last-child{padding-bottom:0}
.cx-step .n{width:22px; height:22px; border-radius:50%; border:1.5px solid #34452f; display:grid; place-items:center; font-size:10.5px; flex:none; background:var(--dark); color:var(--mut); position:relative; z-index:1}
.cx-step:not(:last-child) .n::after{content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%); width:2px; height:34px; background:#43563a}
.cx-step.done .n{background:#34452f; border-color:#34452f; color:#bfe0c2}
.cx-step.done .n .num{display:none}
.cx-step.done .n::before{content:"\2713"; font-size:11px}
.cx-step.done:not(:last-child) .n::after{background:#4f9455}
.cx-step.on .n{background:#4a8a50; border-color:#4a8a50; color:#fff; font-weight:700; box-shadow:0 0 0 4px rgba(74,138,80,.2)}
.cx-step .sl{font-size:13px; color:var(--mut); padding-top:4px; line-height:1.3}
.cx-step.done .sl{color:#cdd8ca}
.cx-step.on .sl{color:#fff; font-weight:600}
.cx-step .sl em{display:none; align-items:center; gap:5px; font-style:normal; font-size:10.5px; letter-spacing:.04em; color:#9ab89d; font-weight:600; margin-top:4px}
.cx-step.on .sl em{display:flex}
.cx-step .sl em::before{content:""; width:5px; height:5px; border-radius:50%; background:#57b45f}

.cx-trust{margin-top:auto; padding-top:18px; border-top:1px solid rgba(233,240,231,.13)}
.cx-trust .th{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:#e4ebe1}
.cx-trust .th svg{width:15px; height:15px; fill:#8fd096}
.cx-trust p{margin:8px 0 0; font-size:11.5px; line-height:1.6; color:#a7b8a7}

/* ---------- conversation canvas ---------- */
.cx-canvas{background:var(--paper); display:flex; flex-direction:column; min-width:0}
.cx-ctop{padding:26px 26px 18px; border-bottom:1px solid var(--line)}
.cx-meal{font-family:'MealPot Display',serif; font-weight:500; font-size:27px; letter-spacing:-.038em; margin:0; color:var(--ink); line-height:1.1}
.cx-oid{font-size:12.5px; color:var(--mut2); margin-top:6px}

.cx-log{flex:1; overflow-y:auto; padding:24px 26px; display:flex; flex-direction:column; min-height:0; scroll-behavior:smooth}
.cx-sender{display:flex; align-items:center; gap:8px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#a2aa9f; font-weight:700; margin-bottom:8px}
.cx-sender .av{width:22px; height:22px; border-radius:50%; background:#dfe6dc; display:grid; place-items:center; font-family:'MealPot Display',serif; color:#3c6b41; font-size:12px}
.cx-b{max-width:76%; padding:11px 15px; line-height:1.42; margin-bottom:14px; white-space:pre-wrap; word-wrap:break-word}
.cx-b.ai{align-self:flex-start; background:#fff; color:#2b332b; border:1px solid rgba(35,41,31,.1); border-radius:11px 11px 11px 3px}
.cx-b.me{align-self:flex-end; background:var(--user); color:#eef0e8; border-radius:11px 11px 3px 11px}
.cx-b.err{align-self:center; background:#fff4f0; color:#b23a1a; border:1px solid #f3d6c9; font-size:.9rem; border-radius:11px; max-width:88%}
.cx-b ul{margin:6px 0 0; padding-left:18px}

.cx-typing{align-self:flex-start; display:inline-flex; gap:4px; padding:13px 15px; background:#fff; border:1px solid rgba(35,41,31,.1); border-radius:11px 11px 11px 3px; margin-bottom:14px}
.cx-typing span{width:7px; height:7px; background:#b9c2b6; border-radius:50%; animation:cxblink 1.3s infinite both}
.cx-typing span:nth-child(2){animation-delay:.2s} .cx-typing span:nth-child(3){animation-delay:.4s}
@keyframes cxblink{0%,80%,100%{opacity:.3} 40%{opacity:1}}

.cx-comp{padding:14px 20px 18px}
.cx-composer{display:flex; gap:10px; align-items:center; min-width:0; background:#fff; border:1.5px solid #e0e4db; border-radius:12px; padding:6px 6px 6px 16px}
.cx-composer:focus-within{border-color:var(--acc)}
.cx-composer textarea{flex:1; min-width:0; width:auto; border:0; outline:0; resize:none; font:inherit; line-height:1.45; background:transparent; padding:9px 0; min-height:0; height:24px; max-height:120px; color:var(--ink)}
.cx-composer textarea::placeholder{color:#9aa39b}
.cx-composer button{border:0; background:var(--dark); color:#fff; border-radius:8px; padding:0 18px; height:40px; font-weight:600; cursor:pointer; flex:none}
.cx-composer button:disabled{opacity:.5; cursor:default}

/* ---------- order manifest ---------- */
.cx-order{background:#f6f8f4; border-left:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; min-width:0}
.cx-otop{padding:20px 20px 12px; display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.cx-otop .h{font-family:'MealPot Display',serif; font-size:21px; letter-spacing:-.02em}
.cx-otop .ct{font-size:12px; color:#9aa39b; font-weight:500; white-space:nowrap}
.cx-olist{flex:1; overflow-y:auto; padding:2px 20px}
.cx-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:6px 0; font-size:13.5px}
.cx-row .nm{color:#2c332a}
.cx-row .q{color:#34403a; font-weight:500; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; min-width:50px; text-align:right; white-space:nowrap}
.cx-empty{color:var(--mut2); font-size:13px; line-height:1.55; padding:16px 0}
.cx-deliv{margin-top:18px; padding-top:14px; border-top:1px solid var(--line)}
.cx-deliv .dl{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#a7b0a4; font-weight:700}
.cx-deliv .dv{font-size:12.5px; color:var(--ink); margin-top:4px; line-height:1.45}
.cx-deliv .dv span{display:block; color:var(--mut2)}
.cx-ofoot{padding:14px 20px 18px; border-top:1px solid var(--line); background:#fff}
.cx-ofoot .prow{display:flex; justify-content:space-between; font-size:12.5px; color:var(--mut2); margin-bottom:10px}
.cx-ofoot .prow b{color:#4a5249; font-weight:600}
.cx-approve{width:100%; border:0; background:var(--acc); color:#fff; border-radius:11px; padding:13px; font-weight:600; font-size:13.5px; cursor:pointer; box-shadow:0 6px 16px rgba(194,86,42,.22)}
.cx-approve:disabled{background:#d9cbc1; color:#fff; box-shadow:none; cursor:default}
.cx-approve.paid{background:#eaf4ea; color:#2f7a38; box-shadow:none; cursor:default}
.cx-ofoot .note{text-align:center; font-size:10.5px; color:#9aa39b; margin:8px 0 0}
.cx-ofoot .note.warn{color:#b23a1a}
/* quote card (shown once the shopper prices the list) */
.cx-quote{margin-bottom:12px}
.cx-quote .qline{display:flex; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--mut2); padding:3px 0}
.cx-quote .qline .v{font-variant-numeric:tabular-nums; color:#3a423b}
.cx-quote .qtotal{display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-top:9px; padding-top:10px; border-top:1px solid var(--line)}
.cx-quote .qtotal .l{font-weight:600; font-size:13px}
.cx-quote .qtotal .t{font-family:'MealPot Display',serif; font-size:22px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.cx-quote .qnote{font-size:11px; color:var(--mut2); line-height:1.5; margin:8px 0 0}
.cx-paid{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#2f7a38; background:#eef6ee; border:1px solid #d6e9d7; border-radius:10px; padding:11px 13px; margin-bottom:10px}
.cx-paid svg{width:16px; height:16px; fill:#2f7a38; flex:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .cx{grid-template-columns:minmax(0,1fr); height:auto; min-height:100vh; min-height:100dvh; overflow:visible}
  .cx-rail{padding:18px 18px 20px}
  .cx-eyebrow .lbl{white-space:nowrap}
  .cx-steps{display:none}
  .cx-trust{margin-top:18px}
  .cx-canvas{order:2; min-height:56vh}
  .cx-log{max-height:60vh}
  .cx-order{order:3; border-left:0; border-top:1px solid var(--line)}
}
@media (max-width:520px){
  .cx-meal{font-size:23px}
  .cx-ctop{padding:20px 20px 14px}
}