/* ============================================================
   LiKO GNF — Mobile Web App  (Vietnam × Korea matching)
   Design tokens (OKLCH) + components
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Pretendard:wght@400;500;600;700;800&display=swap');

:root {
  --gnf-blue-50:  oklch(0.97 0.02 245);
  --gnf-blue-100: oklch(0.93 0.04 245);
  --gnf-blue-200: oklch(0.85 0.08 245);
  --gnf-blue-300: oklch(0.74 0.13 245);
  --gnf-blue-500: oklch(0.55 0.18 245);
  --gnf-blue-600: oklch(0.48 0.18 248);
  --gnf-blue-700: oklch(0.40 0.16 252);
  --gnf-blue-900: oklch(0.22 0.10 255);

  --gnf-coral:    oklch(0.68 0.18 30);
  --gnf-coral-bg: oklch(0.95 0.04 30);
  --gnf-green:    oklch(0.62 0.14 155);
  --gnf-green-bg: oklch(0.95 0.04 155);
  --gnf-amber:    oklch(0.78 0.14 75);
  --gnf-amber-bg: oklch(0.96 0.04 75);
  --gnf-red:      oklch(0.60 0.20 25);

  --ink-900: oklch(0.18 0.01 250);
  --ink-700: oklch(0.34 0.01 250);
  --ink-500: oklch(0.52 0.01 250);
  --ink-400: oklch(0.62 0.01 250);
  --ink-300: oklch(0.78 0.01 250);
  --ink-200: oklch(0.90 0.005 250);
  --ink-100: oklch(0.96 0.005 250);
  --ink-50:  oklch(0.985 0.003 250);
  --bg: #ffffff;
  --bg-soft: oklch(0.98 0.005 250);

  --font-vi: 'Be Vietnam Pro', 'Pretendard', system-ui, sans-serif;
  --font-ko: 'Pretendard', 'Be Vietnam Pro', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  --shadow-sm: 0 1px 2px rgba(20,20,30,0.06);
  --shadow-md: 0 4px 12px rgba(20,20,30,0.08);
  --shadow-lg: 0 12px 32px rgba(20,20,30,0.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overscroll-behavior-y: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-vi);
  color: var(--ink-900);
  background: var(--bg-soft);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  letter-spacing: -0.005em;
}
body[data-lang="ko"] { font-family: var(--font-ko); }
body[data-lang="ko"] * { font-family: var(--font-ko); }

input, button, textarea, select { font: inherit; color: inherit; }
button { border: none; background: none; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* App shell — mobile-first phone canvas, maxes at 480 on big screens.
   height: 100dvh (not min-height) so the body never scrolls — the
   tabbar always stays pinned at the bottom of the viewport, and only
   .lk-scroll handles content overflow. */
.lk-app {
  margin: 0 auto;
  max-width: 480px;
  height: 100dvh;
  background: var(--bg);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--ink-100);
}
@media (min-width: 600px) {
  body { padding: 24px 0; }
  .lk-app { border-radius: 24px; height: calc(100dvh - 48px); }
}
html, body { height: 100%; overflow: hidden; }
@media (min-width: 600px) {
  html, body { height: auto; overflow: auto; }
  body { min-height: 100dvh; background: oklch(0.96 0.01 245); }
}

.lk-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.lk-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.lk-scroll::-webkit-scrollbar { width: 6px; }
.lk-scroll::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 3px; }

/* Header */
.lk-header {
  padding: calc(14px + var(--safe-top)) 16px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  flex-shrink: 0;
  border-bottom: 1px solid var(--ink-100);
  position: sticky; top: 0; z-index: 10;
}
.lk-header h1 { font-size: 18px; font-weight: 700; margin: 0; flex: 1; letter-spacing: -0.02em; }
.lk-header .back-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--ink-700); border-radius: 50%; }
.lk-header .back-btn:active { background: var(--ink-100); }

/* Tab bar — pinned to bottom of phone canvas. Because .lk-app has fixed
   height and .lk-scroll handles inner scroll, the tabbar stays put. */
.lk-tabbar {
  display: flex;
  background: white;
  border-top: 1px solid var(--ink-100);
  padding: 6px 4px calc(6px + var(--safe-bottom));
  flex-shrink: 0;
  z-index: 100;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
}
.lk-tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0;
  color: var(--ink-400);
  font-size: 10.5px;
  font-weight: 600;
  transition: color .15s;
}
.lk-tabbar-item .ic {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}
.lk-tabbar-item .ic svg {
  width: 24px; height: 24px;
  display: block;
  transition: stroke-width .15s, transform .15s;
}
.lk-tabbar-item.active .ic svg {
  stroke-width: 2.2;
  transform: scale(1.05);
}
.lk-tabbar-item.active .ic svg circle:not([cx="9"]),
.lk-tabbar-item.active .ic svg path:not([d*="14 10"]):not([d*="14 13"]):not([d*="6.5 16"]) {
  /* mild fill highlight on active for filled-style aesthetic */
}
.lk-tabbar-item.active { color: var(--gnf-blue-600); }
.lk-tabbar-item:not(.active) .ic svg { opacity: 0.85; }
.lk-tabbar-item .lbl { font-size: 10.5px; line-height: 1; }
.lk-tabbar-item .badge {
  position: absolute; top: 4px; right: calc(50% - 22px);
  background: var(--gnf-coral); color: white;
  font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 10px;
  min-width: 16px; text-align: center;
}
.lk-tabbar-item { position: relative; }

/* Buttons */
.lk-btn {
  font-weight: 600;
  font-size: 15px;
  padding: 13px 18px;
  border-radius: var(--r-md);
  background: var(--gnf-blue-500);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: -0.01em;
  transition: filter .15s, transform .05s;
}
.lk-btn:hover { filter: brightness(0.96); }
.lk-btn:active { transform: scale(0.98); }
.lk-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.lk-btn.secondary { background: var(--gnf-blue-50); color: var(--gnf-blue-700); }
.lk-btn.outline { background: white; color: var(--ink-900); border: 1px solid var(--ink-200); }
.lk-btn.ghost { background: transparent; color: var(--ink-700); }
.lk-btn.danger { background: var(--gnf-red); color: white; }
.lk-btn.full { width: 100%; }
.lk-btn.sm { padding: 8px 12px; font-size: 13px; }

/* Inputs */
.lk-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.lk-field > label { font-size: 12.5px; font-weight: 600; color: var(--ink-700); }
.lk-input, .lk-select, .lk-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  background: white;
  font-size: 15px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.lk-input:focus, .lk-select:focus, .lk-textarea:focus {
  border-color: var(--gnf-blue-500);
  box-shadow: 0 0 0 3px var(--gnf-blue-50);
}
.lk-textarea { resize: vertical; min-height: 90px; }
.lk-helper { font-size: 11.5px; color: var(--ink-500); }
.lk-error { font-size: 12px; color: var(--gnf-red); }

/* Search */
.lk-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ink-100);
  border-radius: 12px;
  padding: 10px 12px;
  flex: 1;
}
.lk-search input { border: none; background: none; outline: none; flex: 1; font-size: 14px; }
.lk-search input::placeholder { color: var(--ink-400); }

/* Chips */
.lk-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--ink-100);
  color: var(--ink-700);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.lk-chip.blue   { background: var(--gnf-blue-50);   color: var(--gnf-blue-700); }
.lk-chip.coral  { background: var(--gnf-coral-bg);  color: var(--gnf-coral); }
.lk-chip.green  { background: var(--gnf-green-bg);  color: var(--gnf-green); }
.lk-chip.amber  { background: var(--gnf-amber-bg);  color: oklch(0.55 0.14 75); }
.lk-chip.solid  { background: var(--gnf-blue-500);  color: white; }
.lk-chip.outline{ background: white; color: var(--ink-700); border: 1px solid var(--ink-200); }
.lk-chip.danger { background: oklch(0.96 0.04 25);  color: var(--gnf-red); }

/* Cards */
.lk-card {
  background: white;
  border-radius: var(--r-lg);
  border: 1px solid var(--ink-100);
  padding: 14px;
  margin: 0 0 12px;
  transition: transform .1s;
}
.lk-card.tappable:active { transform: scale(0.99); background: var(--ink-50); }
.lk-card .title { font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--ink-900); margin-bottom: 6px; }
.lk-card .meta  { font-size: 12px; color: var(--ink-500); }
.lk-card .row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

/* Sections */
.lk-section { padding: 14px 16px; }
.lk-section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 4px 0; }
.lk-section-title h3 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.lk-section-title .more { font-size: 12px; color: var(--gnf-blue-600); font-weight: 600; }

/* Hero */
.lk-hero {
  background: linear-gradient(135deg, var(--gnf-blue-600) 0%, var(--gnf-blue-500) 60%, oklch(0.62 0.16 230) 100%);
  color: white;
  padding: 18px 16px 22px;
  border-radius: 0 0 24px 24px;
  margin-bottom: -16px;
}
.lk-hero .greet { font-size: 12px; opacity: 0.85; margin-bottom: 4px; }
.lk-hero .name { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.lk-hero-card {
  background: rgba(255,255,255,0.16);
  border-radius: var(--r-lg);
  padding: 14px;
  backdrop-filter: blur(12px);
}

/* Visa Tracker */
.lk-pill-progress { display: flex; gap: 4px; margin: 10px 0; }
.lk-pill-progress > span {
  flex: 1; height: 6px; border-radius: 3px; background: var(--ink-200);
}
.lk-pill-progress > span.done { background: var(--gnf-blue-500); }
.lk-pill-progress > span.cur  { background: var(--gnf-blue-300); }

/* Stat tile */
.lk-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lk-stat {
  background: white;
  border-radius: var(--r-lg);
  padding: 12px;
  border: 1px solid var(--ink-100);
}
.lk-stat .num { font-size: 22px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.02em; }
.lk-stat .lbl { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }

/* Empty state */
.lk-empty {
  padding: 48px 24px; text-align: center; color: var(--ink-500);
}
.lk-empty .em { font-size: 36px; margin-bottom: 12px; opacity: 0.6; }
.lk-empty .ti { font-weight: 600; margin-bottom: 6px; color: var(--ink-700); }

/* Sticky bottom CTA */
.lk-sticky-cta {
  padding: 12px 16px calc(12px + var(--safe-bottom));
  background: white;
  border-top: 1px solid var(--ink-100);
  flex-shrink: 0;
}

/* Status badges */
.lk-status { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
.lk-status.draft   { background: var(--ink-100); color: var(--ink-700); }
.lk-status.pending { background: var(--gnf-amber-bg); color: oklch(0.5 0.14 75); }
.lk-status.review  { background: var(--gnf-blue-50); color: var(--gnf-blue-700); }
.lk-status.approved{ background: var(--gnf-green-bg); color: var(--gnf-green); }
.lk-status.accepted{ background: var(--gnf-blue-500); color: white; }
.lk-status.rejected{ background: oklch(0.96 0.04 25); color: var(--gnf-red); }
.lk-status.paid    { background: var(--gnf-green-bg); color: var(--gnf-green); }

/* Tabs (segmented) */
.lk-tabs { display: flex; padding: 4px; background: var(--ink-100); border-radius: 12px; margin: 12px 16px 0; }
.lk-tabs button {
  flex: 1; padding: 8px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--ink-500);
}
.lk-tabs button.active { background: white; color: var(--ink-900); box-shadow: var(--shadow-sm); }

/* Modal / Sheet */
.lk-modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-end; justify-content: center;
  animation: lk-fade .2s;
}
.lk-sheet {
  width: 100%; max-width: 480px;
  background: white;
  border-radius: 22px 22px 0 0;
  padding: 18px 16px calc(20px + var(--safe-bottom));
  box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
  animation: lk-slide-up .25s;
}
.lk-sheet .grip { width: 40px; height: 4px; background: var(--ink-200); border-radius: 2px; margin: -8px auto 14px; }
@keyframes lk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lk-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Toast */
.lk-toast-host {
  position: fixed; left: 0; right: 0; bottom: calc(80px + var(--safe-bottom));
  z-index: 200;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.lk-toast {
  background: var(--ink-900); color: white;
  padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: lk-toast-in .2s;
  max-width: 90%;
}
.lk-toast.success { background: var(--gnf-green); }
.lk-toast.error   { background: var(--gnf-red); }
@keyframes lk-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Skeleton */
.lk-skel {
  background: linear-gradient(90deg, var(--ink-100) 0%, var(--ink-50) 50%, var(--ink-100) 100%);
  background-size: 200% 100%;
  animation: lk-shim 1.6s infinite linear;
  border-radius: 8px;
}
@keyframes lk-shim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Avatars / logos */
.lk-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gnf-blue-300), var(--gnf-blue-600));
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.lk-logo {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--ink-100);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: var(--ink-700);
  flex-shrink: 0;
  border: 1px solid var(--ink-100);
}

/* Stepper */
.lk-stepper { display: flex; gap: 6px; align-items: center; margin: 12px 0 18px; }
.lk-stepper .step {
  flex: 1; height: 4px; border-radius: 2px; background: var(--ink-200);
}
.lk-stepper .step.active { background: var(--gnf-blue-500); }
.lk-stepper .step.done   { background: var(--gnf-blue-300); }
.lk-stepper-labels { display: flex; gap: 6px; font-size: 11px; color: var(--ink-500); margin-bottom: 6px; }
.lk-stepper-labels span { flex: 1; text-align: center; }
.lk-stepper-labels span.active { color: var(--gnf-blue-700); font-weight: 600; }

/* List item */
.lk-list-item {
  display: flex; gap: 12px; padding: 12px 16px;
  background: white; border-bottom: 1px solid var(--ink-100);
  transition: background .1s;
}
.lk-list-item:active { background: var(--ink-50); }
.lk-list-item .body { flex: 1; min-width: 0; }
.lk-list-item .body .ti { font-weight: 600; font-size: 14px; color: var(--ink-900); margin-bottom: 4px; }
.lk-list-item .body .sub { font-size: 12px; color: var(--ink-500); }

/* Notification item */
.lk-notif {
  display: flex; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--ink-100);
  background: white;
}
.lk-notif.unread { background: var(--gnf-blue-50); }
.lk-notif .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gnf-blue-500); margin-top: 6px; flex-shrink: 0; visibility: hidden; }
.lk-notif.unread .dot { visibility: visible; }
.lk-notif .ti { font-weight: 600; font-size: 13.5px; }
.lk-notif .ms { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.lk-notif .tm { font-size: 11px; color: var(--ink-400); margin-top: 4px; }

/* Util */
.lk-row { display: flex; align-items: center; gap: 8px; }
.lk-col { display: flex; flex-direction: column; }
.lk-mute { color: var(--ink-500); }
.lk-strong { color: var(--ink-900); font-weight: 600; }
.lk-grow { flex: 1; }
.lk-px { padding-left: 16px; padding-right: 16px; }
.lk-py { padding-top: 14px; padding-bottom: 14px; }
.lk-mt-sm { margin-top: 8px; } .lk-mt { margin-top: 14px; } .lk-mt-lg { margin-top: 20px; }
.lk-mb { margin-bottom: 14px; }
.lk-tc { text-align: center; }
.lk-divider { height: 1px; background: var(--ink-100); margin: 14px 0; }
.lk-fs-12 { font-size: 12px; } .lk-fs-13 { font-size: 13px; } .lk-fs-15 { font-size: 15px; } .lk-fs-18 { font-size: 18px; }
.lk-fw-700 { font-weight: 700; }

/* Filter pills */
.lk-filter-row { display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto; scrollbar-width: none; }
.lk-filter-row::-webkit-scrollbar { display: none; }
.lk-filter-row button {
  flex-shrink: 0;
  padding: 6px 12px; border-radius: 999px; background: var(--ink-100); color: var(--ink-700);
  font-size: 12.5px; font-weight: 600;
}
.lk-filter-row button.active { background: var(--gnf-blue-500); color: white; }

/* Money / numbers */
.lk-money { font-feature-settings: "tnum"; font-weight: 700; }

/* Loader */
.lk-loader { width: 24px; height: 24px; border: 2.5px solid var(--ink-200); border-top-color: var(--gnf-blue-500); border-radius: 50%; animation: lk-spin .8s linear infinite; }
@keyframes lk-spin { to { transform: rotate(360deg); } }
.lk-loader-center { display: flex; justify-content: center; padding: 40px 0; }

/* Document upload */
.lk-doc-card {
  border: 1.5px dashed var(--ink-200); border-radius: var(--r-md);
  padding: 16px; text-align: center; color: var(--ink-500);
  background: var(--ink-50);
  transition: border-color .15s, background .15s;
}
.lk-doc-card.uploaded { border-style: solid; border-color: var(--gnf-green); background: var(--gnf-green-bg); color: var(--gnf-green); }

/* Bank info */
.lk-bank-box {
  background: var(--gnf-blue-50);
  border-radius: var(--r-lg);
  padding: 14px;
  margin: 12px 0;
  font-family: var(--font-mono);
  font-size: 13px;
}
.lk-bank-box .row { display: flex; justify-content: space-between; padding: 4px 0; }

/* Cover images — universities, jobs, posts */
.lk-cover {
  width: 100%; height: 160px;
  background: var(--ink-100);
  background-size: cover; background-position: center;
  border-radius: var(--r-lg);
  margin-bottom: 10px;
}
.lk-cover.lg { height: 200px; border-radius: var(--r-lg); }
.lk-cover.thumb { height: 80px; width: 120px; flex-shrink: 0; border-radius: var(--r-md); }

.lk-card .lk-cover { margin-bottom: 10px; }

/* Avatar from URL */
.lk-avatar.url { background-image: var(--avatar-url); background-size: cover; background-position: center; color: transparent; }

/* Logo with cover */
.lk-logo.url { background-image: var(--logo-url); background-size: cover; background-position: center; color: transparent; }

/* Result page status banner */
.lk-result-banner {
  text-align: center; padding: 40px 20px; border-radius: var(--r-2xl); margin: 16px;
}
.lk-result-banner.success { background: var(--gnf-green-bg); color: var(--gnf-green); }
.lk-result-banner.failed  { background: oklch(0.96 0.04 25); color: var(--gnf-red); }
.lk-result-banner.pending { background: var(--gnf-amber-bg); color: oklch(0.5 0.14 75); }
.lk-result-banner .em { font-size: 64px; line-height: 1; margin-bottom: 10px; }
.lk-result-banner .ti { font-size: 20px; font-weight: 700; }
.lk-result-banner .ms { font-size: 13px; margin-top: 8px; opacity: 0.8; }

/* Pay method buttons */
.lk-pay-method {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border: 1.5px solid var(--ink-200); border-radius: var(--r-lg);
  background: white; cursor: pointer; width: 100%;
  transition: border-color .15s, background .15s;
}
.lk-pay-method:hover { border-color: var(--gnf-blue-500); background: var(--gnf-blue-50); }
.lk-pay-method .ic { width: 44px; height: 44px; border-radius: 8px; background: var(--ink-100); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.lk-pay-method .ic.card { background: linear-gradient(135deg, var(--gnf-blue-300), var(--gnf-blue-600)); color: white; }
.lk-pay-method .ic.bank { background: linear-gradient(135deg, var(--gnf-green-bg), var(--gnf-green)); color: white; }
.lk-pay-method .body { flex: 1; min-width: 0; }
.lk-pay-method .body .ti { font-weight: 600; font-size: 14px; }
.lk-pay-method .body .ms { font-size: 12px; color: var(--ink-500); margin-top: 2px; }

/* Bookmark heart */
.lk-bookmark { font-size: 22px; color: var(--ink-300); cursor: pointer; transition: color .1s, transform .1s; }
.lk-bookmark:active { transform: scale(0.9); }
.lk-bookmark.active { color: var(--gnf-coral); }

/* Inquiry threads */
.lk-msg { padding: 10px 14px; border-radius: 16px; max-width: 80%; margin: 4px 0; }
.lk-msg.user  { background: var(--gnf-blue-500); color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
.lk-msg.admin { background: var(--ink-100); color: var(--ink-900); align-self: flex-start; border-bottom-left-radius: 4px; }
.lk-thread { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; }

/* Admin specific */
.lk-admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lk-admin-table th, .lk-admin-table td { padding: 10px 8px; border-bottom: 1px solid var(--ink-100); text-align: left; vertical-align: top; }
.lk-admin-table th { font-size: 11.5px; color: var(--ink-500); font-weight: 600; }

/* Hide scrollbars cleanly on mobile */
@media (hover: none) {
  .lk-scroll::-webkit-scrollbar { display: none; }
}