:root{--bg:#f5f6f7;--white:#fff;--ink:#172328;--muted:#7c8990;--line:#e7ebec;--dark:#121e24;--accent:#126f61;--accent2:#0b5b50;--red:#b9452e;--soft:#e9f5f1;--shadow:0 6px 24px #2030380a;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-size:14px}body{background:var(--bg)}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}input,select,textarea{border:1px solid #dce3e4;border-radius:8px;background:#fff;padding:10px 12px;color:var(--ink);min-width:0;width:100%}textarea{resize:vertical}input:focus,textarea:focus,select:focus{outline:2px solid #b6dcd3;border-color:#488f83}.hidden{display:none!important}.app{display:flex;height:100dvh;overflow:hidden}.sidebar{width:222px;flex-shrink:0;background:var(--dark);color:#c7d3d6;display:flex;flex-direction:column;padding:25px 13px 18px}.side-brand{display:flex;align-items:center;gap:12px;padding:1px 8px 39px}.side-brand strong{color:#fff;display:block;font-size:19px;font-weight:740;letter-spacing:-.6px}.side-brand small{display:block;letter-spacing:1.25px;font-size:9px;margin-top:4px;color:#9bb1b8}.brand-logo{display:grid;place-items:center;width:62px;height:62px;border-radius:17px;font-size:37px;font-weight:900;color:#fff;background:#176c60;letter-spacing:-3px}.brand-logo span{color:#f4bb77}.brand-logo.small{height:37px;width:37px;font-size:23px;border-radius:11px;flex:none}.nav-item{display:flex;width:100%;align-items:center;gap:12px;text-align:left;border:0;background:transparent;color:#adbdc2;padding:13px 14px;border-radius:9px;font-size:13px;margin-bottom:5px;font-weight:600}.nav-item>span:first-child{font-size:19px;font-weight:400;width:20px;text-align:center}.nav-item.active,.nav-item:hover{color:white;background:#25383c}.nav-count{margin-left:auto;border-radius:30px;background:#e8b76b;color:#15262a;padding:2px 7px;font-size:11px}.side-bottom{margin-top:auto;display:flex;align-items:center;gap:8px;border-top:1px solid #2a383b;padding:20px 6px 0;font-size:12px;color:#afc1c4}.side-bottom small{display:block;font-size:10px;margin-left:auto;color:#82979e}.connection-dot{width:8px;height:8px;background:#41b88b;border-radius:50%;box-shadow:0 0 0 4px #41b88b1b}.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:auto}.topbar{height:90px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 29px;background:#fff;border-bottom:1px solid var(--line)}.eyebrow{color:var(--accent);font-weight:800;letter-spacing:1.7px;font-size:10px}.topbar h1{font-size:23px;letter-spacing:-.8px;margin:5px 0 0;font-weight:780}.top-actions{display:flex;align-items:center;gap:16px}.tiny-muted{font-size:11px;color:var(--muted)}.subtle-btn,.secondary{border:1px solid #dce3e3;background:#fff;color:#394e53;padding:9px 13px;border-radius:8px;font-weight:650}.subtle-btn:hover,.secondary:hover{border-color:#89b3aa}.primary{background:var(--accent);border:1px solid var(--accent);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700}.primary:hover{background:var(--accent2)}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:17px 28px 18px}.metric{border:1px solid var(--line);border-radius:11px;background:white;padding:14px 16px;box-shadow:var(--shadow)}.metric small{display:block;text-transform:uppercase;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.75px;margin-bottom:9px}.metric strong{font-size:22px;font-weight:760;letter-spacing:-.9px}.metric em{font-style:normal;color:#b37b37;font-size:10px;margin-left:7px}.view{display:none;padding:0 28px 26px;min-width:0}.view.active{display:block}.view#inbox-view{flex:1;min-height:0;overflow:hidden}.inbox-shell{border:1px solid var(--line);border-radius:12px;overflow:hidden;display:grid;grid-template-columns:minmax(255px,28%) minmax(330px,1fr) minmax(265px,27%);background:#fff;height:100%;box-shadow:var(--shadow)}.conversation-list,.chat-pane,.details-pane{min-width:0;min-height:0;display:flex;flex-direction:column}.conversation-list{border-right:1px solid var(--line)}.chat-pane{background:#f9faf9}.details-pane{border-left:1px solid var(--line);overflow-y:auto}.list-head{display:flex;justify-content:space-between;align-items:center;padding:19px 17px 13px}.list-head strong{font-size:15px}.list-head span{font-size:11px;color:var(--muted)}.search-wrapper{padding:0 12px 12px}.search-wrapper input{background:#f4f7f7;border:0}.filter-pills{display:flex;gap:6px;padding:0 12px 12px;overflow-x:auto}.filter-pills button{flex-shrink:0;border:0;background:#f1f4f5;border-radius:30px;padding:7px 10px;font-size:11px;color:#6e7a7f;font-weight:650}.filter-pills button.on{background:var(--soft);color:var(--accent2)}.conversations{overflow-y:auto;flex:1;border-top:1px solid var(--line)}.conv{display:flex;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid #f1f3f4;padding:14px 12px;gap:10px;min-height:86px}.conv:hover{background:#f8faf9}.conv.chosen{background:#eaf4f1;border-left:3px solid #18816d;padding-left:9px}.avatar{width:39px;height:39px;flex-shrink:0;border-radius:13px;background:#e5eaea;color:#456163;display:grid;place-items:center;font-weight:780}.conv-main{min-width:0;flex:1}.conv-line{display:flex;justify-content:space-between;gap:5px;align-items:center}.conv-name{font-weight:740;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.conv-time{font-size:10px;color:var(--muted);flex:none}.conv-last{font-size:12px;color:#758287;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:6px 0}.conv-badges{display:flex;gap:5px;align-items:center}.chip{font-size:10px;font-weight:680;color:#42605e;padding:4px 7px;background:#eef2f1;border-radius:4px;white-space:nowrap}.chip.win{background:#e0f4e8;color:#17875a}.chip.lost{background:#f9e8e5;color:#b0544b}.unread{margin-left:auto;border-radius:50px;background:#1b9a74;color:#fff;font-size:10px;padding:2px 5px}.empty-state{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.7;color:#88969a;padding:38px;max-width:400px;margin:auto}.empty-state.smaller{font-size:13px}.chat-head{display:flex;align-items:center;gap:11px;background:#fff;border-bottom:1px solid var(--line);padding:13px 17px}.chat-head h3{margin:0 0 4px;font-size:14px}.chat-head small{font-size:11px;color:var(--muted)}.chat-scroll{overflow-y:auto;flex:1;padding:24px;background-color:#f7f9f8;background-image:radial-gradient(#d9e3df 0.7px,transparent 0.7px);background-size:22px 22px;display:flex;flex-direction:column;gap:10px}.bubble{max-width:85%;border-radius:11px;padding:10px 12px;background:white;border:1px solid #ebeeee;box-shadow:0 1px 2px #00000008;align-self:flex-start;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;font-size:13px}.bubble.out{align-self:flex-end;background:#dcf2e9;border-color:#cbede0}.bubble time{display:block;font-size:10px;color:#78918d;text-align:right;margin-top:5px}.composer{padding:13px 15px;background:white;border-top:1px solid var(--line);display:flex;gap:9px;align-items:end}.composer textarea{min-height:48px;max-height:120px;resize:vertical}.composer button{height:48px;white-space:nowrap}.detail-section{border-bottom:1px solid var(--line);padding:18px}.detail-section h3{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#738188;margin:0 0 13px}.detail-profile{text-align:center;padding:23px 10px 16px}.detail-profile .avatar{width:55px;height:55px;border-radius:18px;font-size:21px;margin:0 auto 8px}.detail-profile strong{display:block;font-size:16px}.detail-profile small{display:block;color:var(--muted);margin-top:4px}.tag-buttons{display:flex;flex-wrap:wrap;gap:6px}.tag-toggle{border:1px solid #dde6e3;border-radius:6px;background:#fff;color:#657479;padding:7px 9px;font-size:11px;font-weight:600}.tag-toggle.selected{background:#d8eee7;border-color:#a0d6c2;color:#006c53}.tag-toggle:hover{border-color:#93b9ac}.detail-section label{font-size:11px;color:#718084;display:block;font-weight:650;margin:9px 0 6px}.detail-section textarea{width:100%}.detail-section button.full{width:100%;margin-top:9px}.detail-section .meta-info{color:#839395;font-size:11px}.status-pill{font-size:10px;background:#e1f4ed;color:#117b57;border-radius:5px;padding:5px 8px;font-weight:700;display:inline-flex}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:9px 0 17px}.section-heading h2{font-size:19px;letter-spacing:-.4px;margin:0}.section-heading p,.recipe-panel p{font-size:12px;color:#7b898e;margin:6px 0}.panel{background:#fff;border:1px solid var(--line);border-radius:11px;padding:18px;margin-bottom:18px;box-shadow:var(--shadow)}.panel h3{margin:0 0 16px;font-size:15px}.catalog-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.stack-form{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:8px}.inline-form{display:grid;grid-template-columns:1fr 1fr;gap:8px}.data-row{padding:11px 0;border-bottom:1px solid #f0f2f3;display:flex;justify-content:space-between;gap:12px;align-items:center}.data-row .caption,.muted{font-size:11px;color:var(--muted)}.data-row strong{display:block}.data-row-actions{display:flex;gap:8px;align-items:center}.mini-btn{border:1px solid #dae7e1;background:#fff;color:var(--accent2);border-radius:7px;padding:7px 9px;font-size:11px;font-weight:750}.recipe-form{display:grid;grid-template-columns:1fr 1fr 110px auto;gap:10px}.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:18px}table{border-collapse:collapse;width:100%;font-size:12px}th,td{padding:15px;text-align:left;border-bottom:1px solid #edf0f1;white-space:nowrap}th{color:#71838a;background:#fafbfb;font-weight:700;font-size:11px}tr:last-child td{border-bottom:0}.pill{border-radius:6px;padding:5px 8px;font-size:10px;font-weight:750;background:#eef1f2;color:#596b73}.pill.good{background:#e1f3e8;color:#21825a}.pill.warn{background:#fff0dc;color:#936628}.error-text{color:#b9452e;font-size:12px}.login-page{min-height:100dvh;display:grid;place-items:center;padding:24px;background:linear-gradient(130deg,#10292c,#11262b 55%,#235447)}.login-card{background:white;border-radius:18px;width:min(430px,100%);padding:38px;box-shadow:0 25px 80px #050e143b}.login-card .brand-logo{margin-bottom:30px}.login-card h1{font-size:27px;letter-spacing:-1.2px;margin:7px 0}.login-card p{color:#79868b;line-height:1.5}.login-card form{margin-top:25px;display:grid;gap:16px}.login-card label{font-size:12px;font-weight:700;display:grid;gap:7px}.full{width:100%}#toast{position:fixed;bottom:22px;right:22px;z-index:20;pointer-events:none}.toast-message{padding:12px 18px;color:white;background:#273c42;border-radius:8px;box-shadow:0 9px 26px #0003;min-width:160px;font-size:13px}.toast-message.bad{background:#a7453e}@media(max-width:1180px){.sidebar{width:170px}.metrics{padding:12px;gap:8px}.topbar{padding:0 14px}.view{padding:0 12px 15px}.inbox-shell{grid-template-columns:230px minmax(280px,1fr) 245px}.detail-section{padding:13px}.nav-item{padding:11px 8px}}@media(max-width:980px){.sidebar{width:65px;align-items:center;padding:15px 6px}.side-brand>span:nth-child(2),.nav-item{font-size:0}.nav-item{justify-content:center}.nav-item>span:first-child{font-size:23px}.side-bottom{font-size:0}.side-bottom small{display:none}.inbox-shell{grid-template-columns:225px 1fr}.details-pane{display:none}.inbox-shell.with-details{grid-template-columns:220px 1fr 275px}.inbox-shell.with-details .details-pane{display:flex}.top-actions .tiny-muted{display:none}}@media(max-width:700px){.app{display:block;height:100dvh;overflow:auto}.sidebar{height:58px;width:100%;flex-direction:row;padding:5px 10px;justify-content:space-between}.side-brand{padding:0;gap:6px}.side-brand>span:nth-child(2){display:block}.side-brand small{display:none!important}.side-brand strong{font-size:13px}.sidebar nav{display:flex;gap:3px}.nav-item{padding:7px;margin:0;width:40px}.nav-item>span:first-child{font-size:20px}.side-bottom{display:none}.main{height:calc(100dvh - 58px)}.topbar{height:63px}.topbar h1{font-size:19px}.top-actions .subtle-btn{padding:7px;font-size:11px}.metrics{grid-template-columns:repeat(2,1fr);gap:6px;padding:8px}.metric{padding:9px}.metric strong{font-size:17px}.view#inbox-view{padding:0 6px 6px}.inbox-shell{border-radius:9px;grid-template-columns:1fr}.conversation-list{display:flex}.chat-pane,.details-pane{display:none}.inbox-shell.mobile-chat .conversation-list{display:none}.inbox-shell.mobile-chat .chat-pane{display:flex}.inbox-shell.mobile-details .conversation-list,.inbox-shell.mobile-details .chat-pane{display:none}.inbox-shell.mobile-details .details-pane{display:flex}.inbox-shell.with-details{grid-template-columns:1fr}.list-head{padding:13px}.chat-scroll{padding:12px}.chat-head{gap:8px}.mobile-back{display:inline-flex!important}.catalog-grid{grid-template-columns:1fr}.recipe-form{grid-template-columns:1fr 1fr}.section-heading{margin:9px 0}.top-actions .tiny-muted{display:none}}.mobile-back{display:none;background:transparent;border:0;color:var(--accent);font-weight:700;font-size:18px}.detail-section .actions{display:flex;gap:6px}.detail-section input{margin-bottom:5px}


/* Mobile-first refinement: keep chat and order editing usable on narrow devices. */
@media (max-width:700px) {
  html, body { width:100%; overflow-x:hidden; }
  .app { display:block; height:100dvh; overflow:hidden; }
  .sidebar {
    position:fixed; inset:auto 0 0 0; z-index:18;
    width:100%; height:calc(63px + env(safe-area-inset-bottom));
    padding:6px 9px max(6px,env(safe-area-inset-bottom));
    flex-direction:row; justify-content:stretch; align-items:center;
    border-top:1px solid #34494a; box-shadow:0 -4px 20px #00000015;
  }
  .side-brand,.side-bottom { display:none; }
  .sidebar nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; width:100%; height:100%; }
  .nav-item {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:100%; height:100%; margin:0; gap:1px; padding:4px 2px;
    position:relative; font-size:0; border-radius:9px;
  }
  .nav-item>span:first-child { font-size:19px; width:auto; line-height:22px; }
  .nav-item::after { content:attr(data-label); display:block; font-size:10px; line-height:12px; font-weight:650; }
  .nav-count { position:absolute; margin:0; top:1px; right:calc(50% - 30px); font-size:10px; padding:1px 5px; }
  .main {
    display:flex; flex-direction:column; min-width:0; min-height:0;
    height:100dvh; padding-bottom:calc(63px + env(safe-area-inset-bottom));
    overflow:hidden;
  }
  .topbar { height:auto; min-height:67px; padding:10px 12px; gap:9px; flex-wrap:wrap; }
  .topbar h1 { font-size:18px; letter-spacing:-.5px; margin-top:2px; }
  .topbar .eyebrow { font-size:9px; }
  .top-actions { gap:6px; }
  .top-actions .subtle-btn { max-width:138px; padding:8px 9px; font-size:11px; line-height:1.25; }
  .metrics {
    display:flex; flex:0 0 auto; overflow-x:auto; gap:7px;
    padding:8px 10px; scroll-snap-type:x mandatory; scrollbar-width:none;
  }
  .metrics::-webkit-scrollbar { display:none; }
  .metric { min-width:156px; max-width:156px; min-height:73px; padding:9px 11px; flex:0 0 156px; scroll-snap-align:start; box-shadow:none; }
  .metric small { font-size:9px; letter-spacing:.35px; margin-bottom:4px; }
  .metric strong { font-size:17px; display:block; line-height:20px; }
  .metric em { margin:3px 0 0; font-size:10px; display:block; }
  .view { flex:1; min-height:0; overflow-y:auto; padding:10px 9px 12px; }
  .view#inbox-view { flex:1; min-height:0; padding:0 7px 8px; overflow:hidden; }
  .inbox-shell { height:100%; width:100%; min-height:0; grid-template-columns:minmax(0,1fr); border-radius:10px; }
  .inbox-shell.with-details { grid-template-columns:minmax(0,1fr); }
  .conversation-list,.chat-pane,.details-pane { min-height:0; min-width:0; }
  .details-pane { overflow-y:auto; padding-bottom:20px; }
  .details-pane .detail-section { padding:15px 14px; }
  .detail-section h3 { font-size:11px; }
  .detail-section input,.detail-section textarea,.detail-section select,
  .composer textarea { font-size:16px; }
  .detail-section .primary.full,.detail-section .secondary.full { padding:13px 12px; font-size:14px; }
  .detail-profile { padding:17px 12px 15px; }
  .chat-head { padding:9px 11px; }
  .chat-head .subtle-btn { white-space:normal; font-size:11px; padding:8px 9px; }
  .composer { padding:9px; }
  .composer button { padding:8px 11px; }
  #toast { bottom:calc(75px + env(safe-area-inset-bottom)); left:12px; right:12px; }
  .toast-message { max-width:100%; font-size:13px; }
  #order-form .primary.full { min-height:48px; }
}