@font-face{font-family:'Syne';src:url('/fonts/syne-latin-ext.woff2') format('woff2');font-weight:700 800;font-display:swap}
@font-face{font-family:'Manrope';src:url('/fonts/manrope-latin-ext.woff2') format('woff2');font-weight:400 700;font-display:swap}

:root{
  --paper:#faf8f4;
  --white:#ffffff;
  --outgoing:#eef6f7;
  --ink:#0c1b1f;
  --muted:#0c1b1f99;
  --line:#0c1b1f1f;
  --coral:#ff5c2e;
  --sidebar:200px;
  --list:min(380px,42vw);
  --fs-meta:12px;
  --fs-body:13.5px;
  --fs-sub:16px;
  --fs-title:22px;
  --brand-nalu:#3d7a6a;
  --brand-visa:#4a6fa5;
  --brand-loc:#8b6914;
  --bottom-nav:56px;
  --touch:44px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overflow-x:hidden;max-width:100vw}
body{font-family:Manrope,system-ui,sans-serif;font-size:var(--fs-body);color:var(--ink);background:var(--paper);line-height:1.65}

.hidden{display:none!important}
.app{display:flex;height:100dvh;min-width:0;max-width:100vw;overflow:hidden;position:relative;padding-bottom:calc(var(--bottom-nav) + env(safe-area-inset-bottom,0px))}
@media (min-width:1000px){
  .app{padding-bottom:0}
}

.sidebar{display:none;width:var(--sidebar);flex-shrink:0;background:var(--paper);border-right:1px solid var(--line);flex-direction:column;padding:16px 0;overflow-y:auto}
@media (min-width:1000px){.sidebar{display:flex}}
.brand-mark{font-family:Syne,system-ui,sans-serif;font-weight:800;font-size:var(--fs-title);padding:0 16px 16px;letter-spacing:-.02em}
.nav-group{padding:0 16px 16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.nav-group:last-of-type{border-bottom:none;margin-bottom:0}
.nav-label{font-family:ui-monospace,monospace;font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.nav-item{display:flex;justify-content:space-between;align-items:center;min-height:var(--touch);padding:8px 0;text-decoration:none;color:var(--ink);font-size:var(--fs-body);border:none;background:none;width:100%;font:inherit;text-align:left;cursor:pointer}
.nav-item.active{font-weight:700}
.nav-count{font-family:ui-monospace,monospace;font-size:var(--fs-meta);color:var(--muted);flex-shrink:0}
.nav-item-sub{font-size:var(--fs-meta);color:var(--muted);font-weight:400;white-space:nowrap}
.sidebar-foot{padding:16px;margin-top:auto;border-top:1px solid var(--line);font-family:ui-monospace,monospace;font-size:var(--fs-meta);color:var(--muted);letter-spacing:.14em;text-transform:uppercase;line-height:1.8}

.main-col{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}

.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:var(--white);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0);height:calc(var(--bottom-nav) + env(safe-area-inset-bottom,0))}
@media (min-width:1000px){.bottom-nav{display:none}}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--bottom-nav);text-decoration:none;color:var(--muted);font-size:10px;gap:2px;padding:4px 2px;min-width:0;text-align:center;line-height:1.2}
.bottom-nav a.active{color:var(--ink);font-weight:700}
.bottom-nav a.active::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--coral);margin-bottom:2px}

.inbox-layout{display:flex;flex:1;min-width:0;overflow:hidden}
.thread-list{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--white);overflow:hidden}
@media (min-width:1000px){
  .thread-list{width:var(--list);flex:0 0 var(--list);border-right:1px solid var(--line)}
  .thread-list.only-list{flex:1;width:auto;max-width:none}
}
.list-head{padding:16px;border-bottom:1px solid var(--line);flex-shrink:0}
.list-title{font-family:Syne,system-ui,sans-serif;font-size:var(--fs-title);font-weight:700;margin-bottom:12px}
.chips-scroll{display:flex;gap:8px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.chips-scroll::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;min-height:var(--touch);padding:8px 12px;border:1px solid var(--line);background:var(--white);font:inherit;font-size:var(--fs-meta);cursor:pointer;color:var(--ink);text-decoration:none;white-space:nowrap;flex-shrink:0}
.chip.active{font-weight:700;border-color:var(--ink)}
.chip-count{font-family:ui-monospace,monospace;font-size:11px;color:var(--muted);margin-left:4px}
.mail-folder-chips{margin-bottom:8px}
.search{width:100%;min-height:var(--touch);padding:8px 12px;border:1px solid var(--line);font:inherit;font-size:var(--fs-meta);background:var(--paper);margin-top:12px}
.threads{overflow-y:auto;overflow-x:hidden;flex:1;-webkit-overflow-scrolling:touch}
.thread{display:block;padding:12px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;min-height:var(--touch);min-width:0}
.thread.active{background:var(--paper);box-shadow:inset 2px 0 0 var(--coral)}
.thread-row1{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px;min-width:0}
.thread-from{font-size:var(--fs-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.thread-time{font-family:ui-monospace,monospace;font-size:var(--fs-meta);color:var(--muted);flex-shrink:0}
.thread-subject{font-weight:700;font-size:var(--fs-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.thread-row3{display:flex;align-items:center;gap:8px;min-width:0}
.thread-preview{font-size:var(--fs-meta);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.thread-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.channel-tag{font-family:ui-monospace,monospace;font-size:11px;color:var(--muted);letter-spacing:.02em}
.status-tag{font-size:var(--fs-meta);color:var(--muted);text-transform:lowercase}
.status-tag.urgent{color:#e0451a;font-weight:600}
.brand-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.brand-dot.nalu{background:var(--brand-nalu)}
.brand-dot.visa{background:var(--brand-visa)}
.brand-dot.loc{background:var(--brand-loc)}

.conversation{display:none;flex:1;flex-direction:column;min-width:0;background:var(--paper);position:relative}
.conversation.open{display:flex}
@media (min-width:1000px){.conversation{display:flex}}
.conv-main{flex:1;display:flex;min-width:0;overflow:hidden;flex-direction:column}
@media (min-width:1000px){.conv-main{flex-direction:row}}
.conv-col{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.conv-head{padding:12px 16px;background:var(--white);border-bottom:1px solid var(--line);flex-shrink:0}
@media (min-width:1000px){.conv-head{padding:16px 24px}}
.back-link{display:inline-flex;align-items:center;min-height:var(--touch);font-size:var(--fs-body);color:var(--ink);text-decoration:none;font-weight:700;margin-bottom:8px}
@media (min-width:1000px){.back-link{display:none}}
.conv-title{font-family:Syne,system-ui,sans-serif;font-size:var(--fs-sub);font-weight:700;margin-bottom:8px;line-height:1.3}
@media (min-width:1000px){.conv-title{font-size:var(--fs-title)}}
.conv-meta{font-size:var(--fs-meta);color:var(--muted);line-height:1.5}
.conv-meta strong{color:var(--ink);font-weight:700;font-size:var(--fs-body)}
.head-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);padding:8px 16px;border:1px solid var(--line);background:var(--white);font:inherit;font-size:var(--fs-meta);cursor:pointer;color:var(--ink);text-decoration:none}
.btn-primary{background:var(--coral);border-color:var(--coral);color:var(--white);font-weight:700}
.btn:disabled{opacity:.45;cursor:not-allowed}
.composer-readonly textarea:disabled{opacity:.7;cursor:not-allowed}
.composer-note{font-size:var(--fs-meta);color:var(--muted);flex:1;min-width:0}
.empty-list{padding:16px;color:var(--muted);font-size:var(--fs-body)}
.wa-account-meta{font-size:var(--fs-meta);color:var(--muted);margin-bottom:8px}
.mail-read-pane{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
@media (max-width:999px){.mail-read-pane{min-height:340px}}
@media (min-width:1000px){.mail-read-pane{min-height:calc(100vh - 260px)}}
.messages{padding:16px 16px 32px;display:flex;flex-direction:column;gap:20px;overflow:visible;min-height:340px;width:100%;max-width:100%}
@media (min-width:1000px){.messages{padding:20px 24px 40px;min-height:calc(100vh - 280px)}}
.msg{max-width:760px;width:100%;margin:0 auto;background:var(--white);padding:16px 18px;border:1px solid var(--line)}
.msg.out{background:var(--outgoing);border-color:transparent}
.msg-head{display:flex;justify-content:space-between;margin-bottom:8px;font-size:var(--fs-meta);gap:8px}
.msg-from{font-weight:700;color:var(--ink)}
.msg-time{font-family:ui-monospace,monospace;color:var(--muted);flex-shrink:0}
.msg-body{font-size:15px;line-height:1.6;max-width:100%;word-break:break-word;overflow-wrap:break-word}
.msg-body p{margin:0 0 14px}
.msg-body p:last-child{margin-bottom:0}
.mail-msg-head{font-size:var(--fs-meta);border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:14px;color:var(--muted);line-height:1.45}
.mail-msg-line{display:flex;gap:10px;margin-bottom:2px;min-width:0}
.mail-msg-line:last-child{margin-bottom:0}
.mail-msg-k{min-width:3em;font-weight:700;color:var(--ink);flex-shrink:0}
.mail-msg-v{min-width:0;word-break:break-word}
.mail-body-read{min-width:0;max-width:100%;overflow-x:hidden}
.mail-plain-body{margin-bottom:4px}
.mail-fold-btn{margin:10px 0 0;font-size:var(--fs-meta)}
.mail-fold{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.mail-html-wrap{margin-top:0;display:flex;flex-direction:column;min-width:0;overflow-x:hidden}
.mail-html-frame{width:100%;border:none;background:transparent;min-height:120px;max-width:100%;display:block;overflow:hidden}
.mail-show-img{margin-bottom:8px}
.mail-img-warn{font-size:var(--fs-meta);color:#e0451a;margin-bottom:8px}
.compose-grid{display:grid;gap:8px;margin-bottom:12px}
@media (min-width:700px){.compose-grid{grid-template-columns:1fr 1fr}}
.compose-grid label.compose-od{grid-column:1/-1}
.compose-grid label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-meta);min-width:0}
.compose-grid input,.compose-grid select{min-height:var(--touch);padding:8px 12px;border:1px solid var(--line);font:inherit;font-size:var(--fs-body);background:var(--paper);width:100%}
.compose-page{max-width:720px}
.list-actions{margin-bottom:12px}
.composer-flash{font-size:var(--fs-meta);margin-bottom:8px;padding:8px 12px;border:1px solid var(--line)}
.composer-flash.ok{background:#eef6f7}
.composer-flash.err{background:#fff0eb;color:#e0451a}
.suggest-meta{font-size:var(--fs-meta);color:var(--muted);margin:8px 0}
#send-confirm-dialog{border:1px solid var(--line);padding:16px;max-width:min(420px,92vw)}
.dialog-actions{display:flex;gap:8px;margin-top:16px;justify-content:flex-end}

.composer{border-top:1px solid var(--line);background:var(--white);padding:12px 16px;flex-shrink:0;padding-bottom:max(12px,env(safe-area-inset-bottom,0))}
@media (min-width:1000px){.composer{padding:16px 24px}}
.mail-composer-panel .mail-compose-back{display:none;font-weight:700;margin-bottom:12px}
@media (max-width:999px){
  .mail-compose-active .conv-head{display:none}
  .mail-compose-active .mail-read-pane{display:none}
  .mail-compose-active .mail-composer-panel{
    position:fixed;inset:0;z-index:35;display:flex;flex-direction:column;
    overflow-y:auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0));
    border-top:none;
  }
  .mail-compose-active .mail-composer-panel .mail-compose-back{display:inline-flex}
  .mail-compose-active .mail-composer-panel .mail-send-form{flex:1;display:flex;flex-direction:column;min-height:0}
  .mail-compose-active .mail-composer-panel textarea{flex:1;min-height:200px;overflow-y:auto;resize:none}
  .mail-compose-active .mail-composer-actions{
    position:sticky;bottom:0;margin-top:auto;padding-top:12px;padding-bottom:env(safe-area-inset-bottom,0);
    background:var(--white);border-top:1px solid var(--line);
  }
  .mail-compose-active .mail-composer-foot{margin-top:0}
}
@media (min-width:1000px){
  .mail-compose-active .mail-read-pane{min-height:0;flex:32 1 0;max-height:none}
  .mail-compose-active .messages{min-height:0}
  .mail-compose-active .mail-composer-panel{
    position:static;flex:68 1 0;min-height:0;height:auto;max-height:none;
    display:flex;flex-direction:column;overflow:hidden;border-top:1px solid var(--line);
  }
  .mail-compose-active .compose-grid{gap:4px;margin-bottom:4px}
  .mail-compose-active .compose-grid input,.mail-compose-active .compose-grid select{min-height:36px;padding:4px 10px}
  .mail-compose-active .mail-composer-panel .mail-send-form{
    flex:1;display:grid;grid-template-rows:auto minmax(200px,1fr) auto;min-height:0;overflow:hidden;gap:8px;
  }
  .mail-compose-active .mail-composer-panel .compose-grid{grid-row:1}
  .mail-compose-active .mail-composer-panel textarea{
    grid-row:2;min-height:200px;max-height:100%;overflow-y:auto;resize:none;margin:0;
  }
  .mail-compose-active .mail-composer-actions{
    grid-row:3;flex-shrink:0;background:var(--white);border-top:1px solid var(--line);
    padding-top:8px;padding-bottom:max(4px,env(safe-area-inset-bottom,0));
  }
  .mail-compose-active .mail-composer-actions .composer-tools{margin-bottom:8px}
  .mail-compose-active .mail-composer-actions .composer-foot{margin-top:0}
  .mail-composer-panel{position:static;flex-shrink:0}
}
.mail-composer-actions .composer-tools{margin-bottom:0}
.composer-tools{display:flex;gap:8px;margin-bottom:12px;overflow-x:auto;flex-wrap:nowrap}
.mail-composer-panel textarea{width:100%;min-height:200px;padding:12px;border:1px solid var(--line);font:inherit;font-size:var(--fs-body);line-height:1.65;resize:vertical;background:var(--paper);max-width:100%;overflow-y:auto}
.composer textarea{width:100%;min-height:120px;padding:12px;border:1px solid var(--line);font:inherit;font-size:var(--fs-body);line-height:1.65;resize:vertical;background:var(--paper);max-width:100%}
.composer-foot{display:flex;gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap}
.toast{font-size:var(--fs-meta);color:var(--muted);display:none}
.toast.show{display:block}

.client-panel{display:none;background:var(--white);border-left:1px solid var(--line);overflow-y:auto;padding:24px 16px}
@media (min-width:1000px){
  .client-panel.desktop-side{width:320px;flex-shrink:0;display:block}
}
.client-panel.sheet{position:fixed;left:0;right:0;bottom:0;max-height:85dvh;border-radius:16px 16px 0 0;border:1px solid var(--line);z-index:30;box-shadow:0 -8px 32px #0c1b1f22;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
.client-panel.sheet.open{display:block}
.sheet-backdrop{position:fixed;inset:0;background:#0c1b1f66;z-index:25;display:none}
.sheet-backdrop.open{display:block}
@media (min-width:1000px){.sheet-backdrop{display:none!important}}
.sheet-handle{width:40px;height:4px;background:var(--line);border-radius:2px;margin:0 auto 16px}
.client-panel h2{font-family:Syne,system-ui,sans-serif;font-size:var(--fs-sub);font-weight:700;margin-bottom:16px}
.section{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.section:last-child{border-bottom:none}
.sec-label{font-family:ui-monospace,monospace;font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.kv-wide{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-meta);margin-bottom:8px;min-width:0}
.kv-wide span:last-child{font-family:ui-monospace,monospace;text-align:right}
.progress{height:8px;background:var(--line);margin:8px 0}
.progress-bar{height:100%;background:var(--brand-nalu)}
.history-item{font-size:var(--fs-meta);padding:8px 0;border-bottom:1px solid var(--line);color:var(--muted)}

.data-view{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--paper)}
.data-head{padding:16px;background:var(--white);border-bottom:1px solid var(--line);flex-shrink:0}
@media (min-width:1000px){.data-head{padding:24px 24px 16px}}
.data-title{font-family:Syne,system-ui,sans-serif;font-size:var(--fs-title);font-weight:700;margin-bottom:16px}
.data-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px;min-width:0;-webkit-overflow-scrolling:touch}
@media (min-width:1000px){.data-body{padding:24px}}
.data-summary{font-size:var(--fs-body);margin-bottom:16px;color:var(--ink)}
.orders-tabs{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;flex-wrap:nowrap}
.orders-tabs a{min-height:var(--touch);padding:8px 16px;border:1px solid var(--line);background:var(--white);text-decoration:none;color:var(--ink);font-size:var(--fs-meta);white-space:nowrap;flex-shrink:0}
.orders-tabs a.active{font-weight:700;border-color:var(--ink)}

.data-table-wrap{border:1px solid var(--line);background:var(--white);overflow:hidden;min-width:0;display:none}
@media (min-width:1000px){.data-table-wrap{display:block}}
.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.data-table th,.data-table td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left}
.data-table th{font-family:ui-monospace,monospace;font-size:var(--fs-meta);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400;background:var(--paper)}
.data-table tr:last-child td{border-bottom:none}
.data-table .mono{font-family:ui-monospace,monospace;font-size:var(--fs-meta)}
.data-table .status-cell{font-size:var(--fs-meta);color:var(--muted);text-transform:lowercase}
.date-urgent{color:var(--coral);font-family:ui-monospace,monospace;font-size:var(--fs-meta);font-weight:700}

.card-list{display:flex;flex-direction:column;gap:8px}
@media (min-width:1000px){.card-list{display:none}}
.order-card,.support-card{background:var(--white);border:1px solid var(--line);padding:12px 16px}
.card-row{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-meta);padding:4px 0}
.card-row .lbl{color:var(--muted);flex-shrink:0}
.card-row .val{text-align:right;font-family:ui-monospace,monospace;min-width:0;word-break:break-word}

.support-stats{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;font-size:var(--fs-body)}
.support-stats span.old48{color:var(--coral);font-weight:700}

.page-list{padding:16px}
.page-list a{display:flex;align-items:center;min-height:var(--touch);padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:var(--fs-sub)}
.page-list .sub{font-size:var(--fs-meta);color:var(--muted);margin-left:auto}

.channel-row{padding:16px;border-bottom:1px solid var(--line);background:var(--white)}
.channel-row h3{font-size:var(--fs-sub);margin-bottom:4px}
.channel-row p{font-size:var(--fs-meta);color:var(--muted)}

.login-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--paper)}
.login-box{width:100%;max-width:360px;background:var(--white);border:1px solid var(--line);padding:24px}
.login-box h1{font-family:Syne,system-ui,sans-serif;font-size:var(--fs-title);margin-bottom:16px}
.login-box input{width:100%;min-height:var(--touch);padding:8px 12px;border:1px solid var(--line);font:inherit;margin-bottom:12px}
.login-box .err{color:var(--coral);font-size:var(--fs-meta);margin-bottom:12px}
.env-table{width:100%;border-collapse:collapse}
.env-table td{padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--fs-body)}
.env-table td:last-child{font-family:ui-monospace,monospace;font-size:var(--fs-meta);text-align:right}

.mobile-hide-conv .conversation{display:none!important}
.mobile-hide-list .thread-list{display:none!important}
@media (min-width:1000px){
  .mobile-hide-conv .conversation,.mobile-hide-list .thread-list{display:flex!important}
}
.sync-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0 4px;font-size:var(--fs-meta);color:var(--muted)}
.sync-form{margin:0}
.btn-sm{min-height:32px;padding:4px 12px;font-size:var(--fs-meta)}