/* Ticketify — public help center. Mobile-first, plain, no gradients. */
*,*::before,*::after{box-sizing:border-box}
:root{--ink:#111827;--text:#374151;--muted:#6b7280;--line:#e5e7eb;--bg:#f8fafc;--card:#fff;--accent:#2563eb;--accent-ink:#1d4ed8;--radius:10px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0}
body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.6}
h1,h2,h3{color:var(--ink);margin:0 0 .4em;line-height:1.25}
h1{font-size:1.6rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:100%;max-width:920px;margin:0 auto;padding:0 18px}
.muted{color:var(--muted)}
.lead{font-size:1.05rem;color:var(--text)}
.fineprint{color:var(--muted);font-size:.85rem;margin-top:14px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;font:inherit;font-weight:600;font-size:.95rem;
  padding:10px 16px;border-radius:var(--radius);border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.btn--sm{padding:7px 12px;font-size:.88rem}
.btn--block{display:flex;width:100%}
.linkbtn{background:none;border:0;color:var(--text);font:inherit;cursor:pointer;padding:0}
.linkbtn:hover{color:var(--accent)}
.inline{display:inline}

/* header / footer */
.hd{background:#fff;border-bottom:1px solid var(--line)}
.hd__in{display:flex;align-items:center;justify-content:space-between;height:60px;gap:12px}
.hd__brand{font-weight:700;color:var(--ink);font-size:1.1rem}
.hd__brand:hover{text-decoration:none}
.hd__nav{display:flex;align-items:center;gap:16px;font-size:.95rem}
.hd__nav a{color:var(--text)}
.ft{border-top:1px solid var(--line);background:#fff;color:var(--muted);font-size:.88rem;padding:22px 0;margin-top:48px;text-align:center}
.flash{padding:10px 0;font-size:.93rem}
.flash--success{background:#ecfdf3;color:#157347}
.flash--error{background:#fef2f2;color:#b42318}
.main{padding:28px 0 12px}

/* home */
.hero{text-align:center;padding:34px 0 26px;max-width:600px;margin:0 auto}
.hero h1{font-size:2rem;letter-spacing:-.02em;margin-bottom:.25em}
.hero__sub{margin:0;color:var(--muted);font-size:1.05rem}
.sec--center{text-align:center}
.searchbar{display:flex;align-items:stretch;gap:8px;max-width:560px;margin:22px auto 0}
.searchbar__field{position:relative;flex:1;display:flex}
.searchbar input{flex:1;width:100%;margin-top:0;padding:13px 14px 13px 44px;border:1px solid var(--line);border-radius:var(--radius);font:inherit;font-size:1rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 15px center}
.searchbar .btn{flex:none}
.searchbar input:focus{outline:none;border-color:var(--accent)}
.searchbar--top{margin:0 0 18px}
.cards{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;color:var(--text)}
.card:hover{border-color:var(--accent);text-decoration:none}
.card h3{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:1.08rem;margin-bottom:5px}
.card h3::after{content:"\203A";color:var(--muted);font-weight:400;font-size:1.5em;line-height:.8;transition:color .15s,transform .15s}
.card:hover h3::after{color:var(--accent);transform:translateX(3px)}
.card p{margin:0 0 10px;font-size:.95rem}
.card__meta{font-size:.8rem;color:var(--muted);font-weight:500}
.ctabar{display:flex;flex-direction:column;gap:14px;align-items:flex-start;background:var(--ink);color:#fff;border-radius:14px;padding:26px 28px;margin-top:34px}
.ctabar h2{color:#fff;font-size:1.2rem}
.ctabar p{margin:0;color:#cbd5e1}

/* kb */
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}
.crumbs span{margin:0 4px}
.kbhead{margin-bottom:6px}
.kbhead__count{margin:8px 0 0;font-size:.82rem;color:var(--muted);font-weight:500}
.artlist{list-style:none;padding:0;margin:16px 0;display:grid;gap:10px}
.artrow{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 16px;color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.05);transition:border-color .15s,box-shadow .15s,transform .1s}
.artrow:hover{border-color:var(--accent);text-decoration:none;box-shadow:0 6px 16px rgba(16,24,40,.08);transform:translateY(-1px)}
.artrow__main{flex:1 1 auto;min-width:0}
.artrow__title{display:block;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.artrow__sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;color:var(--muted);font-size:.88rem;line-height:1.5;overflow-wrap:anywhere}
.artrow__chev{flex:0 0 auto;color:var(--muted);font-size:1.5rem;line-height:.7;transition:color .15s,transform .15s}
.artrow:hover .artrow__chev{color:var(--accent);transform:translateX(3px)}
.kbempty{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px 18px;text-align:center;color:var(--muted)}
.doc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.doc__body{margin-top:10px}
.doc__body h1{font-size:1.5rem;margin:.8em 0 .4em}
.doc__body h2{font-size:1.25rem;margin:.8em 0 .4em}
.doc__body h3{font-size:1.1rem;margin:.8em 0 .4em}
.doc__body p{margin:0}
.doc__body ul,.doc__body ol{margin:0 0 1em;padding-left:1.4em}
.doc__body li{margin:.2em 0}
.doc__body a{color:var(--accent);text-decoration:underline}
.doc__body img{max-width:100%;height:auto;border-radius:8px;margin:.5em 0}
.doc__body blockquote{margin:1em 0;padding:.4em 1em;border-left:3px solid var(--line);color:var(--muted)}
.doc__body pre,.doc__body .ql-code-block-container{background:#f3f4f6;border-radius:8px;padding:12px 14px;overflow-x:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem}
.doc__body iframe,.doc__body .ql-video{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:8px;margin:.6em 0}

/* forms / panels */
.panelbox{max-width:480px;margin:10px auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.stack{display:grid;gap:14px}
label{display:block;font-weight:500;font-size:.9rem;color:var(--ink)}
input,select,textarea{width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);font:inherit;color:var(--ink);background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{resize:vertical}

/* portal */
.portal-head{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:0 1px 2px rgba(16,24,40,.05);margin-bottom:18px}
.portal-top{display:flex;flex-direction:column;gap:16px}
.portal-who h1{margin:0;font-size:1.45rem;line-height:1.2}
.portal-who .muted{margin:3px 0 0;font-size:.95rem;overflow-wrap:anywhere}
.portal-actions{display:flex;gap:10px;flex-wrap:wrap}
.portal-products{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.portal-label{display:block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:9px}
.portal-head .cust-av--lg{box-shadow:0 0 0 3px #fff,0 2px 8px rgba(37,99,235,.22)}
.sec{margin-top:28px;font-size:1.15rem}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.table{width:100%;border-collapse:collapse;font-size:.93rem}
.table th{text-align:left;padding:11px 14px;color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line)}
.table td{padding:12px 14px;border-bottom:1px solid var(--line)}
.table tr:last-child td{border-bottom:0}
.badge{display:inline-block;font-size:.74rem;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid var(--line)}
.badge--open{background:#eff6ff;color:#1d4ed8;border-color:#dbeafe}
.badge--answered{background:#ecfdf3;color:#157347;border-color:#d1fadf}
.badge--closed{background:#f3f4f6;color:#6b7280}
.badge--pending{background:#fff7ed;color:#9a3412;border-color:#fed7aa}

/* threads + chat */
.thread-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.thread{display:grid;gap:12px;margin:18px 0}
.msg{max-width:88%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff}
.msg--customer{margin-left:auto;background:#eff6ff;border-color:#dbeafe}
.msg--system{background:#f9fafb}
.msg__who{font-size:.78rem;color:var(--muted);margin-bottom:5px}
.msg__time{margin-left:6px}
.msg__body{color:var(--ink);white-space:normal}
.msg--typing .msg__body{color:var(--muted)}
.replybar{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.replybar__actions{display:flex;gap:8px;flex-wrap:wrap}

.chat{display:flex;flex-direction:column;height:70vh;min-height:420px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.chat__head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.chat__who{display:flex;flex-direction:column;line-height:1.2}
.chat__who strong{color:var(--ink)}
.chat__who span{font-size:.78rem;color:var(--muted)}
.chat__msgs{flex:1;overflow-y:auto;padding:16px;display:grid;gap:10px;align-content:start}
.chat__input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat__input textarea{margin:0;resize:none}

@media(min-width:640px){
  h1{font-size:1.8rem}
  .cards{grid-template-columns:1fr 1fr}
  .ctabar{flex-direction:row;align-items:center;justify-content:space-between}
  .portal-top{flex-direction:row;align-items:center;justify-content:space-between}
}
@media(min-width:920px){ .cards{grid-template-columns:1fr 1fr 1fr} }

/* --- human persona: avatar, rows, typing --- */
.hd__logo{height:30px;width:auto;display:block}
.hd__name{font-weight:700;color:var(--ink);font-size:1.1rem}
.agent-av{position:relative;width:34px;height:34px;border-radius:50%;flex:none;overflow:hidden;display:inline-grid;place-items:center;background:#1f2937;color:#fff;font-weight:600;font-size:.85rem}
.agent-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.agent-av__i{position:relative;z-index:0}
.cust-av{position:relative;width:34px;height:34px;border-radius:50%;flex:none;overflow:hidden;display:inline-grid;place-items:center;background:var(--accent);color:#fff;font-weight:600;font-size:.85rem}
.cust-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.cust-av__i{position:relative;z-index:0}
.cust-av--lg{width:48px;height:48px;font-size:1.15rem}
.portal-id{display:flex;align-items:center;gap:14px}
.msg-row{display:flex;gap:8px;align-items:flex-end}
.msg-row--customer{justify-content:flex-end}
.msg-row .msg{max-width:78%}
.sysnote{align-self:center;text-align:center;color:var(--muted);font-size:.84rem;background:#f3f4f6;border-radius:999px;padding:6px 14px}
.typing{display:flex;gap:5px;align-items:center;padding:4px 2px}
.typing span{width:7px;height:7px;border-radius:50%;background:#9aa3b2;display:inline-block;animation:tk-typing 1.3s infinite ease-in-out}
.typing span:nth-child(2){animation-delay:.18s}
.typing span:nth-child(3){animation-delay:.36s}
@keyframes tk-typing{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-5px);opacity:1}}
@media (prefers-reduced-motion:reduce){.typing span{animation:none;opacity:.6}}

/* --- waiting for an agent + join notification --- */
.agent-av--wait{background:#e5e7eb}
.chat__wait{margin:auto;text-align:center;padding:28px 18px;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:8px}
.chat__wait-ring{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:tk-spin .9s linear infinite;margin-bottom:6px}
.chat__wait-title{margin:0;color:var(--ink);font-weight:500;line-height:1.45}
.chat__wait-note{margin:0;color:var(--muted);font-size:.85rem}
.chat__wait-timer{margin:6px 0 0;font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:600;color:var(--ink);letter-spacing:.02em}
@keyframes tk-spin{to{transform:rotate(360deg)}}
.joinnote{align-self:center;display:inline-flex;align-items:center;gap:8px;background:#ecfdf3;border:1px solid #d1fadf;color:#157347;border-radius:999px;padding:5px 14px 5px 5px;font-size:.86rem;animation:tk-join .35s ease both}
.joinnote .agent-av{width:26px;height:26px;font-size:.72rem}
.joinnote strong{color:#0f5132;font-weight:600}
@keyframes tk-join{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.chat__wait-ring{animation:none}.joinnote{animation:none}}

/* --- end-of-chat: close prompt, star rating, thanks --- */
.chat__close{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line);background:#f9fafb}
.chat__close span{color:var(--ink);font-size:.92rem}
.chat__close-btns{display:flex;gap:8px}
.btn--sm{padding:6px 12px;font-size:.86rem}

.tk-rate{margin-top:18px;display:flex;justify-content:center}
.tk-rate__card{width:100%;max-width:420px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:22px;text-align:center}
.tk-rate__agent{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px}
.tk-rate__agent strong{display:block;color:var(--ink);line-height:1.2}
.tk-rate__rep{font-size:.82rem;color:var(--muted)}
.tk-rate__card h3{margin:10px 0 14px;font-size:1.05rem;color:var(--ink);font-weight:600}
.tk-rate .linktext{margin-top:14px;background:none;border:0;color:var(--muted);font-size:.84rem;cursor:pointer;text-decoration:underline}

.tk-rate .rating{display:flex;flex-direction:row-reverse;justify-content:center;position:relative}
.tk-rate .rating > input{display:none}
.tk-rate .rating > label{position:relative;width:42px;height:42px;cursor:pointer;background-repeat:no-repeat;background-position:center;background-size:34px 34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d6d9e0'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E")}
.tk-rate .rating > input:checked ~ label,
.tk-rate .rating > label:hover,
.tk-rate .rating > label:hover ~ label{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fcd93a'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E")}
.tk-rate .rating > input:checked + label:hover,
.tk-rate .rating > input:checked ~ label:hover,
.tk-rate .rating > label:hover ~ input:checked ~ label,
.tk-rate .rating > input:checked ~ label:hover ~ label{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d8b11e'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E")}

.tk-rate .emoji-wrapper{position:absolute;top:-78px;left:0;right:0;height:64px;display:flex;justify-content:center;overflow:hidden;pointer-events:none}
.tk-rate .emoji{display:flex;flex-direction:column;transition:transform .25s ease}
.tk-rate .emoji > svg{width:56px;height:56px;margin:4px 0}
.tk-rate #rating-1:checked ~ .emoji-wrapper .emoji{transform:translateY(-64px)}
.tk-rate #rating-2:checked ~ .emoji-wrapper .emoji{transform:translateY(-128px)}
.tk-rate #rating-3:checked ~ .emoji-wrapper .emoji{transform:translateY(-192px)}
.tk-rate #rating-4:checked ~ .emoji-wrapper .emoji{transform:translateY(-256px)}
.tk-rate #rating-5:checked ~ .emoji-wrapper .emoji{transform:translateY(-320px)}

.tk-thanks{margin-top:18px;text-align:center;color:var(--ink);background:#ecfdf3;border:1px solid #d1fadf;border-radius:var(--radius);padding:16px}
@media (prefers-reduced-motion:reduce){.tk-rate .emoji{transition:none}}

/* the [hidden] attribute must win over display:flex/grid rules */
[hidden]{display:none !important}

/* ============================================================
   UI polish + responsive refinements
   ============================================================ */

/* Accessible focus rings everywhere (keyboard users), no double-outline on mouse. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(37,99,235,.12)}

/* Comfortable touch targets + smoother feel. */
.btn{min-height:42px;transition:background .15s,border-color .15s,color .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn--sm{min-height:36px}

/* Subtle depth (still flat, no gradients). */
.card,.doc,.panelbox,.tablewrap,.tk-rate__card,.chat{box-shadow:0 1px 2px rgba(16,24,40,.05)}
.card{transition:border-color .15s,box-shadow .15s,transform .1s}
.card:hover{box-shadow:0 6px 16px rgba(16,24,40,.08);transform:translateY(-2px)}

/* Sticky, app-like header. */
.hd{position:sticky;top:0;z-index:20}

/* Header: keep brand + nav on one tidy line, shrink gracefully on phones. */
.hd__brand{display:inline-flex;align-items:center;min-width:0}
.hd__nav{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}

/* Rating widget scales down on small screens so 5 stars never overflow. */
@media (max-width:380px){
  .tk-rate .rating > label{width:38px;height:38px;background-size:30px 30px}
  .tk-rate__card{padding:18px 14px}
}

/* Phones: clear side margins, compact type, NO full-width buttons. */
@media (max-width:560px){
  body{font-size:15px;line-height:1.5}
  /* lateral breathing room — content never touches the screen edges */
  .wrap{padding:0 20px}
  /* header */
  .hd__in{height:52px;gap:8px}
  .hd__nav{gap:12px;font-size:.88rem}
  .hd__logo{height:24px}
  /* compact type scale */
  h1{font-size:1.35rem}
  h2{font-size:1.12rem}
  h3{font-size:1rem}
  .lead{font-size:.95rem}
  /* hero */
  .hero{padding:18px 0 14px;max-width:none}
  .hero h1{font-size:1.45rem;margin-bottom:.15em}
  .hero__sub{font-size:.92rem}
  /* search stays a single row; the button keeps its natural width */
  .searchbar{margin-top:14px;gap:8px}
  .searchbar input{padding:11px 12px 11px 40px;background-position:13px center;background-size:18px}
  .searchbar .btn{flex:none;width:auto}
  /* sections + cards */
  .main{padding:14px 0 6px}
  .sec{margin-top:20px;font-size:1.05rem}
  .cards{gap:10px;margin-top:10px}
  .card{padding:14px 16px;border-radius:12px}
  .card h3{font-size:1rem;margin-bottom:3px}
  .card p{font-size:.9rem;margin-bottom:6px}
  .card__meta{font-size:.78rem}
  .ctabar{padding:18px 18px;margin-top:22px;gap:12px;border-radius:12px}
  .ctabar h2{font-size:1.08rem}
  .ctabar p{font-size:.92rem}
  /* containers */
  .panelbox{padding:20px 18px;margin-top:0}
  .doc{padding:18px 16px}
  /* portal — buttons sit inline at natural width, wrap if needed */
  .portal-head{padding:18px 16px;border-radius:14px}
  .portal-who h1{font-size:1.3rem}
  .portal-actions{flex-wrap:wrap;gap:10px}
  .portal-id{gap:10px}
  .cust-av--lg{width:42px;height:42px;font-size:1.05rem}
  .table th,.table td{padding:9px 10px;font-size:.85rem}
  /* kb category cards */
  .artrow{padding:13px 14px;gap:10px}
  .artrow__title{font-size:.98rem}
  .artrow__sub{font-size:.84rem}
  .artrow__chev{font-size:1.35rem}
  /* chat fills the viewport */
  .chat{height:auto;min-height:0;flex:1;border-radius:12px}
  .main:has(.chat){display:flex;flex-direction:column;min-height:calc(100dvh - 104px)}
  .chat__msgs{padding:12px;gap:8px}
  .msg-row .msg{max-width:86%}
}

/* Honour reduced-motion for the new transitions too. */
@media (prefers-reduced-motion:reduce){
  .btn,.card{transition:none}
  .card:hover{transform:none}
}

/* ============================================================
   Portal landing — skip link, product chips, ticket list, empty state
   ============================================================ */

/* Skip-to-content: off-screen until keyboard-focused. */
.skip{position:absolute;left:8px;top:-48px;z-index:50;background:var(--accent);color:#fff;
  padding:9px 16px;border-radius:8px;font-weight:600;font-size:.9rem;transition:top .15s}
.skip:focus{top:8px;text-decoration:none}

/* Product chips — each reads as an active, recognised license. */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--accent-ink);
  background:#eff6ff;border:1px solid #dbeafe;border-radius:999px;padding:5px 13px 5px 10px}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* Ticket count pill next to the section heading. */
.sec__count{display:inline-block;margin-left:6px;font-size:.72rem;font-weight:600;color:var(--muted);
  background:#f3f4f6;border:1px solid var(--line);border-radius:999px;padding:1px 9px;vertical-align:middle}

/* Tickets as fully-clickable rows (consistent with the KB article rows). */
.ticketlist{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.ticket-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.05);
  transition:border-color .15s,box-shadow .15s,transform .1s}
.ticket-row:hover{border-color:var(--accent);text-decoration:none;box-shadow:0 6px 16px rgba(16,24,40,.08);transform:translateY(-1px)}
.ticket-row__main{flex:1 1 auto;min-width:0}
.ticket-row__subject{display:block;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.ticket-row__meta{display:block;margin-top:3px;color:var(--muted);font-size:.82rem}
.ticket-row__chev{flex:0 0 auto;color:var(--muted);font-size:1.5rem;line-height:.7;transition:color .15s,transform .15s}
.ticket-row:hover .ticket-row__chev{color:var(--accent);transform:translateX(3px)}
/* The team replied and it's the customer's turn — draw the eye. */
.ticket-row--answered{border-left-width:3px;border-left-color:var(--accent);padding-left:14px}

/* Friendly empty state with icon + CTAs. */
.emptybox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px 22px;
  text-align:center;box-shadow:0 1px 2px rgba(16,24,40,.05);margin-top:14px}
.emptybox__icon{display:block;width:42px;height:42px;margin:0 auto 12px;color:var(--muted)}
.emptybox h3{font-size:1.05rem;margin-bottom:4px}
.emptybox p{margin:0 auto;max-width:360px}
.emptybox .portal-actions{justify-content:center;margin-top:16px}

@media (prefers-reduced-motion:reduce){
  .ticket-row{transition:none}
  .ticket-row:hover{transform:none}
}

@media (max-width:560px){
  .ticket-row{padding:13px 14px;gap:10px}
  .ticket-row--answered{padding-left:12px}
  .ticket-row__subject{font-size:.98rem}
  .emptybox{padding:24px 16px}
}

/* ============================================================
   Home page — gradient hero, quick links, topic cards, CTA band
   ============================================================ */

/* Hero panel: soft branded gradient with blurred accent glows. */
.hero--home{position:relative;max-width:none;border:1px solid #e3ebf9;border-radius:24px;
  background:linear-gradient(165deg,#eef4ff 0%,#f6f9ff 45%,#fbfcfe 100%);
  padding:56px 28px 50px;margin:8px 0 0;text-align:center}
/* The glows live in their own clipped layer so the search dropdown can overflow the panel. */
.hero__decor{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0;pointer-events:none}
.hero__decor::before,.hero__decor::after{content:"";position:absolute;border-radius:50%;filter:blur(64px)}
.hero__decor::before{width:300px;height:300px;background:rgba(96,165,250,.45);top:-110px;right:-70px}
.hero__decor::after{width:260px;height:260px;background:rgba(167,139,250,.30);bottom:-120px;left:-80px}
.hero__inner{position:relative;z-index:1;max-width:660px;margin:0 auto}
.hero__eyebrow{display:inline-block;font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent-ink);background:rgba(255,255,255,.72);border:1px solid #dbeafe;border-radius:999px;
  padding:5px 14px;margin-bottom:16px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hero--home h1{font-size:2.5rem;letter-spacing:-.03em;margin-bottom:.18em}
.hero--home .hero__sub{font-size:1.1rem;max-width:520px;margin:0 auto}

/* Elevated hero search. */
.searchbar--hero{margin-top:26px}
.searchbar--hero input{padding-top:15px;padding-bottom:15px;border-radius:12px;box-shadow:0 6px 18px rgba(16,24,40,.07)}
.searchbar--hero .btn{border-radius:12px;box-shadow:0 6px 18px rgba(37,99,235,.22)}

/* Popular-topic quick links. */
.hero__quick{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:20px}
.hero__quick-label{font-size:.82rem;font-weight:500;color:var(--muted)}
.qlink{font-size:.85rem;font-weight:500;color:var(--text);background:rgba(255,255,255,.85);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;transition:border-color .15s,color .15s,box-shadow .15s}
.qlink:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;box-shadow:0 2px 8px rgba(16,24,40,.06)}

/* Live "search as you type" dropdown. */
.searchbar__field{position:relative}
.suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(16,24,40,.16);
  overflow:hidden auto;max-height:min(64vh,440px)}
.suggest__item{display:block;padding:11px 15px;border-bottom:1px solid var(--line);color:var(--ink)}
.suggest__item:last-of-type{border-bottom:0}
.suggest__item:hover,.suggest__item.is-active{background:#f3f6fc;text-decoration:none}
.suggest__title{display:block;font-weight:600;font-size:.95rem;line-height:1.3;overflow-wrap:anywhere}
.suggest__snip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:3px;font-size:.84rem;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}
.suggest mark{background:#fef3c7;color:inherit;border-radius:3px;padding:0 1px}
.suggest__empty{padding:16px 15px;color:var(--muted);font-size:.9rem}
.suggest__all{display:block;padding:11px 15px;background:#f8fafc;border-top:1px solid var(--line);
  font-weight:600;font-size:.88rem;color:var(--accent-ink)}
.suggest__all:hover,.suggest__all.is-active{background:#eef4ff;text-decoration:none}

/* Section heading + subtext. */
.sec-head{text-align:center;margin-top:46px}
.sec-head .sec{margin:0 0 .2em}
.sec__desc{margin:0;color:var(--muted)}

/* Topic cards: colourful icon tiles, with a rotating palette. */
.card--topic .card__icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px;
  margin-bottom:13px;background:#eff6ff;color:var(--accent)}
.card--topic .card__icon svg{width:23px;height:23px}
.cards .card--topic:nth-child(6n+2) .card__icon{background:#ecfdf3;color:#16a34a}
.cards .card--topic:nth-child(6n+3) .card__icon{background:#fef3f2;color:#e11d48}
.cards .card--topic:nth-child(6n+4) .card__icon{background:#fff7ed;color:#ea580c}
.cards .card--topic:nth-child(6n+5) .card__icon{background:#f5f3ff;color:#7c3aed}
.cards .card--topic:nth-child(6n)   .card__icon{background:#ecfeff;color:#0891b2}

/* CTA band: deep gradient with a soft glow + ghost button. */
.ctabar--home{position:relative;overflow:hidden;border:0;
  background:linear-gradient(135deg,#1e3a8a 0%,#1f2937 60%,#111827 100%)}
.ctabar--home::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;
  background:rgba(59,130,246,.38);filter:blur(80px);top:-140px;right:-40px;pointer-events:none}
.ctabar--home > *{position:relative;z-index:1}
.ctabar__actions{display:flex;gap:10px;flex-wrap:wrap}
.btn--ghost{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45);color:#fff}

@media (max-width:560px){
  .hero--home{padding:34px 18px 30px;border-radius:18px}
  .hero--home h1{font-size:1.75rem}
  .hero--home .hero__sub{font-size:.98rem}
  .hero__eyebrow{margin-bottom:12px}
  .hero__decor::before{width:190px;height:190px;top:-80px;right:-60px}
  .hero__decor::after{width:170px;height:170px;bottom:-90px;left:-60px}
  .sec-head{margin-top:32px}
  .card--topic .card__icon{width:40px;height:40px;border-radius:11px;margin-bottom:10px}
}

/* ============================================================
   Knowledge base — category hero, article rows, article page
   ============================================================ */

/* Category hero: compact gradient header with an icon tile + count pill. */
.kbhero{position:relative;overflow:hidden;border:1px solid #e3ebf9;border-radius:20px;
  background:linear-gradient(150deg,#eef4ff 0%,#f7faff 58%,#fbfcfe 100%);
  padding:28px 28px 26px;margin:4px 0 24px}
.kbhero::before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;
  background:rgba(96,165,250,.40);filter:blur(64px);top:-110px;right:-60px;pointer-events:none;z-index:0}
.kbhero > *{position:relative;z-index:1}
.kbhero__icon{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:15px;
  background:#fff;color:var(--accent);box-shadow:0 6px 16px rgba(37,99,235,.20);margin-bottom:14px}
.kbhero__icon svg{width:26px;height:26px}
.kbhero h1{margin:0 0 .12em;letter-spacing:-.02em}
.kbhero .lead{margin:0;max-width:580px}
.kbhero__count{display:inline-block;margin-top:14px;font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--accent-ink);background:rgba(255,255,255,.7);border:1px solid #dbeafe;
  border-radius:999px;padding:4px 12px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* Article rows gain a leading icon tile. */
.artrow__icon{flex:0 0 auto;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:#eff6ff;color:var(--accent);transition:background .15s,color .15s}
.artrow__icon svg{width:19px;height:19px}
.artrow:hover .artrow__icon{background:var(--accent);color:#fff}

/* Reading-progress bar pinned to the very top. */
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:30;pointer-events:none;background:transparent}
.reading-progress span{display:block;height:100%;width:0;background:var(--accent)}

/* Article page: readable measure, refined header + meta, helpful footer. */
.doc--article{max-width:760px;margin:0 auto;padding:34px 40px}
.doc__head{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.doc--article h1{font-size:2.1rem;letter-spacing:-.02em;margin:0 0 14px;line-height:1.2}
.doc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:.86rem;color:var(--muted)}
.doc-cat{display:inline-flex;align-items:center;font-weight:600;color:var(--accent-ink);background:#eff6ff;
  border:1px solid #dbeafe;border-radius:999px;padding:3px 11px}
.doc-cat:hover{text-decoration:none;border-color:var(--accent)}
.doc-dot{color:#cbd5e1}
.doc__body{font-size:1.02rem}
.doc__foot{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.helpful{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.helpful__q{font-weight:600;color:var(--ink)}
.helpful__btns{display:flex;gap:8px}
.helpful__thanks{color:#157347;font-weight:600}

/* Related articles, aligned to the article measure. */
.related{max-width:760px;margin:28px auto 0}
.related .sec{margin-top:0}

/* Keep the article CTA on the same 760px measure as the article card. */
.ctabar--narrow{max-width:760px;margin-left:auto;margin-right:auto}

/* ============================================================
   New ticket — two-column form + "what happens next" aside
   ============================================================ */
.ticketform{display:grid;gap:18px;align-items:start;margin-top:6px}

.ticketform__main{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;
  box-shadow:0 1px 2px rgba(16,24,40,.05)}
.formhead{margin-bottom:22px}
.formhead__icon{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:15px;
  background:#eff6ff;color:var(--accent);margin-bottom:14px;box-shadow:0 6px 16px rgba(37,99,235,.16)}
.formhead__icon svg{width:25px;height:25px}
.formhead h1{margin:0 0 .25em;font-size:1.6rem;letter-spacing:-.02em}
.formhead .lead{margin:0}
.ticketform__form textarea{min-height:140px}
.field-hint{display:block;margin-top:6px;font-size:.82rem;color:var(--muted);font-weight:400}
.ticketform__submit{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:2px}
.ticketform__submit .field-hint{margin-top:0}

/* Aside */
.ticketform__aside{display:grid;gap:16px}
.aside-card{border:1px solid var(--line);border-radius:16px;padding:20px 22px;background:var(--card);
  box-shadow:0 1px 2px rgba(16,24,40,.05)}
.aside-card h3{font-size:1rem;margin:0 0 16px}
.aside-card--hero{position:relative;overflow:hidden;border-color:#e3ebf9;
  background:linear-gradient(160deg,#eef4ff 0%,#f7faff 60%,#fbfcfe 100%)}
.aside-card--hero::before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;
  background:rgba(96,165,250,.35);filter:blur(56px);top:-100px;right:-50px;pointer-events:none}
.aside-card--hero > *{position:relative;z-index:1}

/* Numbered steps with a connecting line. */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.steps li{position:relative;display:flex;gap:13px;align-items:flex-start}
.steps li:not(:last-child)::before{content:"";position:absolute;left:13px;top:30px;bottom:-16px;width:2px;background:#d9e2f2}
.steps__n{position:relative;z-index:1;flex:0 0 auto;width:27px;height:27px;border-radius:50%;display:grid;
  place-items:center;background:var(--accent);color:#fff;font-size:.8rem;font-weight:700;box-shadow:0 2px 6px rgba(37,99,235,.3)}
.steps__t{font-size:.88rem;color:var(--muted);line-height:1.45}
.steps__t strong{display:block;color:var(--ink);font-weight:600;font-size:.92rem}

/* Live-chat cross-sell. */
.aside-chat{display:flex;align-items:center;gap:13px}
.aside-chat__icon{flex:0 0 auto;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:#ecfdf3;color:#16a34a}
.aside-chat__icon svg{width:20px;height:20px}
.aside-chat__txt{flex:1;min-width:0}
.aside-chat__txt strong{display:block;color:var(--ink);font-size:.95rem}
.aside-chat__txt span{font-size:.84rem;color:var(--muted)}

@media(min-width:760px){
  .ticketform{grid-template-columns:1.5fr .95fr;gap:24px}
}
@media(max-width:560px){
  .ticketform__main{padding:22px 18px;border-radius:14px}
  .formhead__icon{width:44px;height:44px;border-radius:13px}
  .formhead h1{font-size:1.4rem}
  .aside-card{padding:18px}
}

@media (max-width:560px){
  .kbhero{padding:22px 18px 20px;border-radius:16px;margin-bottom:18px}
  .kbhero__icon{width:44px;height:44px;border-radius:13px;margin-bottom:12px}
  .doc--article{padding:22px 18px;max-width:none}
  .doc--article h1{font-size:1.5rem}
  .doc__body{font-size:1rem}
  .artrow__icon{width:34px;height:34px}
}

/* ============================================================
   Live chat — polished surface, presence, bubbles, composer
   ============================================================ */
.chat{border-radius:16px;box-shadow:0 12px 32px rgba(16,24,40,.10);overflow:hidden}
.chat__head{gap:12px;padding:13px 16px}
.chat__who strong{font-size:.98rem}
.chat__status{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}
.chat__status .dot{width:7px;height:7px;border-radius:50%;background:#16a34a;flex:none;
  box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:tk-pulse 2.2s infinite}
@keyframes tk-pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}

/* Tinted conversation area so bubbles lift off the surface. */
.chat__msgs{background:#f8fafc}

/* Message bubbles: soft shadow, chat-style asymmetric corners, gentle entrance. */
.msg{border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.06)}
.msg--customer{border-radius:14px 14px 4px 14px}
.msg--ai{border-radius:14px 14px 14px 4px}
.msg-row{animation:tk-msg-in .26s ease both}
@keyframes tk-msg-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* Composer: soft pill input + circular send button. */
.chat__input{align-items:flex-end;gap:10px;padding:12px 14px;background:#fff}
.chat__input textarea{border-radius:14px;background:#f3f4f6;border-color:transparent;padding:11px 14px}
.chat__input textarea:focus{background:#fff;border-color:var(--accent)}
.chat__send{flex:0 0 auto;width:44px;height:44px;min-height:0;padding:0;border-radius:50%;
  display:grid;place-items:center;box-shadow:0 6px 16px rgba(37,99,235,.28)}
.chat__send:hover{transform:translateY(-1px)}
.chat__send:disabled{opacity:.5;box-shadow:none;transform:none}
.chat__send svg{width:18px;height:18px;margin-left:-1px}

/* "Ticket opened" confirmation card shown inline in the conversation. */
.ticket-card{display:flex;align-items:center;gap:12px;background:#eff6ff;border:1px solid #dbeafe;
  border-radius:14px;padding:12px 14px;box-shadow:0 1px 2px rgba(16,24,40,.06);animation:tk-msg-in .26s ease both}
.ticket-card__icon{flex:0 0 auto;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#fff;color:var(--accent)}
.ticket-card__icon svg{width:20px;height:20px}
.ticket-card__body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.32}
.ticket-card__body strong{color:var(--ink);font-size:.92rem}
.ticket-card__sub{color:var(--text);font-size:.85rem;font-weight:500;overflow-wrap:anywhere}
.ticket-card__note{color:var(--muted);font-size:.82rem}
.ticket-card .btn{flex:0 0 auto;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .msg-row{animation:none}
  .chat__status .dot{animation:none}
  .chat__send:hover{transform:none}
  .ticket-card{animation:none}
}
@media (max-width:560px){
  .chat{border-radius:14px}
  .chat__send{width:42px;height:42px}
  .ticket-card{flex-wrap:wrap}
  .ticket-card .btn{margin-top:2px}
}

/* ============================================================
   Image attachments (chat + tickets)
   ============================================================ */
.msg__atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.msg__body:empty{display:none}
.msg__att{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#fff;max-width:240px}
.msg__att img{display:block;max-width:100%;max-height:200px;object-fit:cover}
.msg__att:hover{border-color:var(--accent)}
.msg__att-expired{display:inline-block;font-size:.82rem;color:var(--muted);background:#f3f4f6;border:1px dashed var(--line);border-radius:8px;padding:6px 10px}

/* Paperclip button in the chat composer */
.chat__attach{flex:0 0 auto;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:color .15s,border-color .15s}
.chat__attach:hover{color:var(--accent);border-color:var(--accent)}
.chat__attach:disabled{opacity:.45;cursor:default}
.chat__attach svg{width:19px;height:19px}

/* Optional-screenshot field on ticket forms */
.attach-field input[type=file]{margin-top:0;padding:8px 10px;font-size:.88rem}
.hint-line{display:block;margin-top:5px;font-size:.8rem;color:var(--muted)}
input[type=file]{background:#f8fafc;border-style:dashed;cursor:pointer}
input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:.84rem;margin-right:10px;
  padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer}
input[type=file]::file-selector-button:hover{border-color:var(--accent);color:var(--accent)}

@media (max-width:560px){
  .chat__attach{width:42px;height:42px}
  .msg__att{max-width:180px}
  .msg__att img{max-height:160px}
}

/* Document attachments (PDF/DOCX) as compact file cards */
.msg__file{display:inline-flex;align-items:center;gap:10px;max-width:260px;padding:9px 12px;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.msg__file:hover{border-color:var(--accent);text-decoration:none}
.msg__file-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:9px;
  background:#eff6ff;color:var(--accent-ink);font-size:.68rem;font-weight:700;letter-spacing:.02em}
.msg__file-main{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.msg__file-main strong{font-size:.86rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg__file-main span{font-size:.76rem;color:var(--muted)}

/* Rendered rich text inside agent / system bubbles (md_html) */
.msg__body p, .sysnote p { margin: 0 0 .65em; }
.msg__body p:last-child, .sysnote p:last-child { margin-bottom: 0; }
.msg__body ul, .msg__body ol, .sysnote ul, .sysnote ol { margin: .25em 0 .65em; padding-left: 1.35em; }
.msg__body ul:last-child, .msg__body ol:last-child { margin-bottom: 0; }
.msg__body li, .sysnote li { margin: .2em 0; }
.msg__body strong, .sysnote strong { font-weight: 700; }

/* Links inside message bubbles: visibly clickable, long URLs wrap */
.msg__body a, .sysnote a { color: var(--accent, #2563eb); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; overflow-wrap: anywhere; }
.msg__body a:hover, .sysnote a:hover { color: var(--accent-ink, #1d4ed8); }
/* KB: subcategories and sections (v18) */
.card__subs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}
.card__sub{font-size:.76rem;font-weight:500;color:var(--accent-ink);background:#eff4ff;border-radius:999px;padding:3px 9px}
.cards--subs{margin:6px 0 26px}
@media (min-width:640px){.cards--subs{grid-template-columns:1fr 1fr}}
.artgroup{font-size:1.05rem;font-weight:700;color:var(--ink);margin:28px 0 0;padding-bottom:8px;border-bottom:1px solid var(--line);scroll-margin-top:16px}
.artgroup + .artlist{margin-top:12px}