:root{--bg:#f5f9f8;--ink:#193b40;--muted:#7d9498;--edge:#e3efed;--teal:#0d9183;--teal2:#1fbaad;--blue:#4a86d3;--surface:#fff;--shadow:0 8px 32px rgba(29,91,89,.045)}*{box-sizing:border-box}body{margin:0;background:var(--bg);font:14px/1.5 Inter,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink)}button,input{font:inherit}button{cursor:pointer}.shell{display:flex;min-height:100vh}.sidebar{width:224px;flex-shrink:0;position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--edge);padding:25px 17px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;margin-bottom:51px}.brand strong{display:block;font-size:15px;letter-spacing:-.4px}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.3px;margin-top:2px}.brand-mark{background:linear-gradient(145deg,#26c7ab,#078878);color:#fff;width:39px;height:39px;border-radius:12px;display:grid;place-items:center;font-size:27px}.side-label,.section-overline,.eyebrow{font-size:10px;letter-spacing:1.75px;font-weight:800;color:#8da4a7}.side-label{margin:0 0 13px 13px}.side-link{border:0;background:transparent;text-align:left;color:#728a8e;display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:12px;font-weight:650;width:100%;font-size:14px;margin:3px 0}.side-link.active{color:#07877e;background:#e8f8f5}.side-note{margin-top:auto;background:#f0f8f6;border:1px solid #e5f2ef;padding:13px;display:flex;border-radius:12px;gap:10px;font-size:11px;font-weight:750}.side-note small{display:block;font-size:10px;color:var(--muted);font-weight:450;margin-top:4px}.shield{color:var(--teal);font-size:23px}.main{max-width:1530px;min-width:0;width:100%;margin:auto;padding:31px 40px 15px}.topbar{display:flex;justify-content:space-between;align-items:center}.topbar h1{font-size:32px;letter-spacing:-1.5px;margin:8px 0 0;font-weight:770}.heading-dot{color:var(--teal)}.top-actions{display:flex;align-items:center;gap:16px}.online{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#438477}.on-dot{background:#20b898;width:7px;height:7px;border-radius:50%}.avatar{background:#dff4ee;color:#128e78;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-weight:800}.toolbar{margin:26px 0 29px;display:flex;gap:14px;justify-content:space-between;align-items:center}.quick-actions{display:flex;gap:6px;flex-wrap:wrap}.quick-actions button,.date-filter button{background:#fff;border:1px solid #e1ecea;color:#637f83;border-radius:9px;padding:9px 12px;font-size:12px;font-weight:650}.quick-actions button.selected{background:#0b9486;color:#fff;border-color:#0b9486}.quick-actions button:hover,.date-filter button:hover{border-color:#12aa99}.date-filter{display:flex;align-items:center;gap:6px}.date-filter input{width:131px;border:1px solid #e1ecea;border-radius:9px;padding:9px 6px;color:#557579;background:#fff;font-size:11px}.date-filter button{color:#0b9285}.headline{display:flex;justify-content:space-between;align-items:end;margin-bottom:16px}.headline h2{font-size:21px;margin:5px 0 1px;letter-spacing:-.7px}.headline p{margin:0;color:var(--muted);font-size:12px}.source-chip{background:#e7f4f1;color:#438d81;font-size:10px;font-weight:700;border:1px solid #d7ebe6;border-radius:20px;padding:6px 10px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.metric,.panel,.ask-panel{background:#fff;border:1px solid #e6efed;border-radius:16px;box-shadow:var(--shadow)}.metric{padding:19px 20px;min-height:151px}.metric.featured{background:linear-gradient(125deg,#0b9587,#10b7a2);color:#fff;border:0;box-shadow:0 9px 22px #0b958721}.metric-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:670;color:#749093}.featured .metric-head{color:#dcfff6}.metric-icon{border-radius:8px;background:#f2f9f7;color:#529887;padding:4px 8px;font-size:15px}.featured .metric-icon{background:#ffffff26;color:#fff}.metric strong{display:block;font-size:clamp(18px,2.15vw,29px);letter-spacing:-1px;margin:13px 0 7px;line-height:1.15;white-space:nowrap}.metric-foot{display:flex;justify-content:space-between;gap:6px;color:#9bb0b1;font-size:10px}.featured .metric-foot{color:#e7fff9}.metric-tag{background:#ffffff20;border-radius:5px;padding:3px 6px}.lower-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;margin-top:17px}.panel{padding:21px;min-width:0;min-height:358px}.panel-head{display:flex;justify-content:space-between;align-items:start;gap:8px}.panel-head h3{margin:3px 0 0;font-size:16px;letter-spacing:-.4px}.legend{display:flex;align-items:center;gap:6px;color:#869da0;font-size:10px;flex-wrap:wrap;justify-content:end}.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.legend-dot.current{background:#00a99a}.legend-dot.previous{background:#9cbadf;margin-left:5px}.chart-wrap{position:relative;height:257px;margin-top:14px}#trendChart{width:100%;height:100%;display:block}.chart-caption{margin:5px 0 0;color:var(--muted);font-size:10px}.chart-tooltip{position:absolute;background:#1d4751;color:#fff;padding:8px 11px;border-radius:8px;pointer-events:none;z-index:3;font-size:11px;box-shadow:0 5px 16px #1d47512a}.ai-pill{background:#f0eafa;color:#8e6abb;border-radius:14px;padding:5px 8px;font-size:10px;font-weight:700}.insight-main{margin:23px 0 24px;background:#f5faf8;border-radius:13px;padding:16px;display:flex;gap:10px;max-height:180px;overflow:auto;white-space:pre-line;color:#4b7778;font-size:12px;line-height:1.7}.sparkle{color:var(--teal);font-size:20px}.suggestion{border-top:1px solid var(--edge);padding-top:14px}.suggestion small{display:block;color:#9aabad;font-size:10px;letter-spacing:1px;font-weight:700}.suggestion button{margin-top:8px;background:none;border:0;padding:0;text-align:left;color:#138b80;font-size:12px;font-weight:700}.ask-panel{margin-top:17px;padding:21px}.ask-head{display:flex;gap:10px;align-items:center}.ask-icon{background:#e4f8f2;color:#0b9181;border-radius:11px;width:37px;height:37px;display:grid;place-items:center;font-size:24px}.ask-head h3{margin:0;font-size:16px}.ask-head p{margin:0;color:var(--muted);font-size:11px}#questionForm{display:flex;gap:10px;margin-top:16px}#question{flex:1;min-width:0;border:1px solid #dce9e6;border-radius:11px;padding:13px 15px;outline:none;color:#285359;font-size:13px}#question:focus{border-color:#16b49c;box-shadow:0 0 0 3px #16b49c19}#askButton{background:#079586;color:#fff;border:0;border-radius:11px;padding:12px 20px;font-size:12px;font-weight:750}#askButton span{margin-left:10px}.assist-note{display:flex;justify-content:space-between;gap:12px;margin-top:9px;color:#95a8a9;font-size:10px}#feedback{color:#148e7e}footer{margin:17px 0;color:#a2b0b1;font-size:10px;text-align:center}footer span{padding:0 5px}.loading .metric strong{opacity:.4}.is-error{color:#c34f55!important}@media(max-width:1180px){.main{padding:24px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.lower-grid{grid-template-columns:1fr}.panel{min-height:315px}.sidebar{width:185px}.toolbar{flex-wrap:wrap}}@media(max-width:700px){.sidebar{display:none}.main{padding:17px 13px 24px}.topbar h1{font-size:25px}.topbar .eyebrow{font-size:9px}.toolbar{margin:20px 0}.quick-actions{gap:5px}.quick-actions button{padding:9px 10px;font-size:11px}.date-filter{width:100%}.date-filter input{flex:1;min-width:0;width:auto}.metrics{gap:9px}.metric{min-height:134px;padding:14px 13px;border-radius:13px}.metric strong{font-size:20px}.metric-head{font-size:10px}.metric-foot{font-size:9px}.panel{padding:15px}.headline h2{font-size:17px}.headline p{font-size:11px}.source-chip{font-size:9px}.panel-head h3{font-size:15px}.chart-wrap{height:215px}.top-actions{gap:8px}.online{font-size:9px}.avatar{width:32px;height:32px}#questionForm{flex-direction:column}#askButton{width:100%}.assist-note{flex-wrap:wrap}.insight-main{max-height:none}.legend{font-size:9px}}

/* Fail-closed: without JavaScript or a valid Telegram session, dashboard is never visible. */
.access-pending .shell {display:none!important}
.is-authorized #accessGate {display:none!important}
.access-gate {min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 30% 10%, #e5f7ef, #f6faf9 58%)}
.access-gate-card {width:min(420px,100%);padding:35px 25px;text-align:center;background:white;border:1px solid #dceee9;border-radius:20px;box-shadow:0 20px 70px rgba(4,80,73,.07)}
.access-gate-symbol{font-size:40px;background:#e5f7f2;border-radius:18px;margin:0 auto 20px;width:76px;height:76px;display:grid;place-items:center}
.access-gate-card h1{font-size:23px;margin:0 0 10px;color:#1b4245}
.access-gate-card p{color:#41696e;line-height:1.6}
.access-gate-card small{display:block;color:#8b9fa0;font-size:12px;line-height:1.6;margin-top:20px}

/* Calendar-chart tooltip: keep both dates readable on narrow screens. */
.chart-tooltip { max-width: min(265px, 85vw); white-space: normal; overflow-wrap: anywhere; }

/* Multi-year/month comparisons. Existing daily report is unchanged. */
[hidden]{display:none!important}
.multi-panel{margin-top:18px;min-height:0}
.multi-header{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.multi-header h3{margin:5px 0 0;font-size:19px;letter-spacing:-.5px}
.multi-chip{font-size:10px;font-weight:700;color:#137e73;background:#e7f7f2;border-radius:20px;padding:6px 9px}
.multi-muted{font-size:11px;color:var(--muted);margin:8px 0 0;line-height:1.6}
.multi-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
.multi-tabs button{border:1px solid var(--edge);border-radius:9px;background:#f7faf9;color:#537f7d;font-size:12px;font-weight:650;padding:9px 12px}
.multi-tabs button.selected{background:#0b9486;border-color:#0b9486;color:#fff}
.multi-chart-wrap{margin:12px 0 19px;height:250px;position:relative}
#multiChart{width:100%;height:100%;display:block;touch-action:pan-y}
.multi-table-scroll{overflow-x:auto;border:1px solid var(--edge);border-radius:12px}
.multi-table{width:100%;border-collapse:collapse;white-space:nowrap;font-size:12px;font-variant-numeric:tabular-nums}
.multi-table thead{background:#f0f8f6;color:#537f7d}
.multi-table th,.multi-table td{padding:12px 14px;text-align:right;border-bottom:1px solid #e9f1ee}
.multi-table th:first-child,.multi-table td:first-child{text-align:left;font-weight:650}
.multi-table tbody tr:last-child td{border-bottom:0}
.multi-table tbody tr:hover{background:#f7fbfa}
.multi-table .delta-negative{color:#c4595c}.multi-table .delta-positive{color:#138b7e}
.multi-table .partial{font-size:9px;color:#9c7e3d;margin-left:4px}
@media(max-width:700px){.multi-panel{padding:15px}.multi-chart-wrap{height:220px}.multi-table{font-size:11px}.multi-table th,.multi-table td{padding:10px 12px}.multi-header h3{font-size:17px}}

/* Agent V2: business interpretation below multi-period chart/table */
.multi-ai-insights{margin-top:20px;border:1px solid #dbeee8;background:#f5faf8;border-radius:14px;padding:17px 20px}
.multi-ai-insights h3{margin:5px 0 12px;font-size:16px}
.multi-ai-body{white-space:pre-line;font-size:12px;line-height:1.8;color:#3a666c;overflow-wrap:anywhere}

/* BON Analytics AI Agent V2.1 — server-side per-user conversation */
.chat-panel-head{align-items:center;flex-wrap:wrap}
.chat-panel-actions{display:flex;align-items:center;gap:7px}
.chat-panel-actions button{border:1px solid #d8eae6;background:#fff;border-radius:9px;color:#668e89;font-size:11px;font-weight:650;padding:6px 8px}
.chat-panel-actions button:disabled{opacity:.45;cursor:not-allowed}
.chat-conversation{max-height:460px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;padding:17px 2px 5px;scroll-behavior:smooth}
.chat-conversation[hidden],.insight-main[hidden],.multi-ai-insights[hidden]{display:none!important}
.chat-item{display:flex;flex-direction:column;gap:7px;min-width:0}
.chat-question{background:#e5f6f2;color:#116d64;padding:11px 13px;border-radius:12px 12px 4px 12px;margin-left:11%;align-self:flex-end;max-width:96%;line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap}
.chat-reply{background:#f5faf8;color:#345c5b;border:1px solid #e3efeb;border-radius:12px 12px 12px 4px;padding:13px 14px;max-width:100%;font-size:12px;line-height:1.7;overflow-wrap:anywhere;white-space:pre-wrap}
.chat-reply.chat-reply-error{border-color:#e8d6b1;background:#fffaf0}
.chat-message-title{display:flex;justify-content:space-between;align-items:center;color:#739b96;font-weight:750;font-size:10px;letter-spacing:.2px}
.chat-message-content{color:inherit;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:6px;font-size:12px;line-height:1.72}
.chat-message-content .chat-heading{display:block;color:#173f43;font-weight:800;margin:12px 0 4px;font-size:12px}
.chat-message-content .chat-paragraph{display:block;white-space:pre-wrap}
.chat-retention{margin:8px 0;color:#8ba1a1;font-size:10px;line-height:1.5}
.chat-panel-actions .ai-pill{white-space:nowrap}
.multi-chat-slot{margin-top:18px}
.multi-chat-slot:empty{display:none}
.multi-chat-slot .insights-panel{min-height:0}
@media(max-width:780px){.chat-conversation{max-height:420px}.chat-reply,.chat-question{font-size:12px}.chat-retention{font-size:10px}}

/* BON Analytics AI: point ranking and point comparison, authenticated only. */
.point-panel {margin-top:18px;min-height:0}
.point-panel .multi-table-scroll {margin-top:17px}
.point-panel .multi-table th:first-child,.point-panel .multi-table td:first-child {min-width:180px;max-width:280px;white-space:normal;overflow-wrap:anywhere}
.point-panel .multi-table td {font-variant-numeric:tabular-nums}
@media(max-width:700px){.point-panel{padding:15px}.point-panel .multi-table{font-size:11px}}

/* BON AI 2.0 interactive, data-only visuals in chat */
.ai2-visual{background:#fff;border:1px solid #dceae7;border-radius:11px;margin-top:14px;padding:13px;white-space:normal;max-width:100%;overflow:hidden}
.ai2-visual-title{font-size:12px;font-weight:800;color:#246d65;margin:0 0 10px}
.ai2-table-scroll{max-width:100%;overflow-x:auto;border:1px solid #e5eeee;border-radius:8px}
.ai2-table{border-collapse:collapse;width:100%;white-space:nowrap;font-size:11px;font-variant-numeric:tabular-nums}
.ai2-table th,.ai2-table td{padding:9px 10px;border-bottom:1px solid #ecf3f1;text-align:right}
.ai2-table th{background:#edf7f5;color:#447a74;cursor:pointer;user-select:none;position:sticky;top:0}
.ai2-table th:first-child,.ai2-table td:first-child{text-align:left;max-width:250px;white-space:normal;overflow-wrap:anywhere}
.ai2-table tr:hover td{background:#f8fcfa}
.ai2-chart-controls{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.ai2-chart-controls button{border:1px solid #d8eae6;background:#fff;color:#558b82;border-radius:8px;padding:6px 10px;font-size:11px}
.ai2-chart-controls button.selected{background:#098f82;color:#fff;border-color:#098f82}
.ai2-line-svg{width:100%;height:auto;display:block;min-height:110px}
.ai2-chart-caption{font-size:10px;color:#879c99;margin-top:5px}

/* BON AI 2.0: Web Speech API dictation beside the question input. */
.question-input-wrap{display:flex;align-items:stretch;flex:1;min-width:0;gap:6px}
#question{width:100%;flex:1}
#voiceButton{flex:0 0 47px;min-width:47px;display:grid;place-items:center;
  background:#eef8f5;color:#087f75;border:1px solid #cde7e0;border-radius:11px;
  font-size:19px;font-weight:800;line-height:1;padding:8px;transition:background .15s ease}
#voiceButton:hover{background:#dff3ed}
#voiceButton:focus-visible{outline:3px solid #16b49c6b;outline-offset:2px}
#voiceButton.is-recording{background:#e4474d;border-color:#e4474d;color:#fff;
  box-shadow:0 0 0 4px #e4474d27;animation:bon-pulse 1.4s ease-in-out infinite}
#voiceButton:disabled{opacity:.55;cursor:wait;animation:none}
@keyframes bon-pulse{50%{box-shadow:0 0 0 7px #e4474d17}}
@media(max-width:700px){.question-input-wrap{width:100%}#voiceButton{min-width:50px}#questionForm{gap:9px}}

/* Press-and-hold: prevent Telegram WebView long-press context menu / scroll capture. */
#voiceButton {touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;cursor:pointer}

/* Admin entry point also stays accessible in the Telegram mobile layout. */
#adminLink{text-decoration:none}
.admin-top-link{text-decoration:none;background:#e4f5ef;color:#0a8371;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-size:19px}
[hidden]{display:none!important}


/* Responsive chat v3: stack the dashboard sooner so the AI output is legible. */
@media (max-width: 1740px) {
  .lower-grid { grid-template-columns: minmax(0, 1fr); }
}
.lower-grid > .panel,
#insightsPanel,
.chat-conversation,
.chat-reply,
.chat-message-content,
.ai2-visual { min-width: 0; }

/* AI results: keep columns readable; scroll the table instead of wrapping digits. */
.ai2-visual { max-width: 100%; overflow: hidden; }
.ai2-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.ai2-table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
  white-space: nowrap;
}
.ai2-table th,
.ai2-table td {
  min-width: 115px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  vertical-align: top;
}
.ai2-table th:first-child,
.ai2-table td:first-child {
  min-width: 124px;
  max-width: 340px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
.ai2-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Maximize the chat inside Telegram's WebView; never require native Fullscreen API. */
.chat-expand-button {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  padding: 0 !important;
  font-size: 23px !important;
  line-height: 1;
  color: #087e73 !important;
  background: #e8f7f2 !important;
  border-color: #cce7df !important;
  flex-shrink: 0;
}
.chat-expand-button:hover { background: #d8f0e8 !important; }
.chat-expand-button:focus-visible { outline: 3px solid #16b49c78; outline-offset: 2px; }
body.bon-chat-expanded { overflow: hidden; }
#insightsPanel.is-chat-expanded {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  width: 100vw;
  max-width: none;
  margin: 0;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background: #f8fbfa;
  box-shadow: 0 0 0 9999px rgba(16, 45, 48, .28);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
#insightsPanel.is-chat-expanded .chat-panel-head { flex: 0 0 auto; }
#insightsPanel.is-chat-expanded .chat-conversation {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 4px;
}
#insightsPanel.is-chat-expanded .insight-main { flex: 1 1 auto; min-height: 0; max-height: none; }
#insightsPanel.is-chat-expanded .chat-reply { background: #fff; }
#insightsPanel.is-chat-expanded .chat-expanded-composer {
  display: block;
  flex: 0 0 auto;
  padding-top: 10px;
  border-top: 1px solid #dceae7;
}
#insightsPanel.is-chat-expanded .chat-expanded-composer #questionForm { margin-top: 0; }
#insightsPanel.is-chat-expanded .chat-retention { flex: 0 0 auto; margin: 0; }
#insightsPanel.is-chat-expanded .suggestion { display: none; }
@media (max-width: 700px) {
  #insightsPanel.is-chat-expanded { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  .chat-panel-actions { flex-wrap: wrap; justify-content: flex-end; }
  #insightsPanel.is-chat-expanded .chat-panel-head h3 { font-size: 15px; }
  #insightsPanel.is-chat-expanded #questionForm { flex-direction: row; }
  #insightsPanel.is-chat-expanded #askButton { width: auto; padding: 10px 12px; }
  #insightsPanel.is-chat-expanded #askButton span { display: none; }
  #insightsPanel.is-chat-expanded .chat-question { max-width: 97%; }
  .ai2-table th, .ai2-table td { min-width: 105px; }
}
@media (prefers-reduced-motion: reduce) {
  #insightsPanel.is-chat-expanded .chat-conversation { scroll-behavior: auto; }
}


/* v5: fullscreen for the whole Telegram Mini App (not just the AI chat). */
.telegram-fullscreen-button {
  flex: 0 0 auto;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d4e9e4;
  background: #ecf8f5;
  border-radius: 10px;
  color: #087e73;
  font-size: 23px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}
.telegram-fullscreen-button:hover {background:#d9f3ed;border-color:#0c9788}
.telegram-fullscreen-button:focus-visible {outline:2px solid #0b9183;outline-offset:2px}
.telegram-fullscreen-button[hidden] {display:none!important}
.telegram-fullscreen-button:disabled {cursor:not-allowed;opacity:.6}
.tg-webapp-fullscreen .shell {min-height:100dvh}
