/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/staff/assets/heebo-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/staff/assets/heebo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{--ink:#172e2d;--ink-2:#3d5452;--muted:#657875;--green:#146b55;--green-2:#1f8a6d;--line:#e3e9e4;--line-2:#d3ddd6;--paper:#ffffff;--canvas:#f6f8f5;--side:#f3f6f1;--mint:#e7f2eb;--amber:#8c5715;--amber-bg:#f7ecd8;--danger:#a23333;--danger-bg:#f6e1dd;--radius:12px;--shadow:0 1px 2px rgba(23,46,45,.05),0 1px 1px rgba(23,46,45,.03)}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,"Noto Sans Hebrew",sans-serif;font-size:15px;line-height:1.55}
button,input,textarea{font:inherit}
button{cursor:pointer;border:0}
button:disabled{cursor:wait;opacity:.55}
a{color:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #7eab94;outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wordmark{font-size:27px;font-weight:750;letter-spacing:-1.5px;color:var(--ink)}
.wordmark span{font-size:14px;color:#58a77a;margin-left:2px}
.eyebrow{font-size:12px;letter-spacing:.06em;font-weight:700;color:var(--green);margin:0 0 8px}
h1{font-size:30px;line-height:1.2;letter-spacing:-.6px;margin:0 0 6px}
h2{margin:0;font-size:16px;font-weight:650}
.muted{color:var(--muted);margin:0}
label{font-size:14px;font-weight:600}
input,textarea{border:1px solid var(--line-2);background:white;padding:10px 12px;border-radius:9px;color:var(--ink);width:100%}
input{min-height:42px}
.primary{background:var(--green);color:white;border-radius:9px;padding:10px 18px;font-weight:650;min-height:42px}
.primary:hover{background:#0f5a47}
.error{color:var(--danger);font-size:14px}
.error.banner{background:var(--danger-bg);border-radius:9px;padding:10px 14px;margin:0 32px 16px}

/* Login */

/* Login: matches tryresponds.com (bone surface, WhatsApp green, pill controls). */
.login-shell{--site-ink:#10231d;--site-soft:#31463f;--site-body:#3f5951;--site-bone:#f7f4ef;--site-line:#e4ddd2;--site-wa:#008069;--site-wa-dark:#00604a;--site-wa-bright:#00a884;--site-wa-out:#d9fdd3;--site-wa-wall:#efe7de;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100dvh;background:var(--site-bone);color:var(--site-body);font-family:'Heebo',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.login-card{width:100%;max-width:480px;margin:auto;padding:40px 32px}
.login-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:56px}
.site-brand{display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--site-ink);text-decoration:none}
.site-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--site-wa);color:#fff;box-shadow:0 8px 18px -10px rgba(0,128,105,.9);flex-shrink:0}
.login-back{font-size:14px;color:var(--site-soft);text-decoration:none;padding:8px 14px;border-radius:999px}
.login-back:hover{background:#efe9e0;color:var(--site-ink)}
.login-eyebrow{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--site-wa-dark)}
.login-card h1{font-size:clamp(30px,3.4vw,42px);font-weight:600;line-height:1.12;letter-spacing:-.028em;color:var(--site-ink);margin:0 0 12px;text-wrap:balance}
.login-lede{margin:0;font-size:16.5px;line-height:1.65}
.login-card form{display:grid;gap:8px;margin-top:30px}
.login-card label{font-size:14px;font-weight:600;color:var(--site-ink)}
.login-card input{min-height:50px;border:1.5px solid var(--site-line);border-radius:14px;background:#fff;padding:12px 16px;font-size:16px}
.login-card input:focus-visible{outline:3px solid var(--site-wa);outline-offset:1px;border-color:var(--site-wa)}
.login-card label+input{margin-bottom:6px}
.login-submit{margin-top:12px;min-height:52px;border-radius:999px;background:var(--site-wa);color:#fff;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 14px 30px -16px rgba(0,128,105,.85);transition:background .16s,transform .16s}
.login-submit:hover{background:var(--site-wa-dark);transform:translateY(-1px)}
.login-forgot{justify-self:start;background:none;color:var(--site-wa-dark);font-size:14px;font-weight:500;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.login-forgot:hover{color:var(--site-ink)}
.login-notice{margin:24px 0 0;background:#e6f2ed;color:var(--site-wa-dark);border-radius:12px;padding:10px 14px;font-size:14.5px;font-weight:500}
.reset-panel h1{font-size:clamp(28px,3vw,36px)}
.reset-panel form{display:grid;gap:8px;margin-top:4px}
.reset-panel .login-lede{margin:0 0 18px}
#reset-sent-to{overflow-wrap:anywhere}
.code-input{font-size:26px!important;letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums}
.field-hint{margin:-2px 0 6px;font-size:13px;color:#556c64}
.reset-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:6px}
.reset-back{margin-top:18px;text-decoration:none}
.login-help{margin:22px 0 0;font-size:13.5px;color:#556c64}
.login-help a{color:var(--site-wa-dark)}
.login-art{background:var(--site-ink);display:flex;align-items:center;justify-content:center;padding:56px;position:relative;overflow:hidden}
.login-art::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(0,168,132,.28),transparent 68%);top:-140px;left:-160px}
.login-art-inner{position:relative;width:min(400px,100%);display:grid;gap:32px}
.login-art-title{margin:0;color:#f7f4ef;font-size:clamp(30px,3vw,42px);font-weight:600;line-height:1.15;letter-spacing:-.025em}
.wa-card{border-radius:22px;overflow:hidden;background:var(--site-wa-wall);box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.wa-head{display:flex;align-items:center;gap:10px;background:var(--site-wa-dark);color:#fff;padding:12px 16px}
.wa-head strong{display:block;font-size:14.5px;font-weight:600}
.wa-head small{font-size:12px;color:#c9eee3}
.wa-avatar{width:34px;height:34px;border-radius:50%;background:var(--site-wa-bright);display:grid;place-items:center}
.wa-avatar svg{width:17px;height:17px}
.wa-body{display:grid;gap:8px;padding:18px 14px 20px}
.wa-body p{margin:0;max-width:82%;padding:8px 11px 6px;border-radius:12px;font-size:14px;line-height:1.5;color:#111b21;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.wa-body small{display:block;text-align:left;font-size:10.5px;color:#667781;margin-top:2px}
.wa-in{justify-self:start;background:#fff;border-top-right-radius:4px}
.wa-out{justify-self:end;background:var(--site-wa-out);border-top-left-radius:4px}

/* Shell */
.app{display:grid;grid-template-columns:244px 1fr;min-height:100dvh}
.sidebar{background:var(--side);border-left:1px solid var(--line);display:flex;flex-direction:column;padding:22px 14px 16px;position:sticky;top:0;height:100dvh}
.side-top{padding:0 10px 18px}
.side-top .wordmark{font-size:24px}
.business-chip{font-size:13px;color:var(--muted);margin-top:4px}
.side-nav{display:grid;gap:2px}
.nav-group{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);margin:10px 10px 6px}
.side-nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--ink-2);font-size:14px;font-weight:550}
.side-nav a:hover{background:#e8eee6}
.side-nav a.active{background:var(--paper);color:var(--ink);box-shadow:var(--shadow);font-weight:650}
.nav-icon{width:18px;text-align:center;color:var(--muted);font-size:14px}
.side-nav a.active .nav-icon{color:var(--green)}
.nav-count{margin-right:auto;font-size:11px;font-weight:700;background:#dde7df;color:var(--ink-2);border-radius:10px;padding:1px 7px;min-width:20px;text-align:center}
.nav-count:empty{display:none}
.nav-count.alert{background:var(--danger-bg);color:var(--danger)}
.side-bottom{margin-top:auto;display:grid;gap:12px}
.side-note{font-size:12px;color:var(--muted);margin:0;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.user-card{display:flex;gap:10px;align-items:center;padding:8px 10px;font-size:14px}
.user-card strong{display:block;font-weight:650}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--green);color:white;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.link-button{background:none;color:var(--muted);padding:0;font-size:12px}
.link-button:hover{color:var(--green);text-decoration:underline}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 32px;border-bottom:1px solid var(--line);background:var(--paper)}
.crumbs{display:flex;gap:8px;font-size:13px;color:var(--muted)}
.crumbs strong{color:var(--ink);font-weight:600}
.connection{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:12px;color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green-2)}
.dot.offline{background:var(--danger)}
.ghost-button{background:var(--paper);border:1px solid var(--line-2);color:var(--ink);border-radius:8px;padding:5px 12px;font-size:13px}
.ghost-button:hover{background:var(--canvas)}
.text-button{background:transparent;color:var(--green);padding:8px;font-size:14px;border-radius:6px}
.text-button:hover{background:var(--mint)}
.view{padding:28px 32px 40px;max-width:1440px;width:100%}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}

/* Home */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.kpi,.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.kpi{padding:16px 18px}
.kpi-label{margin:0;font-size:13px;color:var(--muted);font-weight:550}
.kpi-value{margin:6px 0 2px;font-size:30px;font-weight:700;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.kpi-sub{margin:0;font-size:12px;color:var(--muted);min-height:18px}
.kpi.warn .kpi-value{color:var(--danger)}
.grid-2{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin-bottom:16px}
.grid-2.wide-first{grid-template-columns:1.6fr 1fr}
.card{padding:18px 20px;min-width:0}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-meta{font-size:12px;color:var(--muted)}
.card-link{font-size:13px;color:var(--green);text-decoration:none;font-weight:600}
.card-link:hover{text-decoration:underline}
.sub-head{font-size:14px;font-weight:650;margin:22px 0 10px}
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid-line{stroke:var(--line);stroke-width:1}
.chart .axis-label{fill:var(--muted);font-size:11px}
.chart .bar{fill:var(--green)}
.chart .bar-hit{fill:transparent;cursor:default}
.chart .bar-hit:hover+.bar,.chart .bar.hover{fill:var(--green-2)}
.tooltip{position:fixed;z-index:20;pointer-events:none;background:var(--ink);color:white;font-size:12px;padding:6px 9px;border-radius:7px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.needs{display:grid;gap:2px}
.need{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:right;background:none;padding:10px 8px;border-radius:9px;color:var(--ink)}
.need:hover{background:var(--canvas)}
.need-icon{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;font-size:14px;background:var(--amber-bg);color:var(--amber)}
.need-icon.danger{background:var(--danger-bg);color:var(--danger)}
.need-body{min-width:0;flex:1}
.need-title{display:flex;justify-content:space-between;gap:8px;font-weight:600;font-size:14px}
.need-text{font-size:13px;color:var(--muted);margin:2px 0 0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.empty-small{color:var(--muted);font-size:14px;padding:18px 8px;margin:0}
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:right;font-size:12px;font-weight:600;color:var(--muted);padding:0 10px 8px;border-bottom:1px solid var(--line)}
.table td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.table tr:last-child td{border-bottom:0}
.table tbody tr.clickable{cursor:pointer}
.table tbody tr.clickable:hover td{background:var(--canvas)}
.table.compact td{padding:8px 10px}
.table .num{font-variant-numeric:tabular-nums}
.cell-who strong{display:block;font-weight:600}
.cell-text{color:var(--muted);max-width:360px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.cell-time{color:var(--muted);white-space:nowrap;font-size:13px}
.reply-bars{display:grid;gap:8px}
.reply-row{display:grid;grid-template-columns:110px 1fr 38px;gap:10px;align-items:center;font-size:13px}
.reply-track{height:8px;background:var(--canvas);border-radius:4px;overflow:hidden}
.reply-fill{height:100%;border-radius:4px;background:var(--green)}
.reply-fill.warn{background:var(--amber)}
.reply-fill.danger{background:var(--danger)}

/* Boards (tasks + conversations) */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:4px}
.tabs button{background:transparent;color:var(--muted);border-radius:7px;padding:7px 12px;font-size:13px;font-weight:550}
.tabs button:hover{color:var(--ink)}
.tabs button.active{background:var(--ink);color:white}
.tabs span{font-size:11px;padding:1px 6px;margin-right:4px;border-radius:4px;background:#17302d14}
.tabs button.active span{background:#ffffff26}
.search{width:260px}
.search input{background:var(--paper);font-size:14px}
.board{display:grid;grid-template-columns:360px 1fr;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);min-height:560px;overflow:hidden;box-shadow:var(--shadow)}
.task-list{border-left:1px solid var(--line);max-height:calc(100dvh - 230px);min-height:560px;overflow:auto}
.task-item{display:block;width:100%;text-align:right;background:transparent;border-bottom:1px solid var(--line);padding:16px 18px;position:relative;color:var(--ink)}
.task-item:hover{background:var(--canvas)}
.task-item.selected{background:#eef5ee;box-shadow:inset -3px 0 var(--green)}
.task-item h3{margin:0;font-size:15px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.task-item .preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;color:var(--muted);margin:6px 0}
.task-meta{display:flex;justify-content:space-between;gap:8px;align-items:center}
.timestamp{font-size:12px;color:var(--muted)}
.badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:5px;white-space:nowrap;background:#e7eee8;color:#345e4d}
.badge.pending,.badge.human{background:var(--amber-bg);color:var(--amber)}
.badge.unknown,.badge.creating,.badge.failed{background:var(--danger-bg);color:var(--danger)}
.badge.done,.badge.superseded{background:#eef0ee;color:var(--muted)}
.detail{padding:28px;min-width:0;position:relative;max-height:calc(100dvh - 230px);min-height:560px;overflow:auto}
.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:20px}
.detail-head h2{font-size:22px}
.phone{direction:ltr;unicode-bidi:isolate;display:inline-block;color:var(--muted);font-size:14px}
.section-label{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);margin:20px 0 8px}
.summary{margin:0;background:var(--canvas);border-radius:10px;padding:12px 14px}
.time-card{margin-top:12px;background:var(--mint);border-radius:10px;padding:10px 14px;font-weight:600;font-size:14px}
.note-label{display:block;margin:22px 0 6px}
.actions{display:flex;gap:10px;margin-top:12px}
.footnote{font-size:12px;color:var(--muted);margin:8px 0}
.back{display:none}
.empty{display:grid;place-items:center;text-align:center;padding:60px 20px;color:var(--muted)}
.empty h2{color:var(--ink);margin-bottom:6px}
.empty p{margin:0}
.empty-symbol{font-size:28px;color:var(--green);margin-bottom:8px}
.history{display:grid;gap:10px;margin-top:16px}
.message{max-width:78%;padding:10px 13px;border-radius:12px;white-space:pre-wrap;font-size:14px;line-height:1.5}
.message.customer{justify-self:start;background:var(--canvas);border:1px solid var(--line);border-top-right-radius:4px}
.message.agent{justify-self:end;background:#e3f1e8;border-top-left-radius:4px}
.message.staff{justify-self:end;background:#fff3dc;border-top-left-radius:4px}
.speaker{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:3px}
.msg-meta{display:flex;gap:8px;font-size:11px;color:var(--muted);margin-top:5px}
.msg-meta .bad{color:var(--danger);font-weight:600}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12px;background:var(--canvas);border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--ink-2)}
.chip.bad{background:var(--danger-bg);border-color:transparent;color:var(--danger)}
.chip.link{cursor:pointer}
.chip.link:hover{border-color:var(--green);color:var(--green)}
.day-sep{justify-self:center;font-size:11px;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:2px 10px;margin:6px 0}

@media (max-width:1100px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid-2,.grid-2.wide-first{grid-template-columns:1fr}
}
@media (max-width:820px){
  .login-shell{grid-template-columns:1fr}.login-art{display:none}
  .login-card{padding:24px 20px 40px}.login-top{margin-bottom:40px}
  .app{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px;border-left:0;border-bottom:1px solid var(--line)}
  .side-top{padding:0;display:flex;align-items:baseline;gap:10px}
  .side-top .wordmark{font-size:21px}
  .side-nav{display:flex;order:3;width:100%;overflow-x:auto}
  .nav-group,.side-note{display:none}
  .side-nav a{white-space:nowrap}
  .side-bottom{margin:0 auto 0 0}
  .user-card{padding:0}.user-card strong{display:none}.avatar{width:30px;height:30px}
  .topbar{padding:0 16px;height:48px}
  .view{padding:18px 16px 32px}
  .error.banner{margin:0 16px 12px}
  h1{font-size:24px}
  .kpis{gap:10px}.kpi{padding:12px 14px}.kpi-value{font-size:24px}
  .toolbar{flex-direction:column;align-items:stretch}
  .tabs{overflow-x:auto;flex-wrap:nowrap}.tabs button{white-space:nowrap}
  .search{width:100%}
  .board{grid-template-columns:1fr;min-height:auto}
  .task-list,.detail{max-height:none;min-height:0;border-left:0}
  .board .detail{display:none}
  .board.show-detail .task-list{display:none}
  .board.show-detail .detail{display:block}
  .back{display:inline-block;margin-bottom:12px}
  .detail{padding:18px 16px}
  .message{max-width:92%}
  .cell-text{max-width:160px}
}

/* Conversation review states */
.load-more{display:block;margin:12px auto;min-height:44px}
.list-count{padding:0 18px;text-align:center}
.action-results{display:grid;gap:8px}
.action-result .footnote{margin:4px 0 0}
.context-sep{font-size:12px;text-align:center;color:var(--muted);border-block:1px solid var(--line);padding:10px 0;margin:8px 0}
.prior-label{display:block;font-size:11px;color:var(--muted);margin-top:6px}
.message.external{justify-self:end;background:#fff3dc;border-top-left-radius:4px}
.message{overflow-wrap:anywhere}