/* v68 Magtanong (in-app help assistant). Own file so it never collides with app.css blocks from other tracks.
   Layers: the chat (z 42) sits under the offline bar (45), toasts (50), sheets (80, e.g. Ask the owner) and videos. */

/* ---------- the "?" mark ---------- */
.aq-mark{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;font:800 17px/1 var(--f-display);background:var(--brand);color:#fff}

/* ---------- Board search: Ask Labahan row + FAQ matches ---------- */
.ask-row{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;border:0;border-radius:16px;background:var(--brand);color:#fff;padding:10px 14px;text-align:left;font:inherit;cursor:pointer;box-shadow:0 10px 22px -14px rgba(35,64,212,.8)}
.ask-row .aq-mark{background:#fff;color:var(--brand)}
.ask-row .ar-tx{flex:1;min-width:0;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.ask-row .ar-tx b{font-weight:800}
.ask-row>svg.i{width:20px;height:20px;flex:none}
.afq-slot:empty{display:none}
.afaq{display:flex;flex-direction:column;gap:6px}
.afaq .item .tx b{white-space:normal;overflow:visible;text-overflow:clip}

/* ---------- the Magtanong card ---------- */
.acard{background:var(--surface);border:1.5px solid var(--brand);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.acard .ac-hd{display:flex;gap:10px;align-items:center}
.acard .ac-hd b{display:block;font:800 18px/1.15 var(--f-display);color:var(--brand-2)}
.acard .ac-hd small{display:block;color:var(--muted);font-size:12.5px;line-height:1.3}
.acard .ac-row{display:flex;gap:8px;align-items:stretch}
.acard .ac-q{flex:1;min-width:0;min-height:52px;border-radius:14px}
.acard .ac-q input{min-height:48px;font-size:15px}
.ac-mic,.ach-mic{width:52px;min-height:52px;border-radius:14px;border:0;background:var(--tag);color:var(--tag-ink);display:grid;place-items:center;flex:none;cursor:pointer}
.ac-mic svg.i,.ach-mic svg.i{width:22px;height:22px}
.acard .ac-chips{display:flex;flex-wrap:wrap;gap:8px}
.acard .ac-chips .chip{min-height:44px;white-space:normal;text-align:left}
.acard .ac-res{display:flex;flex-direction:column;gap:8px}
.acard .ac-res:has(.ac-ask:empty):has(.ac-faq:empty){display:none}
.acard .ac-ask:empty,.acard .ac-faq:empty,.acard .find-res:empty{display:none}

/* ---------- a small "Magtanong" link on error and lock messages ---------- */
.alink{min-height:44px;gap:8px;font-size:14px}
.alink .aq-mark{width:24px;height:24px;font-size:14px;border-radius:8px}
.lockrow .alink{grid-column:1/-1;justify-self:start}
.toast .alink{color:var(--tag);padding:0;min-height:36px}

/* ---------- the chat (full screen) ---------- */
html.achat-on,html.achat-on body{overflow:hidden}
.achat{position:fixed;inset:0;z-index:42;background:var(--bg);display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px)}
body:has(#offlinebar) .achat{padding-top:calc(68px + env(safe-area-inset-top,0px))} /* the red "No internet" bar (2 lines at 360 px) sits above the chat header */
.ach-hd{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface);border-bottom:1px solid var(--line);flex:none}
.ach-t{flex:1;min-width:0}
.ach-t b{display:block;font:800 21px/1.1 var(--f-display);color:var(--brand-2)}
.ach-t .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ach-n{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:54px;min-height:44px;padding:2px 8px;border-radius:12px;background:var(--brand-soft);color:var(--brand-2);border:1px solid var(--line-2);line-height:1.05}
.ach-n:empty{display:none}
.ach-n b{font:700 14px var(--f-mono)}
.ach-n small{font-size:10.5px;font-weight:700;color:var(--muted)}
.ach-n.low{background:var(--warn-bg);color:var(--warn);border-color:#f2cf98}
.ach-n.out{background:var(--bad-bg);color:var(--bad);border-color:#f5c2c8}
.ach-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px 18px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.ach-from{align-self:center;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--line);border-radius:999px;padding:3px 10px;text-align:center}
.ab{border-radius:18px;padding:12px 14px;max-width:92%;display:flex;flex-direction:column;gap:10px;font-size:14.5px;line-height:1.45;overflow-wrap:anywhere}
.ab p{margin:0}
.ab.me{align-self:flex-end;background:var(--brand);color:#fff;font-weight:700;border-bottom-right-radius:6px;max-width:85%}
.ab.me.failed{background:var(--surface);color:var(--fg);border:1.5px dashed #e7a3ab}
.ab.bot,.ab.sys{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:6px}
.ab.sys.amber{background:#fff7e3;border-color:#f0d58a}
.ab.sys.okcard{background:var(--ok-bg);border:1.5px solid var(--ok)}
.ab .okhd{display:flex;gap:10px;align-items:center}
.ab .okhd svg.i{width:30px;height:30px;color:var(--ok);flex:none;background:#fff;border-radius:50%;padding:5px}
.ab .okhd small{display:block;color:var(--muted)}
.ach-fail{align-self:flex-end;font-size:12.5px;font-weight:700;margin-top:-6px}
.ach-fail .bad-t{color:var(--bad)}
.ach-fail .link{font-size:12.5px;padding:0;min-height:32px}
.ach-chips{display:flex;flex-direction:column;gap:8px}
.ach-chip{display:flex;align-items:center;gap:10px;min-height:52px;width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:16px;padding:6px 12px;text-align:left;font:inherit;color:var(--brand-2);cursor:pointer}
.ach-chip .ic2{width:32px;height:32px}
.ach-chip b{font-size:14.5px}
.ach-help{align-self:center;min-height:44px}
.ach-ex{font-size:13px;color:var(--muted)}
.ach-exq{display:block;width:100%;min-height:44px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);padding:8px 12px;text-align:left;font:inherit;color:var(--brand-2);cursor:pointer}
.asteps{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.asteps li{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.asteps li:last-child{border-bottom:0}
.asteps .n{width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:800;flex:none;margin-top:1px}
.asteps li>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.asteps b{font-size:14.5px}
.asteps small{color:var(--muted);font-size:13px;line-height:1.4}
.abtns{display:flex;flex-direction:column;gap:8px}
.abtn-row{display:flex;gap:8px}
.abtn-row>.abtn{flex:1 1 0;min-width:0}
.abtn{min-height:48px;border-radius:14px;padding:8px 14px;font:inherit;font-weight:800;font-size:14.5px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-align:center;width:100%}
.abtn svg.i{width:18px;height:18px;flex:none}
.abtn.soft{background:var(--brand-soft);color:var(--brand-2);border:1.5px solid #c9d2fa}
.abtn.solid{background:var(--brand);color:#fff;border:0}
.abtn.quiet{background:var(--surface);color:var(--fg);border:1.5px solid var(--line-2)}
.abtn:disabled{opacity:.7}
.asrc{font-size:11.5px;color:var(--muted)}
.alock{display:flex;gap:10px;align-items:center;border:1.5px dashed var(--line-2);border-radius:12px;padding:8px 12px;color:var(--muted)}
.alock svg.i{width:18px;height:18px;flex:none}
.alock b{display:block;color:var(--fg);font-size:13.5px}
.alock small{font-size:12px}
.aduty:empty{display:none}
.aduty{font-size:13.5px}
.ach-note{font-size:12px;color:var(--brand);margin:0}
.afb{display:flex;gap:8px;align-self:stretch}
.afb .btn{flex:1 1 0;min-width:0;min-height:52px;font-size:15px;padding:0 10px}
.afb .afb-ok{background:var(--ok)}
.ach-thanks{align-self:flex-start;margin:0;font-size:13px;color:var(--ok);font-weight:700}
.arep{border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;background:var(--surface-2)}
.arep .grp{padding:0 0 2px}
.arow{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.arow span{color:var(--muted);flex:none}
.arow b{text-align:right;min-width:0;overflow-wrap:anywhere}
.arep-in{min-height:64px;resize:vertical;font:inherit}
.arep-note{margin:0;padding:8px 12px;border:1px solid var(--line);border-radius:12px;font-size:13.5px}
.sentbtn{background:var(--ok)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.typing{flex-direction:row;gap:5px;padding:14px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--line-2);animation:atype 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes atype{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.typing i{animation:none}}
.ach-ft{flex:none;background:var(--surface);border-top:1px solid var(--line);padding:6px 10px calc(10px + env(safe-area-inset-bottom,0px))}
.ach-hint{margin:0 0 6px;text-align:center;font-size:12px;color:var(--muted)}
.ach-comp{display:flex;gap:8px;align-items:center}
.ach-comp .input{flex:1;min-width:0;min-height:52px}
.ach-send{width:52px;min-height:52px;border-radius:14px;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;flex:none;cursor:pointer}
.ach-send svg.i{width:22px;height:22px}
.ach-mic.on{background:var(--bad);color:#fff;animation:amic 1.2s infinite}
@keyframes amic{50%{box-shadow:0 0 0 6px rgba(180,35,47,.2)}}
.ach-send:disabled,.ach-mic:disabled{background:var(--line);color:var(--muted)}
.ach-hint.heard{color:var(--brand);font-weight:700}
.ach-send.ready{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--brand)}
.ach-comp .input:disabled{background:var(--surface-2);border-style:dashed}
/* laptops and tablets: a readable column */
@media (min-width:760px){.ach-hd,.ach-body,.ach-ft{padding-left:max(12px,calc(50% - 340px));padding-right:max(12px,calc(50% - 340px))}}

/* ---------- "‹ Back to Ask Labahan" on a screen opened from the chat (in the page, not floating) ---------- */
.aback{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;border:1px solid #c9d2fa;background:var(--brand-soft);color:var(--brand-2);border-radius:999px;padding:4px 14px 4px 8px;font:inherit;font-weight:800;font-size:13.5px;cursor:pointer}
.aback svg.i{width:18px;height:18px}

/* ---------- Admin → Reports ---------- */
.achat-log .ab{max-width:100%}
.aerr{background:var(--bad-bg);color:var(--bad);border-radius:10px;padding:8px 10px;font-size:12px;overflow-wrap:anywhere}
/* v69 Mga tanong ko */
.amine{display:flex;flex-direction:column;gap:6px}
.amine-i{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-align:left;font:inherit;color:inherit;cursor:pointer}
.amine-i .tx{flex:1;min-width:0;display:flex;flex-direction:column}.amine-i .tx b{overflow-wrap:anywhere;font-weight:600}
.amine-i.rep{cursor:default}