/* ==========================================================================
   CHAT ASSISTANT – CORE STYLES
   - Tokens, themes, layout, menus
   - Messages, chips, composer, typing indicator
   ========================================================================== */

/* ===== TOKENS (Light) ===== */
:root{
  --first-color: #16a34a;
  --first-color-alt: #15803d;

  --bg: #0b1220; 
  --bg-soft: #0f172a;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink-1: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --ring: rgba(0,0,0,.08);

  --radius: 14px;
  --shadow-1: 0 8px 24px rgba(0,0,0,.12);
  --shadow-2: 0 18px 50px rgba(0,0,0,.18);

  --bar-h: 64px;
}

/* ===== THEMES ===== */
html[data-theme="light"]{
  color-scheme: light;
  --app-bg: #f4f6fb;
  --paper: #ffffff;
  --text: #0f172a;
  --text-soft:#334155;
  --divider:#e7e9f1;
}
html[data-theme="dark"], html.is-dark-auto{
  color-scheme: dark;
  --app-bg: color-mix(in oklab, var(--bg-soft) 86%, #000);
  --paper: #121826;
  --surface-2: #0f172a;
  --text: #e6ebf5;
  --text-soft: #b9c0cf;
  --divider: color-mix(in oklab, #fff 8%, transparent);
  --ring: rgba(255,255,255,.08);
}

/* ===== GLOBAL ===== */
*{ box-sizing: border-box; }
body{
  margin:0;
  font: 400 16px/1.6 "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--app-bg);
  color: var(--text);
  min-height: 100svh;
}

/* ===== HEADER / CHATBAR ===== */
.chatbar{
  position: sticky; top: 0; z-index: 10;
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(14px, 3.2vw, 28px);
  background:
    radial-gradient(90% 120% at 0% 0%, color-mix(in oklab, var(--first-color) 16%, transparent) 0%, transparent 60%),
    radial-gradient(90% 120% at 100% 0%, color-mix(in oklab, var(--first-color) 10%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in oklab, var(--surface-2) 80%, #000 20%), var(--surface-2));
  border-bottom: 1px solid var(--divider);
  backdrop-filter: blur(10px) saturate(120%);
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  color: var(--text); font-weight:800; text-decoration:none;
  letter-spacing:.2px;
}
.brand i{ font-size: 1.25rem; color: var(--first-color); }
.chatbar__actions{ display:flex; gap:.4rem; align-items:center; }

/* ===== ICON BUTTON ===== */
.icon-btn{
  display:inline-grid; place-items:center; gap:.4rem;
  min-width:42px; height:42px; padding:0 .6rem;
  color: var(--text); text-decoration:none; font-weight:700;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  border:1px solid var(--divider); border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease;
}
.icon-btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-1); }
.icon-btn i{ font-size: 1.25rem; }
.hide-sm{ margin-left:.25rem; font-weight:700; }

/* ===== MENU POPOVER ===== */
.menu{ position: relative; }
.menu__popover{
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px;
  background: var(--paper); color: var(--text); border: 1px solid var(--divider);
  border-radius: 16px; padding: 10px; box-shadow: var(--shadow-2);
  opacity:0; transform: scale(.98) translateY(-6px); pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.menu__popover.is-open{ opacity:1; transform: scale(1) translateY(0); pointer-events:auto; }
.menu__item{
  width:100%; display:flex; align-items:center; gap:.6rem;
  padding:.6rem .7rem; border-radius:10px; background: transparent;
  color: inherit; border:0; cursor:pointer; font-weight:700;
}
.menu__item:hover{ background: color-mix(in oklab, var(--first-color) 10%, transparent); }
.menu__item[aria-checked="true"]{ outline:2px solid color-mix(in oklab, var(--first-color) 50%, transparent); }

/* Swatches */
.menu__swatches{ min-width: 260px; }
.swatch{
  --c:#16a34a;
  width:44px; height:44px; border-radius:999px; border:2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  background: radial-gradient(circle at 30% 30%, #fff5 0 20%, transparent 22%), var(--c);
  display:inline-block; cursor:pointer; margin:8px;
  position:relative;
}
.swatch[aria-checked="true"]::after{
  content:""; position:absolute; inset:-4px; border-radius:inherit;
  border:3px solid color-mix(in oklab, gold 60%, #fff 40%);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--c) 30%, transparent);
}

/* Backdrop shared */
.menu__backdrop{
  position: fixed; inset:0; background: transparent; display:none;
}
.menu__backdrop.is-open{ display:block; }

/* ===== CHAT LAYOUT ===== */
.chat{ padding: clamp(8px, 2.5vw, 22px); }
.chat__wrap{
  max-width: 980px; margin: 0 auto;
  background: var(--paper); border: 1px solid var(--divider);
  border-radius: 18px; box-shadow: var(--shadow-2);
  display: grid; grid-template-rows: minmax(360px, 62vh) auto auto auto;
  overflow: clip;
}
.chat__scroll{
  padding: 22px clamp(16px,4vw,28px);
  overflow: auto; scroll-behavior: smooth;
  background:
    radial-gradient(700px 300px at 0% 0%, color-mix(in oklab, var(--first-color) 8%, transparent), transparent 60%),
    radial-gradient(700px 300px at 100% 0%, color-mix(in oklab, var(--first-color) 6%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in oklab, var(--paper) 92%, #000 8%), var(--paper));
}

/* ===== MESSAGES ===== */
.msg{ display:flex; align-items:flex-end; gap:.6rem; margin: 10px 0; }
.msg__avatar{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; flex:0 0 auto;
  background: color-mix(in oklab, var(--first-color) 15%, var(--surface-2));
  color: #fff; box-shadow: var(--shadow-1);
}
.msg__avatar i{ font-size: 1.05rem; }
.msg .bubble{
  max-width: 64ch;
  background: var(--surface-2); border: 1px solid var(--divider);
  color: var(--text); padding: 10px 12px; border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  word-wrap: break-word; white-space: pre-wrap;
}
.msg .time{ font-size:.75rem; color: var(--muted); margin-top: .25rem; }
.msg--me{ justify-content:flex-end; }
.msg--me .bubble{ background: color-mix(in oklab, var(--first-color) 12%, var(--surface-2)); }
.msg--me .msg__avatar{ background: linear-gradient(180deg, #111827, #0b1220); }

/* Image/file bubble (simple preview) */
.bubble--file{ display:flex; align-items:center; gap:.6rem; }
.bubble--file img{ max-width:160px; max-height:120px; border-radius:10px; border:1px solid var(--divider); }

/* ===== TYPING ===== */
.typing{ display:flex; align-items:center; gap:.6rem; margin: 10px 0; }
.typing__dots{ height:36px; display:flex; align-items:center; gap:6px; padding: 0 12px;
  border-radius: 999px; border:1px solid var(--divider); background: var(--surface-2); }
.typing__dots span{
  display:block; width:6px; height:6px; border-radius:50%; background: var(--muted);
  animation: blink 1.2s infinite ease-in-out;
}
.typing__dots span:nth-child(2){ animation-delay:.12s; }
.typing__dots span:nth-child(3){ animation-delay:.24s; }
@keyframes blink{ 0%, 80%, 100%{transform:translateY(0);opacity:.3} 40%{transform:translateY(-4px);opacity:1} }

/* ===== CHIPS ===== */
.chips{
  display:flex; flex-wrap:wrap; gap:.5rem; padding: 10px clamp(14px,4vw,20px);
  background: linear-gradient(180deg, var(--paper), var(--paper));
  border-top: 1px solid var(--divider);
}
.chip{
  padding:.45rem .8rem; border-radius:999px; font-weight:700; cursor:pointer;
  background: color-mix(in oklab, var(--first-color) 10%, transparent);
  border: 1px solid var(--divider); color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-2px); box-shadow: var(--shadow-1); }

/* ===== COMPOSER ===== */
.composer{
  display:grid; grid-template-columns: auto 1fr auto; align-items:end; gap:.5rem;
  padding: 12px clamp(14px,4vw,20px);
  border-top: 1px solid var(--divider);
  background:
    radial-gradient(80% 140% at 100% 0%, color-mix(in oklab, var(--first-color) 8%, transparent), transparent 70%),
    var(--paper);
}
.composer__btn{
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  color: var(--text); background: color-mix(in oklab, var(--paper) 86%, transparent);
  border:1px solid var(--divider); border-radius: 12px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.composer__btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-1); }
.composer__btn i{ font-size: 1.25rem; }
.composer__btn.send{ background: linear-gradient(180deg, #111827, #0b1220); color:#fff; border-color: #0b1220; }

.composer__input{
  max-height: 160px; min-height:44px; resize: none; width:100%;
  border-radius: 12px; padding: .8rem .9rem;
  background: var(--surface-2); border: 1px solid var(--divider); color: var(--text);
  font: inherit; outline: none;
}
.composer__input::placeholder{ color: var(--muted); }

/* SR only */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Hint */
.hint{ text-align:center; color: var(--muted); margin: 8px 0 18px; font-size:.92rem; }

/* ======================= CHATBAR ICONS — Polos & Sama Ukuran ======================= */
/* Sembunyikan label "Tema" & "Warna" biar icon doang */
.chatbar .hide-sm{ display:none !important; }

/* Icon button jadi polos: tanpa background, tanpa border, tanpa bayangan */
.chatbar .icon-btn{
  --size: 36px;                     /* atur sekali untuk semua */
  min-width: var(--size);
  width: var(--size);
  height: var(--size);
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  color: var(--text);
  display: inline-grid;
  place-items: center;
  transition: color .15s ease, transform .15s ease;
  cursor: pointer;
}

/* Ukuran icon seragam */
.chatbar .icon-btn i{
  font-size: 20px;
  line-height: 1;
}

/* Hover/focus: cukup ganti warna, tetap polos */
.chatbar .icon-btn:hover{ color: var(--first-color); transform: translateY(-1px); }
.chatbar .icon-btn:active{ transform: translateY(0); }
.chatbar .icon-btn:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--first-color) 70%, transparent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Jarak antar icon agak rapat */
.chatbar__actions{ gap: .35rem; }