/* =====================================================================
   Lavender theme — inspired by a soft lavender/violet chat UI.
   Chosen theme: "Lavender Soft" (data-skin="a", always on — see index.html).
   Overrides the base tokens/components in app.css.
   ===================================================================== */

/* ---------- shared tokens for every skin (light) ---------- */
:root[data-skin]{
  --brand:#5B4FD6; --brand-ink:#ffffff; --brand-2:#5B4FD6; --stamp-paper:#ffffff;
  --page:#F4F3FF; --surface:#ffffff; --surface-2:#F1EFFE; --surface-3:#E6E2FD;
  --ink:#1F1B3D; --ink-2:#5E5A7E; --muted:#6F6B92;
  --grid:#E7E4F8; --axis:#CBC5EE; --ring:rgba(91,79,214,.14);
  --critical:#D3343A; --good:#13803B; --accent:#5B4FD6;
  --shadow:0 2px 6px rgba(91,79,214,.06),0 14px 34px rgba(91,79,214,.10);
  --font:"Quicksand","Anuphan","Noto Sans Thai",system-ui,sans-serif;
  --font-head:"Quicksand","Mitr","Noto Sans Thai",system-ui,sans-serif;
  --r-card:24px;
}
:root[data-skin][data-theme="dark"]{
  --brand:#8F84F5; --brand-ink:#14112B; --brand-2:#8F84F5; --stamp-paper:#1C1938;
  --page:#110F24; --surface:#1C1938; --surface-2:#26224A; --surface-3:#302B5C;
  --ink:#EEEDFB; --ink-2:#B7B3DA; --muted:#9A96C2;
  --grid:#2A2650; --axis:#463F7E; --ring:rgba(238,237,251,.12);
  --accent:#A79EF8; --shadow:none;
}
:root[data-skin] body{font-weight:400;letter-spacing:.005em}
:root[data-skin] h1,:root[data-skin] h2,:root[data-skin] h3,:root[data-skin] .logo .word{font-weight:500}
:root[data-skin] .logo .word b{color:var(--brand)}

/* icon buttons → outlined circles (reference top-right buttons) */
:root[data-skin] .ibtn{border-radius:50%;width:42px;height:42px;border:1.5px solid var(--axis)}
:root[data-skin] .ibtn svg{width:20px;height:20px}
:root[data-skin] .topbar{border-bottom:0;background:color-mix(in srgb,var(--page) 88%,transparent)}

/* rounded everything */
:root[data-skin] .card,:root[data-skin] .sc,:root[data-skin] .feat,:root[data-skin] .nowcard,:root[data-skin] .lg-toc,:root[data-skin] .lg-box{border-radius:var(--r-card)}
:root[data-skin] .sc,:root[data-skin] .feat,:root[data-skin] .card{border:0;box-shadow:var(--shadow)}
:root[data-skin] .img .fb .src{font-weight:600}

/* category filter → segmented pill control ("All Chats | Groups | Contacts") */
:root[data-skin] .h-cats{gap:2px;padding:6px;margin:10px 0 0;border-radius:999px;background:var(--surface);box-shadow:var(--shadow);position:sticky;top:calc(var(--top-h) + 6px)}
:root[data-skin] .h-cats .chip{border:0;background:transparent;color:var(--ink-2);height:38px}
:root[data-skin] .h-cats .chip[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 35%,transparent)}
:root[data-skin] .chip[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink)}
:root[data-skin] .dr-cats .chip{border-color:transparent;background:var(--surface-2)}
:root[data-skin] .dr-cats .chip[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink)}

/* drawer → chat list: round avatars, roomy rows */
:root[data-skin] .drawer{border-right:0;border-radius:0 28px 28px 0}
:root[data-skin] .dr-thumb{border-radius:50%;width:54px;height:54px}
:root[data-skin] .dr-item{padding:9px 10px;border-radius:18px}
:root[data-skin] .dr-item[aria-current="page"]{background:var(--surface-2)}
:root[data-skin] .dr-txt b{font-weight:600}
:root[data-skin] .dr-search input{border-radius:999px;border-color:transparent}

/* status pill & progress */
:root[data-skin] .prog .bars i{height:7px}
:root[data-skin] .prog .bars i.d{background:var(--brand)}

/* timeline: violet era cards like the chat screen, lavender "bubbles" */
:root[data-skin] .era-card{background:color-mix(in srgb,var(--brand) 9%,var(--surface));color:var(--ink);border:1px solid color-mix(in srgb,var(--brand) 20%,transparent);border-radius:18px}
:root[data-skin][data-theme="dark"] .era-card{background:color-mix(in srgb,var(--brand) 16%,var(--surface))}
:root[data-skin] .era-node{background:var(--brand)}
:root[data-skin] .day .d{background:var(--surface);box-shadow:var(--shadow)}
:root[data-skin] .res .ri{background:var(--brand);color:var(--brand-ink);border-radius:50%}
:root[data-skin] .mb .simple{background:var(--surface-2);border-radius:18px 18px 18px 6px}
:root[data-skin] .more{color:var(--brand)}
:root[data-skin] #tick{background:color-mix(in srgb,var(--brand) 9%,var(--surface));color:var(--ink);border-radius:0}   /* the ticker band only (not the rail's .tick marks) */
:root[data-skin] .ms{border-radius:18px;background:var(--surface);border:0;box-shadow:var(--shadow)}
:root[data-skin] .rail .bg{border-radius:999px;border:0}
/* desktop rail is wide (icons + labels): a full pill would clip the track, so use card radius */
@media(min-width:1000px){:root[data-skin] .rail .bg{border-radius:var(--r-card)}}
:root[data-skin] .rail .thumb{border-color:var(--brand)}
:root[data-skin] .rail .thumb::after,:root[data-skin] .rail .fill{background:var(--brand)}
:root[data-skin] .sec .ic{background:var(--surface-2);border-radius:50%}
:root[data-skin] .sec .segs i.on{background:var(--brand)}
:root[data-skin] .lg-tabs a[aria-current]{background:var(--brand);color:var(--brand-ink)}
:root[data-skin] .report{border-radius:999px}
:root[data-skin] .btn{border-radius:999px;background:var(--brand);color:var(--brand-ink)}