/* ══════════════════════════════════════════════════
   TINQ - Floating AI Chat + Accessibility Widget
   Shared, self-contained stylesheet (used on all pages)
   ══════════════════════════════════════════════════ */

/* ── AI Chat ── */
#ai-fab{position:fixed;bottom:24px;left:24px;z-index:90;width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#2F6BFF 0%,#39C6E0 100%);border:none;cursor:pointer;box-shadow:none;display:flex;align-items:center;justify-content:center;transition:transform .25s}
#ai-fab:hover{transform:scale(1.08)}
#ai-fab svg{width:30px;height:30px;stroke:#fff;fill:none}
#ai-fab .close-x{display:none}
#ai-fab.open .chat-i{display:none}
#ai-fab.open .close-x{display:block}
#ai-panel{position:fixed;bottom:98px;left:24px;z-index:90;width:380px;max-width:calc(100vw - 48px);height:560px;max-height:calc(100vh - 140px);background:#fff;border-radius:24px;box-shadow:0 30px 80px rgba(10,27,61,.28);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(20px) scale(.96);pointer-events:none;transition:opacity .3s,transform .3s;direction:rtl}
#ai-panel.open{opacity:1;transform:none;pointer-events:auto}
.ai-head{background:linear-gradient(135deg,#2F6BFF 0%,#39C6E0 100%);color:#fff;padding:18px 20px;display:flex;align-items:center;gap:12px;flex-direction:row-reverse}
.ai-head .ava{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex:none}
.ai-head .ava svg{width:24px;height:24px;stroke:#fff;fill:none}
.ai-head .htxt{flex:1;text-align:right}
.ai-head .htxt b{display:block;font-size:16px}
.ai-head .htxt span{font-size:12px;opacity:.9;display:flex;align-items:center;gap:5px;flex-direction:row-reverse;justify-content:flex-start}
.ai-head .dot{width:8px;height:8px;border-radius:50%;background:#5BE9B0;display:inline-block}
.ai-body{flex:1;overflow-y:auto;padding:18px;background:#F7FAFF;display:flex;flex-direction:column;gap:12px}
.ai-msg{max-width:84%;padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.6}
.ai-msg.bot{background:#fff;color:#0A1B3D;align-self:flex-start;border-bottom-right-radius:4px;box-shadow:0 2px 8px rgba(10,27,61,.06)}
.ai-msg.user{background:linear-gradient(135deg,#2F6BFF 0%,#39C6E0 100%);color:#fff;align-self:flex-end;border-bottom-left-radius:4px}
.ai-msg.typing{display:flex;gap:4px;align-self:flex-start}
.ai-msg.typing span{width:7px;height:7px;border-radius:50%;background:#94A3B8;animation:tdot 1.2s infinite}
.ai-msg.typing span:nth-child(2){animation-delay:.2s}.ai-msg.typing span:nth-child(3){animation-delay:.4s}
@keyframes tdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.ai-sugg{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 10px;background:#F7FAFF}
.ai-sugg button{font-family:'Heebo',sans-serif;font-size:12px;font-weight:600;color:#1E5BE6;background:#E8F0FF;border:none;border-radius:999px;padding:7px 13px;cursor:pointer;transition:background .2s}
.ai-sugg button:hover{background:#D9E6FF}
.ai-input{display:flex;gap:8px;padding:14px;border-top:1px solid #E3E9F2;background:#fff;flex-direction:row-reverse}
.ai-input input{flex:1;border:1px solid #E3E9F2;border-radius:999px;padding:12px 18px;font-family:'Heebo',sans-serif;font-size:14px;outline:none;direction:rtl;text-align:right}
.ai-input input:focus{border-color:#2F6BFF}
.ai-input button{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#2F6BFF 0%,#39C6E0 100%);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:transform .2s}
.ai-input button:hover{transform:scale(1.06)}
.ai-input button:disabled{opacity:.5;cursor:not-allowed}
.ai-input button svg{width:20px;height:20px;stroke:#fff;fill:none}
.ai-disc{font-size:10px;color:#94A3B8;text-align:center;padding:0 14px 10px;background:#fff}
@media(max-width:880px){#ai-panel{left:12px;right:12px;width:auto;bottom:90px}#ai-fab{bottom:92px;left:18px}}
/* phone: the chat panel sits centered on the screen */
@media(max-width:880px){
  /* anchored between the nav pill and the chat button: the panel can
     never slide under the header, and it fits any phone height
     without a hard-coded 560px that overflowed short screens. */
  #ai-panel,body.tq-sc-on #ai-panel{
    top:calc(var(--navh) + 14px)!important;bottom:92px!important;
    left:50%!important;right:auto!important;
    width:calc(100vw - 24px)!important;max-width:400px!important;
    height:auto!important;max-height:none!important;
    transform:translateX(-50%) translateY(20px) scale(.96)!important}
  #ai-panel.open,body.tq-sc-on #ai-panel.open{
    transform:translateX(-50%)!important}
  /* keyboard open: the on-screen keyboard shrinks the VISUAL viewport
     but not the layout viewport, so a fixed panel keeps its old size
     and half of it ends up behind the keyboard. Pin it to the visual
     viewport instead, and clear the floating buttons out of the way. */
  body.tq-kb #ai-panel,body.tq-kb.tq-sc-on #ai-panel{
    top:calc(var(--tq-vv-top,0px) + 8px)!important;
    bottom:auto!important;
    height:calc(var(--tq-vv-h,100dvh) - 16px)!important}
  body.tq-kb #ai-fab,body.tq-kb #tqQactFab,body.tq-kb #tqStickyCta{
    opacity:0!important;pointer-events:none!important}
  body:has(#ai-panel.open) #a11yBtn,
  body:has(#ai-panel.open) .a11y-btn,
  body:has(#ai-panel.open) #tqStickyCta,
  body:has(#ai-panel.open) .ai-teaser{
    opacity:0!important;pointer-events:none!important}
  body:has(#ai-panel.open) #ai-fab,
  body.tq-sc-on:has(#ai-panel.open) #ai-fab{bottom:18px!important}
}


/* ── AI Chat proactive teaser bubble ── */
.ai-teaser{position:fixed;bottom:98px;left:24px;z-index:89;max-width:230px;background:#fff;color:#0A1B3D;border-radius:16px;padding:12px 34px 12px 16px;box-shadow:0 14px 34px rgba(10,27,61,.18);font-size:13.5px;font-weight:600;line-height:1.5;direction:rtl;text-align:right;opacity:0;transform:translateY(10px) scale(.95);pointer-events:none;transition:opacity .3s,transform .3s;cursor:pointer}
.ai-teaser.show{opacity:1;transform:none;pointer-events:auto}
.ai-teaser::after{content:'';position:absolute;bottom:-6px;left:26px;width:14px;height:14px;background:#fff;transform:rotate(45deg)}
.ai-teaser-close{position:absolute;top:8px;left:10px;width:20px;height:20px;border-radius:50%;background:#F2F6FC;color:#6b7a96;display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer}
.ai-teaser-close:hover{background:#E3E9F2}
@media(max-width:880px){.ai-teaser{bottom:166px;left:18px}}

/* ── Accessibility widget ── */
.a11y-btn{position:fixed;right:20px;bottom:24px;z-index:998;width:62px;height:62px;border-radius:50%;background:#0A1B3D;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px rgba(10,27,61,.32);transition:transform .2s}
.a11y-btn:hover{transform:scale(1.08)}
.a11y-btn svg{width:29px;height:29px}
.a11y-overlay{display:none;position:fixed;inset:0;background:rgba(10,27,61,.35);z-index:997}
.a11y-overlay.open{display:block}
.a11y-panel{position:fixed;right:20px;bottom:94px;z-index:998;width:320px;max-height:min(640px, calc(100vh - 140px));overflow-y:auto;background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(10,27,61,.28);padding:0;display:none;direction:rtl}
.a11y-panel.open{display:block}
.a11y-head{position:sticky;top:0;background:linear-gradient(135deg,#2F6BFF 0%,#39C6E0 100%);color:#fff;padding:16px 20px;border-radius:20px 20px 0 0;display:flex;align-items:center;justify-content:space-between;z-index:2}
.a11y-head h4{font-size:16px;color:#fff;margin:0}
.a11y-close{background:rgba(255,255,255,.2);border:none;width:26px;height:26px;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px}
.a11y-body{padding:16px 18px 20px}
.a11y-cat{margin-bottom:18px}
.a11y-cat-title{font-size:12px;font-weight:800;color:#1E5BE6;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #E3E9F2}
.a11y-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px}
.a11y-row span{font-size:13.5px;color:#475569;font-weight:600}
.a11y-ctrl{display:flex;gap:6px;align-items:center;flex-shrink:0}
.a11y-ctrl button{width:28px;height:28px;border-radius:8px;border:1px solid #E3E9F2;background:#F9FBFF;color:#0A1B3D;font-weight:800;font-size:14px;cursor:pointer;transition:background .18s}
.a11y-ctrl button:hover{background:#E8F0FF}
.a11y-ctrl .a11y-val{font-size:12px;color:#94A3B8;min-width:32px;text-align:center}
.a11y-toggle{width:40px;height:23px;border-radius:999px;background:#E3E9F2;border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.a11y-toggle::after{content:'';position:absolute;top:2px;right:2px;width:19px;height:19px;border-radius:50%;background:#fff;transition:right .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.a11y-toggle.on{background:#2F6BFF}
.a11y-toggle.on::after{right:19px}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-gbtn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 6px;border-radius:12px;border:1.5px solid #E3E9F2;background:#F9FBFF;color:#475569;cursor:pointer;font-size:11.5px;font-weight:700;text-align:center;transition:all .18s}
.a11y-gbtn svg{width:18px;height:18px}
.a11y-gbtn:hover{border-color:#2F6BFF;color:#1E5BE6}
.a11y-gbtn.on{background:#E8F0FF;border-color:#2F6BFF;color:#1E5BE6}
.a11y-reset{width:100%;margin-top:4px;padding:10px;border-radius:10px;border:1px solid #E3E9F2;background:#fff;color:#475569;font-size:13px;font-weight:700;cursor:pointer;transition:border-color .18s,color .18s}
.a11y-reset:hover{border-color:#2F6BFF;color:#1E5BE6}
/* effect classes applied to <html> */
html.a11y-contrast{filter:contrast(1.35) saturate(.85)}
html.a11y-dark body{background:#12131a!important}
html.a11y-dark body,html.a11y-dark p,html.a11y-dark span,html.a11y-dark li,html.a11y-dark div{color:#EAEAF0!important}
html.a11y-dark .screen,html.a11y-dark section,html.a11y-dark header,html.a11y-dark footer{background:#181920!important;background-image:none!important}
html.a11y-gray{filter:grayscale(1)}
html.a11y-lowsat{filter:saturate(.4)}
html.a11y-links a{text-decoration:underline!important;text-decoration-thickness:2px!important}
html.a11y-headings h1,html.a11y-headings h2,html.a11y-headings h3{background:#FFF6C8!important;box-shadow:0 0 0 4px #FFF6C8}
html.a11y-nomotion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-readable body,html.a11y-readable h1,html.a11y-readable h2,html.a11y-readable h3,html.a11y-readable p,html.a11y-readable span,html.a11y-readable a,html.a11y-readable li{font-family:Arial,Helvetica,sans-serif!important}
html.a11y-lh *{line-height:1.9!important}
@media(max-width:880px){.a11y-btn{right:18px;bottom:18px}.a11y-panel{right:18px;left:18px;width:auto;bottom:88px;max-height:min(560px, calc(100vh - 120px))}}