/* Sukoon AI design tokens — starting palette, not rigid. */
:root {
  --sk-primary: #171A3A;
  --sk-secondary: #6558D3;
  --sk-accent: #B9A8FF;
  --sk-bg: #F8F7FC;
  --sk-surface: #FFFFFF;
  --sk-text: #24243A;
  --sk-muted: #5E5E78;
  --sk-border: #E4E1F2;
  --sk-radius: 18px;
  --sk-shadow: 0 6px 24px rgba(23, 26, 58, .07);
  --bs-primary: #6558D3;
  --bs-primary-rgb: 101, 88, 211;
  --bs-body-bg: var(--sk-bg);
  --bs-body-color: var(--sk-text);
  --bs-link-color: #5144C0;
  --bs-link-hover-color: #3F33A5;
  --bs-border-radius: 12px;
  --bs-font-sans-serif: "Inter", "Segoe UI", system-ui, -apple-system, "Noto Sans", "Noto Sans Devanagari", Roboto, sans-serif;
}
body { background: var(--sk-bg); color: var(--sk-text); }
.text-muted, .form-text { color: var(--sk-muted) !important; }
.btn-primary { --bs-btn-bg: #5144C0; --bs-btn-border-color: #5144C0; --bs-btn-hover-bg: #43379F; --bs-btn-hover-border-color: #43379F; --bs-btn-active-bg: #3A3090; --bs-btn-disabled-bg: #5144C0; }
.btn-outline-primary { --bs-btn-color: #5144C0; --bs-btn-border-color: #5144C0; --bs-btn-hover-bg: #5144C0; --bs-btn-hover-border-color: #5144C0; }
:focus-visible { outline: 3px solid var(--sk-accent); outline-offset: 2px; }
.sk-skip { position: absolute; left: 8px; top: 8px; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: 8px; }
.sk-w-sm { max-width: 460px; } .sk-w-md { max-width: 720px; } .sk-w-lg { max-width: 860px; }
.sk-cc { max-width: 120px; }
.min-w-0 { min-width: 0; }

/* brand */
.sk-brand { font-weight: 700; letter-spacing: .2px; color: var(--sk-primary); text-decoration: none; font-size: 1.15rem; }
.sk-logo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, var(--sk-secondary), var(--sk-accent)); color: #fff; font-size: 1rem; margin-right: .25rem; }
.sk-logo-lg { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(135deg, var(--sk-secondary), var(--sk-accent)); color: #fff; font-size: 2rem; }
.sk-eyebrow { color: var(--sk-accent); font-weight: 600; letter-spacing: .04em; }
.sk-header { background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--sk-border); position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(8px); }

/* public sections */
.sk-hero { background: radial-gradient(1200px 500px at 80% -10%, #3B3490 0%, transparent 60%), var(--sk-primary); color: #fff; padding: 5rem 0; }
.sk-hero .lead { color: #D9D6F2; }
.sk-demo { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 24px; padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.sk-band { background: #EFEDF9; }
.sk-card { background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); padding: 1.5rem; box-shadow: var(--sk-shadow); }
.sk-notice { background: #F1EEFF; border-color: #D8D0FF; }
.sk-danger { border-color: #F2C6C6; }
.sk-badge { background: #EAE6FF; color: #3F33A5; font-weight: 600; }
.sk-plan-featured { border: 2px solid var(--sk-secondary); }
.sk-price { font-size: 2.1rem; font-weight: 700; }
.sk-checks { list-style: none; padding: 0; }
.sk-checks li { padding-left: 1.6rem; position: relative; margin-bottom: .45rem; }
.sk-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--sk-secondary); font-weight: 700; }
.sk-step { width: 44px; height: 44px; border-radius: 50%; background: var(--sk-secondary); color: #fff; display: inline-grid; place-items: center; font-weight: 700; margin-bottom: .75rem; }
.sk-steps { padding-left: 1.2rem; } .sk-steps li { margin-bottom: 1.2rem; }
.sk-legal h2 { font-size: 1.15rem; margin-top: 1.5rem; }
.sk-footer { background: var(--sk-primary); color: #fff; } .sk-footer a { color: #CFC8FF; text-decoration: none; } .sk-footer a:hover { text-decoration: underline; }
.sk-otp { letter-spacing: .6em; font-variant-numeric: tabular-nums; }

/* bubbles */
.sk-bubble { max-width: 85%; padding: .7rem 1rem; border-radius: 18px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.sk-bubble-user { align-self: flex-end; background: var(--sk-secondary); color: #fff; border-bottom-right-radius: 6px; }
.sk-bubble-ai { align-self: flex-start; background: #fff; border: 1px solid var(--sk-border); color: var(--sk-text); border-bottom-left-radius: 6px; }
.sk-bubble-support { align-self: flex-start; background: #FFF4DB; border: 1px solid #F1D48A; color: #4B3A07; border-bottom-left-radius: 6px; }
.sk-bubble-suppressed { opacity: .55; border-style: dashed; }
.sk-bubble .sk-who { display: block; font-size: .72rem; font-weight: 700; opacity: .8; margin-bottom: .15rem; }
.sk-bubble time { display: block; font-size: .68rem; opacity: .65; margin-top: .25rem; }

/* app shell */
.sk-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.sk-sidebar { --bs-offcanvas-width: 290px; background: var(--sk-primary); color: #fff; width: 280px; flex: 0 0 280px; }
@media (min-width: 992px) { .sk-sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; } .sk-sidebar .offcanvas-body { display: flex; } }
.sk-sidebar .offcanvas-body { overflow-y: auto; }
.sk-navlink { color: #D5D1F5; text-decoration: none; padding: .55rem .8rem; border-radius: 12px; display: block; }
.sk-navlink:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sk-navlink.active { background: rgba(185, 168, 255, .2); color: #fff; font-weight: 600; }
.sk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sk-topbar { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; background: #fff; border-bottom: 1px solid var(--sk-border); position: sticky; top: 0; z-index: 900; }
.sk-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sk-page { padding: 1.5rem; }
.sk-convitem { display: block; color: #D5D1F5; text-decoration: none; padding: .45rem .7rem; border-radius: 10px; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-convitem:hover, .sk-convitem.active { background: rgba(255, 255, 255, .1); color: #fff; }

/* chat */
.sk-chat { display: flex; flex-direction: column; height: calc(100dvh - 54px); min-height: 0; }
@media (min-width: 992px) { .sk-chat { height: 100dvh; } }
.sk-chat-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem 1rem; background: #fff; border-bottom: 1px solid var(--sk-border); }
.sk-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; scroll-behavior: smooth; }
.sk-messages-admin { max-height: 380px; border: 1px solid var(--sk-border); border-radius: 12px; background: #FBFAFF; }
.sk-empty { margin: auto; text-align: center; max-width: 420px; padding: 2rem 1rem; }
.sk-composer { display: flex; gap: .5rem; align-items: flex-end; padding: .75rem 1rem calc(.5rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--sk-border); }
.sk-composer textarea { resize: none; max-height: 140px; border-radius: 16px; }
.sk-composer .btn { border-radius: 14px; min-width: 76px; }
.sk-disclaimer { text-align: center; font-size: .72rem; color: var(--sk-muted); margin: 0; padding: .25rem 1rem calc(.4rem + env(safe-area-inset-bottom)); background: #fff; }
.sk-typing span { display: inline-block; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: var(--sk-secondary); animation: sk-blink 1.2s infinite ease-in-out; }
.sk-typing span:nth-child(2) { animation-delay: .15s; } .sk-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes sk-blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* admin */
.sk-admin .sk-sidebar { background: #101230; }
.sk-chart { position: relative; height: 260px; }
.sk-stat { background: #fff; border: 1px solid var(--sk-border); border-radius: 16px; padding: 1rem 1.1rem; height: 100%; }
.sk-stat .v { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.sk-stat .l { font-size: .8rem; color: var(--sk-muted); }
.sk-live-list { max-height: 520px; overflow-y: auto; }
.sk-live-list tr[data-id] { cursor: pointer; }
.sk-live-list tr.active { background: #EFEDF9; }
.sk-live-view { min-height: 360px; }

.sk-harm { background: #FFD6D6; color: #8A1212; font-weight: 700; padding: 0 .2em; border-radius: 4px; }
.sk-bubble-user .sk-harm { background: #FFE3E3; }

/* brand logo */
.sk-logo-img { height: 44px; width: auto; display: block; }
.sk-mark { width: 30px; height: 30px; border-radius: 9px; background: #fff; object-fit: cover; margin-right: .35rem; vertical-align: middle; }
.sk-mark-lg { width: 64px; height: 64px; border-radius: 18px; background: #fff; object-fit: cover; box-shadow: var(--sk-shadow); }

/* sticky footer: short pages (errors, contact, login) keep the footer at the bottom of the screen */
body.sk-public { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.sk-public > main { flex: 1 0 auto; }
body.sk-public > .sk-footer { flex-shrink: 0; margin-top: auto; }
.sk-error-page { display: flex; align-items: center; justify-content: center; min-height: 50vh; }

/* ===== UI refresh ===== */
:root { --sk-teal: #1FA39A; --sk-blue: #3E7CC4; --sk-grad: linear-gradient(135deg, #1FA39A 0%, #3E7CC4 55%, #8E7BE0 100%); }

/* Bootstrap's .offcanvas-lg makes the sidebar transparent on desktop — force the brand background */
.sk-sidebar { background: linear-gradient(180deg, #171A3A 0%, #12163A 60%, #0F1B3D 100%) !important; color: #fff; border-right: 0; }
.sk-admin .sk-sidebar { background: linear-gradient(180deg, #101230 0%, #0B1030 100%) !important; }
.sk-sidebar .offcanvas-body { background: transparent; }
.sk-navlink { display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem; transition: background .15s, color .15s; }
.sk-navlink.active { background: linear-gradient(90deg, rgba(31,163,154,.28), rgba(142,123,224,.22)); box-shadow: inset 3px 0 0 var(--sk-teal); }
.sk-sidebar .btn-primary { background: var(--sk-grad); border: 0; }
.sk-sidebar input.form-control { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #fff; }
.sk-sidebar input.form-control::placeholder { color: rgba(255,255,255,.55); }

/* hero */
.sk-hero { background: radial-gradient(900px 420px at 85% -10%, rgba(62,124,196,.55), transparent 60%), radial-gradient(700px 380px at 5% 110%, rgba(31,163,154,.35), transparent 60%), #171A3A; }
.sk-hero h1 { letter-spacing: -.02em; }
.sk-eyebrow { color: #7FE0D6; }
.btn-primary { border-radius: 12px; font-weight: 600; box-shadow: 0 6px 16px rgba(81,68,192,.28); }
.btn-primary:hover { transform: translateY(-1px); }
.btn { transition: transform .15s, box-shadow .15s, background .15s; }
.sk-card { transition: transform .18s, box-shadow .18s; }
.sk-public .col-md-6 > .sk-card:hover, .sk-public .col-lg-4 > .sk-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(23,26,58,.12); }

/* chat */
.sk-chat-head { backdrop-filter: blur(6px); }
.sk-messages { background: radial-gradient(800px 400px at 100% 0, rgba(142,123,224,.08), transparent 60%), radial-gradient(700px 400px at 0 100%, rgba(31,163,154,.07), transparent 60%), var(--sk-bg); padding: 1.25rem 1rem; }
.sk-row { display: flex; gap: .55rem; align-items: flex-end; max-width: 100%; }
.sk-row.sk-row-user { justify-content: flex-end; }
.sk-avatar { width: 30px; height: 30px; border-radius: 50%; background: #fff; object-fit: cover; box-shadow: 0 1px 4px rgba(23,26,58,.18); flex: 0 0 30px; }
.sk-bubble { box-shadow: 0 1px 2px rgba(23,26,58,.06); font-size: .98rem; }
.sk-bubble-user { background: linear-gradient(135deg, #5B4CD0, #6F5FE0); }
.sk-bubble-ai { border-color: #E6E3F5; }
.sk-bubble time { font-size: .66rem; }
@media (min-width: 992px) { .sk-messages { padding: 1.5rem max(2rem, calc((100% - 820px) / 2)); } .sk-composer { padding-left: max(1rem, calc((100% - 860px) / 2)); padding-right: max(1rem, calc((100% - 860px) / 2)); } }
.sk-composer { background: rgba(255,255,255,.96); }
.sk-composer textarea { background: #F6F4FC; border-color: #E4E1F2; padding: .65rem 1rem; }
.sk-composer textarea:focus { background: #fff; box-shadow: 0 0 0 .2rem rgba(101,88,211,.18); border-color: #8E7BE0; }
.sk-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.1rem; }
.sk-chip { border: 1px solid #DAD5F3; background: #fff; color: #3F33A5; border-radius: 999px; padding: .4rem .9rem; font-size: .88rem; cursor: pointer; transition: background .15s, transform .15s; }
.sk-chip:hover { background: #F1EEFF; transform: translateY(-1px); }
.sk-empty .sk-mark-lg { margin-bottom: .75rem; }

/* auth card */
.sk-auth-logo { display: block; margin: 0 auto 1rem; height: 56px; width: auto; }
#authCard { box-shadow: 0 20px 50px rgba(23,26,58,.12); border-radius: 22px; padding: 2rem; }
#authCard h1 { text-align: center; }
#authCard > p { text-align: center; }

/* admin cards */
.sk-stat { transition: box-shadow .15s; } .sk-stat:hover { box-shadow: var(--sk-shadow); }
.sk-stat .v { background: var(--sk-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }