/* ============================================================================
   Notulen AI — identitas Indosat Ooredoo Hutchison
   Palet mengikuti brand sheet IOH: merah #ED1C24, teal #00B7BD, magenta
   #EC008C, kuning #FFC20E di atas permukaan putih, dengan teks abu tua
   #404140. Keempatnya adalah warna lingkaran pada logo IOH, dan dipakai di
   sini dengan pembagian peran yang sama: merah untuk aksen utama dan
   peringatan keras, teal untuk ajakan bertindak, magenta untuk sorotan dan
   gradien AI, kuning untuk peringatan lunak.
   Tata letak layar tetap mengikuti docs/Notulen AI Mockups.dc.html.
   ========================================================================== */

/* Indosat Regular adalah tipografi merek. Fallback-nya dituliskan lengkap:
   berkas font bisa gagal dimuat, dan halaman yang jatuh ke serif bawaan
   peramban terlihat rusak, bukan sekadar berbeda. */
@font-face {
  font-family: 'Indosat';
  src: url('/fonts/Indosat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- permukaan --- */
  --paper:        #F5F5F7;
  --surface:      rgba(255, 255, 255, .88);
  --card:         #FFFFFF;
  --sand:         #F8F8FA;
  --sand-2:       #EFEFF2;
  --sidebar:      rgba(250, 250, 252, .86);

  /* --- teks --- */
  --ink:          #1D1D1F;
  --ink-2:        #2C2C2E;
  --ink-3:        #48484A;
  --ink-4:        #636366;
  --muted:        #6E6E73;
  --faint:        #8E8E93;
  --fainter:      #C7C7CC;

  /* --- garis --- */
  --line:         rgba(0, 0, 0, .075);
  --line-soft:    rgba(0, 0, 0, .045);
  --line-mid:     rgba(0, 0, 0, .085);
  --line-strong:  rgba(0, 0, 0, .13);
  --rule:         rgba(0, 0, 0, .16);

  /* --- merek: empat warna lingkaran logo IOH --- */
  --ioh-red:      #ED1C24;
  --ioh-teal:     #00B7BD;
  --ioh-magenta:  #EC008C;
  --ioh-yellow:   #FFC20E;
  --ioh-gray:     #404140;

  --brand-blue:   #00B7BD;   /* peran "biru" lama diambil alih teal */
  --brand-indigo: #EC008C;
  --brand-violet: #ED1C24;
  /* Gradien AI mengambil tiga lingkaran logo dengan urutan yang sama seperti
     pada mark-nya: magenta -> merah -> kuning. */
  --grad:         linear-gradient(135deg, #EC008C 0%, #ED1C24 55%, #FFC20E 100%);
  --grad-deep:    linear-gradient(150deg, #B0006A 0%, #B5141A 45%, #00868A 100%);

  /* Teal untuk ajakan bertindak: merah IOH dipakai untuk aksen dan peringatan,
     dan memakainya juga untuk tombol utama membuat "simpan" dan "hapus"
     terlihat sama. */
  --accent:       #00B7BD;
  --accent-dark:  #009AA0;
  --accent-tint:  #E6F8F9;
  --accent-wash:  #F2FCFC;
  --accent-fg:    #FFFFFF;

  /* --- semantik --- */
  --danger:       #ED1C24;
  --danger-tint:  #FDECEC;
  --danger-line:  #F8B8BB;
  --danger-chip:  #FBD5D7;
  --warn:         #B8860B;   /* kuning IOH terlalu terang untuk teks di atas putih */
  --warn-ink:     #8A6508;
  --warn-tint:    #FFF4D6;
  --warn-wash:    #FFFBEF;
  --ok:           #00868A;
  --ok-tint:      #E6F8F9;
  --blue:         #00B7BD;
  --brown:        #EC008C;

  /* --- tipografi --- */
  --display: 'Indosat', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  --sans:    'Indosat', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  /* Semua teks UI memakai typeface IOH. Monospace disisakan khusus isi kode. */
  --mono:    'Indosat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --code:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- bentuk --- */
  --r-sm: 9px;
  --r:    14px;
  --r-lg: 20px;
  --shadow:    0 22px 60px rgba(0, 0, 0, .12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .035), 0 8px 28px rgba(0, 0, 0, .045);

  /* --- gerak --- */
  --ease:     cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 120ms;
  --t:      180ms;
  --t-slow: 300ms;
  --lift:    0 2px 8px rgba(15, 23, 42, .08);
  --lift-hi: 0 8px 20px rgba(0, 183, 189, .22);

  /* --- tata letak --- */
  --sidebar-w: 248px;
  --topbar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }

/* iOS memberi kotak abu-abu saat disentuh; kita punya state :active sendiri. */
button, a, input, select, textarea, .filepick, label.chk {
  -webkit-tap-highlight-color: transparent;
}

/* Cincin fokus hanya muncul untuk navigasi papan ketik, bukan setiap klik. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 5px;
}
:focus:not(:focus-visible) { outline: none; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.01em;
  overscroll-behavior-y: none;
}

.hidden { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }

code, pre { font-family: var(--code); }
code {
  font-size: 0.9em;
  background: var(--sand-2);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--ink-4);
}

.muted { color: var(--muted); }
.small { font-size: 13px; }
.err   { color: var(--danger); font-size: 13px; margin: 6px 0 0; }

/* Label mono huruf-kapital — dipakai di seluruh mockup sebagai penanda bagian. */
.eyebrow, .section-head .count, .quick .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ========================================================================== */
/* Shell aplikasi — sidebar tetap, topbar, dan area isi                       */
/* ========================================================================== */

/* Dua bentuk, satu markup. Sampai 899px tata letaknya satu kolom dengan bilah
   navigasi di bawah — bentuk yang dipakai di iPhone, dan itu bukan kasus
   pinggiran di sini melainkan cara aplikasi ini paling sering dibuka. Dari
   900px ke atas #app menjadi grid dua kolom dan sidebar-nya muncul. */

#app { min-height: 100vh; }

.sidebar { display: none; }

.shell { display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  height: calc(var(--topbar-h) + var(--safe-t));
  padding: var(--safe-t) 14px 0;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid var(--line-mid);
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg,
    var(--ioh-magenta) 0 25%, var(--ioh-red) 25% 50%,
    var(--ioh-yellow) 50% 75%, var(--ioh-teal) 75% 100%);
}

/* Monogram dipakai sebagai berkas SVG tunggal; ukurannya saja yang berbeda. */
.mark { flex: none; display: block; width: 26px; height: 26px; }
.mark-lg { width: 72px; height: 72px; object-fit: contain; }
.mark-brand { width: 56px; height: 56px; object-fit: contain; }

/* Sprite ikon tidak ikut tata letak. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Semua simbol digambar sebagai garis, mewarisi warna induknya. */
.ico, .q-ico, .src-ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 18px;
  height: 18px;
  flex: none;
}

.q-ico { width: 22px; height: 22px; color: var(--brand-indigo); }
.src-ico { width: 18px; height: 18px; }

.icon-btn {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 17px;
  color: var(--ink-4);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.icon-btn .ico { width: 19px; height: 19px; }
.icon-btn:hover { background: var(--sand-2); color: var(--ink); }
.icon-btn:active { background: var(--line-mid); transform: scale(.94); }

/* --- pencarian global di topbar ---
   Pencariannya satu, dan tempatnya di kepala halaman: mencari rapat dari
   halaman action item dulu berarti kembali dulu ke daftar rapat. */
.searchbar {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 620px;
  margin: 0;
}

.searchbar .search-ico {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}

.searchbar input {
  width: 100%;
  height: 42px;
  padding: 0 36px 0 40px;
  font-size: 14px;
  background: rgba(118, 118, 128, .08);
  border: 1px solid transparent;
  border-radius: 999px;
}
.searchbar input::placeholder { color: var(--faint); }
.searchbar input:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
  outline: none;
}
.searchbar input::-webkit-search-cancel-button { display: none; }

.q-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.q-clear .ico { width: 14px; height: 14px; }
.q-clear:hover { background: var(--sand-2); color: var(--ink); }

/* --- lonceng pemberitahuan --- */
.bell { position: relative; }
.bell-dot {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 8px;
  height: 8px;
  background: var(--danger);
  border: 2px solid var(--surface);
  border-radius: 50%;
}

/* --- identitas pemakai --- */
.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px 4px 4px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: inherit;
  font-family: var(--sans);
  transition: background var(--t-fast) var(--ease);
}
.user-chip:hover { background: var(--sand-2); }
.user-chip .chev { width: 15px; height: 15px; color: var(--faint); }

.avatar-round {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--grad);
  border-radius: 50%;
}

/* Nama dan email hanya muat di layar lebar; di ponsel tinggal monogramnya. */
.user-meta { display: none; }

/* --- area isi --- */
.content { flex: 1; min-width: 0; }

.view {
  padding: 24px 18px calc(94px + var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 900px;
  margin: 0 auto;
}

/* Kepala halaman: judul, satu kalimat penjelas, dan tindakan utamanya. */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.page-head h2 { font-size: clamp(25px, 5vw, 34px); letter-spacing: -.035em; }
.page-head h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--grad);
}
.page-head p { margin: 4px 0 0; font-size: 14px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.page-actions .primary,
.page-actions .ghost-btn,
.head-actions .primary,
.head-actions .ghost-btn,
.mom-strip-actions .primary,
.mom-strip-actions .ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  padding: 9px 15px;
  font-size: 14px;
  border-radius: 9px;
}

.ghost-btn {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ghost-btn:hover { background: var(--sand); border-color: var(--rule); }
.ghost-btn:active { transform: translateY(1px); }

/* --- navigasi bawah (ponsel) --- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 6px 8px calc(6px + var(--safe-b));
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border-top: 1px solid var(--line-mid);
}

.tabbar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tabbar button .ico { width: 21px; height: 21px; transition: transform var(--t) var(--ease-out); }
.tabbar button.active {
  color: var(--accent-dark);
  background: var(--accent-tint);
}
.tabbar button.active .ico { transform: scale(1.08); }
.tabbar button:active .ico { transform: scale(.9); }

/* Kartu & formulir                                                           */
/* ========================================================================== */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}

.card > h2 { font-size: 19px; }
.card > h3 { font-size: 16px; }
.card > p.muted { margin: -4px 0 0; font-size: 13px; line-height: 1.6; }

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

input, textarea, select {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--faint); }

input[type="checkbox"], input[type="radio"] {
  width: auto;
  accent-color: var(--accent);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-4) 50%),
                    linear-gradient(135deg, var(--ink-4) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

textarea { resize: vertical; line-height: 1.55; }

/* --- tombol --- */
button {
  font-family: var(--sans);
  font-size: 15px;
}

.btn, .primary, .ghost, .danger {
  padding: 11px 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  border-radius: 11px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
  user-select: none;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

/* Tekanan terasa di semua varian: turun 1px, bayangan hilang. */
.btn:active:not(:disabled),
.primary:active:not(:disabled),
.ghost:active:not(:disabled),
.danger:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}

.primary {
  background: var(--ioh-teal);
  color: #FFFFFF;
  border-color: transparent;
}
.primary:hover:not(:disabled) { filter: brightness(1.06); box-shadow: var(--lift-hi); }

.ghost { background: var(--card); color: var(--ink-3); border-color: var(--line-strong); }
.ghost:hover:not(:disabled) { background: var(--sand); border-color: var(--rule); }

.btn { background: var(--card); color: var(--ink-3); border-color: var(--line-strong); }
.btn:hover:not(:disabled) { background: var(--sand); border-color: var(--rule); }

.danger { background: var(--danger); color: var(--accent-fg); border-color: var(--danger); }
.danger:hover:not(:disabled) { filter: brightness(.92); box-shadow: var(--lift); }

button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

/* Tombol yang sedang menunggu jaringan: teks meredup dan berdenyut pelan. */
button[disabled].working { animation: pulse 1.2s ease-in-out infinite; }

.big { padding: 15px; font-size: 16px; border-radius: var(--r-lg); }

/* --- tiga aksi cepat (mockup 01: Record / Upload / Send bot) --- */
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.quick button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 13px 14px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink-3);
  font-size: 13px;
  cursor: pointer;
}
.quick button {
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.quick button:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
  transform: translateY(-1px);
  box-shadow: var(--lift);
}
.quick button:active { transform: translateY(0); box-shadow: none; }

.quick .ico {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}


/* Di bawah 560px, deskripsi tiga aksi cepat membuat kolomnya terlalu sempit;
   sisakan labelnya saja supaya tetap terbaca. */
@media (max-width: 559px) {
  .quick button { align-items: center; text-align: center; gap: 0; padding: 12px 6px; }
  .quick button > span:not(.ico) { display: none; }
  .quick .ico { font-size: 10px; line-height: 1.35; }
}

/* --- kepala bagian --- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: -6px;
}
.section-head h2 { font-size: clamp(18px, 4.5vw, 21px); }

/* ========================================================================== */
/* Daftar rapat — kartu di mobile, baris tabel di desktop (mockup 01)          */
/* ========================================================================== */

#meetings { display: flex; flex-direction: column; gap: 8px; }

.meeting {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
}
.meeting {
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.meeting:hover { border-color: var(--rule); background: var(--sand); }
.meeting:active { transform: scale(.995); }

/* Kartu terangkat hanya di tata letak kartu; di tabel desktop baris tidak bergeser. */
@media (max-width: 899px) {
  .meeting:hover { transform: translateY(-1px); box-shadow: var(--lift); }
  .meeting:active { transform: translateY(0); box-shadow: none; }
}

.meeting .avatar {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent-tint);
  color: var(--brand-indigo);
}

.meeting .grow { flex: 1; min-width: 0; }

.meeting .title {
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.meeting .sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}

/* Kolom asal rekaman — hanya pada layar yang cukup lebar (mockup 01). */
.src-col { display: none; }

/* Sampai 430px (mencakup iPhone 390–428), lencana yang berdampingan menyisakan
   judul terlalu sempit; turunkan ke barisnya sendiri, sejajar dengan teks. */
@media (max-width: 430px) {
  .meeting { flex-wrap: wrap; row-gap: 8px; }
  /* .grow menyusut tanpa batas, jadi pembungkusan harus dipaksa: elemen semu
     setinggi nol memenuhi baris dan mendorong lencana ke baris berikutnya. */
  .meeting::after { content: ''; flex-basis: 100%; height: 0; order: 1; }
  .meeting .badge { order: 2; margin-left: 46px; }
}

/* --- lencana status --- */
.badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--sand-2);
  color: var(--ink-4);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.badge.done   { background: var(--ok-tint); color: var(--ok); }
.badge.failed { background: var(--danger-chip); color: var(--danger); }
.badge.busy   { background: var(--warn-tint); color: var(--warn-ink); }

.spin {
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  background: var(--card);
  border: 1px dashed var(--rule);
  border-radius: var(--r);
}
.empty .big-ico {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--fainter);
}

/* ========================================================================== */
/* Perekam (mockup 08)                                                        */
/* ========================================================================== */

.recorder { align-items: center; text-align: center; gap: 10px; padding: 26px 18px; }

.timer {
  font-family: var(--display);
  font-size: clamp(40px, 13vw, 52px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.recorder.recording .timer { color: var(--ink); }

.recorder.recording #rec-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--danger);
  font-size: 13px;
}
.recorder.recording #rec-state::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  animation: pulse 1.4s ease-in-out infinite;
}

.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* Waveform digambar dari mikrofon sungguhan; tingginya tetap agar tata letak
   tidak melompat saat perekaman mulai. */
.wave {
  width: 100%;
  height: 96px;
  display: block;
}

/* Kisi tiga kolom supaya tombol besar tetap di tengah, baik saat sendirian
   (siap merekam) maupun berdampingan dengan tombol jeda. */
.transport {
  display: grid;
  grid-template-columns: 56px 84px 56px;
  justify-content: center;
  align-items: center;
  gap: 26px;
  margin-top: 4px;
}
#rec-pause { grid-column: 1; }
#rec-toggle, #rec-stop { grid-column: 2; }

.round {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-3);
  font-size: 15px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.round:hover:not(:disabled) { background: var(--sand); border-color: var(--rule); }
.round:active:not(:disabled) { transform: scale(.93); }

.big-round { width: 84px; height: 84px; border: 0; }

/* Tombol mulai: lingkaran gradien merek dengan titik; henti: merah berkotak. */
#rec-toggle.big-round { background: var(--grad); }
#rec-toggle.big-round:hover { filter: brightness(1.06); box-shadow: var(--lift-hi); }
.rec-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-fg); }

.big-round.stop { background: var(--danger); }
.big-round.stop:hover { filter: brightness(.92); box-shadow: var(--lift-hi); }
.rec-square { width: 28px; height: 28px; border-radius: 5px; background: var(--accent-fg); }

/* Denyut halus di sekeliling tombol henti selagi merekam. */
.recorder.recording .big-round.stop {
  box-shadow: 0 0 0 0 rgba(166, 61, 47, .38);
  animation: ring 1.8s ease-out infinite;
}
@keyframes ring {
  70%  { box-shadow: 0 0 0 16px rgba(166, 61, 47, 0); }
  100% { box-shadow: 0 0 0 0 rgba(166, 61, 47, 0); }
}

.hint {
  margin: 4px 0 0;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  background: var(--sand);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-4);
  text-align: left;
}

/* ========================================================================== */
/* Upload (mockup 09)                                                         */
/* ========================================================================== */

.filepick {
  position: relative;
  display: grid;
  place-items: center;
  padding: 26px 16px;
  border: 1px dashed var(--rule);
  border-radius: var(--r-lg);
  background: var(--sand);
  color: var(--ink-3);
  font-size: 14px;
  cursor: pointer;
}
.filepick {
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.filepick { flex-direction: column; gap: 5px; text-align: center; }
.filepick-note { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.filepick:hover { border-color: var(--accent); background: var(--accent-wash); }
.filepick:active { background: var(--accent-tint); }
.filepick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.progress {
  height: 4px;
  border-radius: 2px;
  background: var(--line-mid);
  overflow: hidden;
}
.progress > div {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 2px;
  transition: width var(--t-slow) var(--ease-out);
}

/* ========================================================================== */
/* Detail rapat                                                               */
/* ========================================================================== */

.hero { gap: 10px; }
.hero h2 { font-size: 22px; margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--sand);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
}

/* --- tab Notulen / Tugas / Transkrip (mockup 02 header) --- */
.segmented { display: flex; gap: 6px; }

.segmented button {
  flex: 1;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ink-3);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.segmented button:hover:not(.active) { background: var(--sand); border-color: var(--rule); }
.segmented button:active { transform: translateY(1px); }
.segmented button.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
  font-weight: 500;
}

/* ========================================================================== */
/* Notulen / MOM — tata letak dokumen (mockup 03)                             */
/* ========================================================================== */

.mom {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 22px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 780px;
}

.mom h1 {
  font-size: clamp(22px, 5vw, 26px);
  line-height: 1.25;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.mom h3 {
  font-size: 19px;
  margin: 0 0 2px;
}
.mom > h3:first-of-type { margin-top: 0; }

.mom h4 { font-family: var(--sans); font-size: 15px; font-weight: 600; margin: 0 0 5px; }

.mom p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }

.mom ul, .mom ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.mom li { font-size: 14px; line-height: 1.7; color: var(--ink-3); }
.mom li strong { color: var(--ink); font-weight: 600; }

.mom .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  font-size: 13px;
  color: var(--muted);
}

.mom .sub { font-size: 13px; color: var(--muted); }

/* Tabel action item di dalam MOM */
.mom .table-wrap {
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: auto;
}

.mom table { width: 100%; border-collapse: collapse; font-size: 14px; }

.mom th, .mom td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-2);
}

.mom th {
  border-top: 0;
  background: var(--sand);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.mom tr:last-child td { border-bottom: 0; }

/* ========================================================================== */
/* Transkrip berlabel pembicara (mockup 02)                                   */
/* ========================================================================== */

.transcript { padding: 6px 10px; gap: 0; }

.seg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 4px;
}
.seg + .seg { border-top: 1px solid var(--line-soft); }

.seg-who { display: flex; align-items: baseline; gap: 9px; }

.seg .spk {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.seg .ts {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}

.seg .grow {
  border-left: 2px solid var(--rule);
  padding-left: 14px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Warna per pembicara — indeks disetel app.js lewat data-spk. */
.seg[data-spk="0"] .grow { border-left-color: #4F46E5; }
.seg[data-spk="1"] .grow { border-left-color: #3B82F6; }
.seg[data-spk="2"] .grow { border-left-color: #7C3AED; }
.seg[data-spk="3"] .grow { border-left-color: #0891B2; }
.seg[data-spk="4"] .grow { border-left-color: #D97706; }

/* --- baris aksi di bawah detail --- */
.actions-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, .76);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.actions-row button, .actions-row a {
  padding: 10px 14px;
  font-size: 14px;
  text-align: center;
  color: var(--ink-3);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
}
.actions-row button, .actions-row a {
  touch-action: manipulation;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.actions-row button:hover, .actions-row a:hover {
  background: var(--sand);
  text-decoration: none;
  border-color: var(--rule);
}
.actions-row button:active, .actions-row a:active { transform: translateY(1px); }
.actions-row .wide { grid-column: 1 / -1; }

/* Hapus rapat tidak boleh terlihat sama dengan Salin atau Unduh. */
.actions-row .destructive { color: var(--danger); border-color: var(--danger-line); }
.actions-row .destructive:hover { background: var(--danger-tint); border-color: var(--danger); }

/* ========================================================================== */
/* Action items (mockup 04)                                                   */
/* ========================================================================== */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.stat {
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: left;
}

.stat .n {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}

.stat .l {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.stat.overdue .n { color: var(--danger); }
.stat.done .n { color: var(--accent-dark); }

.filters { display: flex; gap: 8px; }
.filters select { flex: 1; font-size: 13px; padding: 8px 12px; }

.ai-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }

.ai-group > h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.ai-group.overdue > h3 { color: var(--danger); }

.ai-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.ai-item.is-overdue { background: var(--danger-tint); border-color: var(--danger-line); }
.ai-item.is-done    { background: var(--sand); }
.ai-item.is-done .ai-task { color: var(--ink-4); text-decoration: line-through; }

.check {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: transparent;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 50%;
  cursor: pointer;
}
.check {
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.check:hover:not(:disabled) { border-color: var(--accent); transform: scale(1.1); }
.check:active:not(:disabled) { transform: scale(.9); }
.check.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  animation: pop var(--t) var(--ease-out);
}

.ai-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.ai-task { font-size: 14px; line-height: 1.5; color: var(--ink); }

.ai-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }

.tag { color: var(--muted); }

.tag.who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}
.tag.who .ini {
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 500;
}
.ai-item.is-overdue .tag.who .ini { background: var(--danger-chip); color: var(--danger); }
.ai-item.is-done .tag.who .ini { background: var(--sand-2); color: var(--ink-4); }

.tag.late { color: var(--danger); font-weight: 500; }
.tag.hi   { color: var(--warn-ink); }

.tag.src {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  cursor: pointer;
  flex-basis: 100%;
}
.tag.src:hover { color: var(--accent); }

/* ========================================================================== */
/* Lembar gambar / overlay                                                    */
/* ========================================================================== */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(22, 24, 26, .55);
  animation: fadeIn var(--t) var(--ease-out);
}

.sheet {
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  animation: sheetIn var(--t-slow) var(--ease-out);
}

.recap-scroll { overflow: auto; border-radius: var(--r); background: var(--sand); }
.recap-img { display: block; width: 100%; height: auto; }

.sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet-actions a, .sheet-actions button {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 10px 14px;
  font-size: 14px;
  text-align: center;
  color: var(--ink-3);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  cursor: pointer;
}
.sheet-actions .primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.sheet-note { margin: 0; font-size: 12px; color: var(--muted); }

.email-sheet { max-width: 540px; padding: 22px; gap: 16px; }
.email-sheet h3 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.email-form { display: flex; flex-direction: column; gap: 14px; }
.email-form label { margin: 0; }
.email-form input, .email-form textarea { margin: 6px 0 0; width: 100%; }
.email-preview-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  color: var(--ink-3);
  background: color-mix(in srgb, var(--ioh-teal) 7%, white);
  border: 1px solid color-mix(in srgb, var(--ioh-teal) 22%, white);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.email-preview-note .ico { margin-top: 1px; color: var(--ioh-teal); }

/* Tanpa permukaan sendiri, spinner dan teksnya melayang di atas halaman yang
   diredupkan dan nyaris tak terbaca. */
.wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  padding: 30px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  animation: sheetIn var(--t-slow) var(--ease-out);
}
.wait p { margin: 0; }
.wait-title { font-family: var(--display); font-size: 18px; color: var(--ink); }
.wait-sub { font-size: 13px; color: var(--muted); }

.spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--rule);
  border-right-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(94px + var(--safe-b));
  z-index: 95;
  transform: translateX(-50%);
  animation: toastIn var(--t-slow) var(--ease-out);
  max-width: calc(100% - 32px);
  padding: 11px 16px;
  background: var(--ink);
  color: var(--surface);
  font-size: 14px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

/* ========================================================================== */
/* Login (mockup 07)                                                          */
/* ========================================================================== */

#login {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 64px 22px calc(36px + var(--safe-b));
  background: var(--surface);
}

.auth {
  width: 100%;
  max-width: 402px;
  gap: 14px;
  border: 0;
  background: transparent;
  padding: 0;
}

.auth .mark-lg { margin-bottom: 4px; }

.auth h1 { font-size: clamp(26px, 7.5vw, 32px); line-height: 1.2; margin-top: 12px; }
.auth > p.muted { margin: -6px 0 8px; font-size: 15px; line-height: 1.6; }
.auth .primary { padding: 15px; font-size: 16px; border-radius: var(--r-lg); }
.sso-login { display: grid; gap: 10px; text-align: center; color: var(--muted); }
.sso-login .ghost-btn, .sso-login .primary {
  display: flex;
  justify-content: center;
  padding: 13px;
  text-decoration: none;
  border-radius: 12px;
}
.provider-fallback {
  display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0;
  padding: 10px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--ioh-yellow) 16%, white);
  color: var(--warn); font-size: 13px; line-height: 1.45;
}
.provider-fallback .ico { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; }

/* Kotak "pasang ke Home Screen" + catatan privasi (mockup 07). */
.install-note {
  margin-top: auto;
  padding: 15px 16px;
  border: 1px dashed var(--rule);
  border-radius: var(--r-lg);
  background: var(--sand);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-4);
}
.install-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }

.privacy-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--faint);
  text-align: center;
}

.doc-link { margin: 4px 0 0; font-size: 13px; text-align: center; }
.doc-link a { color: var(--accent); }
.doc-link a:hover { color: var(--accent-dark); }

/* ========================================================================== */
/* Pengaturan: kunci API, keadaan sistem, jejak (mockup 05)                    */
/* ========================================================================== */

.scopes {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sand);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.scopes legend {
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.chk { flex-direction: row; align-items: flex-start; gap: 9px; cursor: pointer; }
.chk input[type="checkbox"] { margin-top: 3px; flex: none; }
.chk span { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.chk b { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink); }
.chk .cost { color: var(--warn-ink); }

.keyval {
  margin: 0;
  padding: 12px 14px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 7px;
  font-size: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

#key-list { display: flex; flex-direction: column; gap: 8px; }

.key-card { gap: 8px; padding: 13px 15px; }
.key-card .key-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.key-card .key-head code { background: none; padding: 0; color: var(--faint); font-size: 11px; }
.key-card .small { font-size: 12px; color: var(--muted); }
.key-card.revoked { background: var(--sand); opacity: .62; }

.card.status { gap: 0; padding: 0; overflow: hidden; }

.status-banner {
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid var(--line-soft);
}
.status-banner.ok   { background: var(--accent-tint); color: var(--accent-dark); }
.status-banner.warn { background: var(--warn-tint);   color: var(--warn-ink); }
.status-banner.bad  { background: var(--danger-tint); color: var(--danger); }

.status-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.status-row:last-child { border-bottom: 0; }

.status-label { color: var(--muted); }
.status-value { font-family: var(--mono); font-size: 12px; color: var(--ink); text-align: right; }
.status-value.bad { color: var(--danger); }

.status-head {
  padding: 10px 16px;
  background: var(--sand);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.status-fail { padding: 10px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.status-fail:last-child { border-bottom: 0; }
.status-err { font-family: var(--mono); font-size: 11px; color: var(--danger); word-break: break-word; }
.status-empty {
  margin: 0;
  padding: 12px 16px 14px;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--sand);
}

.audit-row { padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.audit-row:last-child { border-bottom: 0; }
.audit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.audit-actor { font-size: 13px; font-weight: 500; color: var(--ink); }
.audit-when { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; }
.audit-what { margin-top: 2px; font-size: 13px; color: var(--ink-3); }

/* Tablet dan ponsel mendatar: ruang cukup lebar, tapi belum cukup untuk sidebar.
   Kolom dibatasi supaya baris rapat tidak melar dari tepi ke tepi. */
@media (min-width: 600px) and (max-width: 899px) {
  .view { max-width: 720px; padding-left: 22px; padding-right: 22px; }
  .tabbar { max-width: 720px; margin-inline: auto; }
}

/* ========================================================================== */
/* Desktop — shell sidebar                                                    */
/* ========================================================================== */

@media (min-width: 900px) {
  body { background: var(--paper); }

  /* Sidebar sebagai kolom grid, bukan elemen melayang: isinya lalu tidak
     pernah tertimpa dan tidak perlu padding-kiri yang ditebak. */
  #app {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    align-items: start;
  }

  .sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 22px 14px 16px;
    background: var(--sidebar);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    backdrop-filter: saturate(180%) blur(28px);
    border-right: 1px solid var(--line-mid);
  }

  .sidebar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg,
      var(--ioh-magenta), var(--ioh-red) 38%, var(--ioh-yellow) 68%, var(--ioh-teal));
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px 18px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 12px;
  }
  .brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
  .brand-text strong {
    font-family: 'Indosat', var(--display);
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
  }
  /* "AI" mengambil gradien merek — satu-satunya tempat gradien dipakai pada teks. */
  .brand-text strong em {
    font-style: normal;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .brand-text small { font-size: 10.5px; color: var(--faint); letter-spacing: .01em; }

  /* Daftar menu boleh menggulir sendiri; kotak paket di bawahnya tidak ikut
     terdorong keluar layar pada laptop pendek. */
  .side-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    overflow-y: auto;
    margin: 0 -4px;
    padding: 0 4px;
  }

  .side-nav button {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 12px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    color: var(--ink-4);
    background: none;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .side-nav button .ico {
    width: 19px;
    height: 19px;
    color: var(--faint);
    transition: color var(--t-fast) var(--ease);
  }
  .side-nav button span:not(.nav-count) { flex: 1; min-width: 0; }
  .side-nav button:hover { background: var(--sand-2); color: var(--ink); }
  .side-nav button:hover .ico { color: var(--ink-4); }
  .side-nav button.active {
    background: var(--accent-tint);
    color: var(--accent-dark);
    font-weight: 600;
  }
  .side-nav button.active .ico { color: var(--accent); }

  .nav-count {
    flex: none;
    min-width: 20px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: var(--muted);
    background: var(--sand-2);
    border-radius: 999px;
  }
  .side-nav button.active .nav-count { color: var(--accent-dark); background: #fff; }

  /* Kotak paket. Angkanya menit yang benar-benar terpakai bulan ini. */
  .plan-card {
    margin-top: 14px;
    padding: 13px 14px 14px;
    background: var(--accent-wash);
    border: 1px solid var(--accent-tint);
    border-radius: 12px;
  }
  .plan-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-dark);
  }
  .plan-head .ico { width: 16px; height: 16px; }
  .plan-usage { margin-top: 5px; font-size: 12px; color: var(--ink-4); }
  .plan-bar {
    height: 6px;
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--accent-tint);
    border-radius: 999px;
    overflow: hidden;
  }
  .plan-bar > div {
    height: 100%;
    width: 0;
    background: var(--grad);
    border-radius: 999px;
    transition: width var(--t-slow) var(--ease-out);
  }
  .plan-btn {
    width: 100%;
    margin-top: 11px;
    padding: 8px 10px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-dark);
    background: #fff;
    border: 1px solid var(--accent-tint);
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
  }
  .plan-btn:hover { background: var(--accent-tint); }

  .topbar {
    height: 72px;
    padding: 0 32px;
    gap: 12px;
  }
  .topbar .searchbar { margin-inline: auto; }
  .user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
  }
  .user-meta strong { font-size: 13px; font-weight: 600; color: var(--ink); }
  .user-meta small { font-size: 11.5px; color: var(--muted); }

  .tabbar { display: none; }

  .view {
    max-width: 1280px;
    margin: 0 auto;
    padding: 34px 34px 72px;
  }

  /* Daftar rapat jadi tabel bergaris. */
  #meetings {
    gap: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
  }

  .meeting {
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    padding: 13px 18px;
  }
  .meeting:last-child { border-bottom: 0; }
  .meeting:hover { background: var(--sand); }

  /* Papan action item berkolom — satu grup tidak pernah terbelah. */
  #tasks { columns: 2; column-gap: 16px; }
  .ai-group { break-inside: avoid; margin-bottom: 16px; }

  .filters { max-width: 460px; }

  .transcript { padding: 22px 24px; }

  .mom { padding: 30px 34px 38px; }
  .mom h1 { font-size: 28px; }

  .toast { bottom: 30px; left: calc(50% + var(--sidebar-w) / 2); }

  .actions-row button, .actions-row a { flex: 0 1 auto; }
}

/* ========================================================================== */
/* Gerak                                                                      */
/* ========================================================================== */

@keyframes pop     { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes viewIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rowIn   { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* Pindah view terasa sebagai gerakan, bukan kedipan. */
.view:not(.hidden) { animation: viewIn var(--t-slow) var(--ease-out); }

/* Daftar masuk bertahap — dibatasi enam baris pertama supaya daftar panjang
   tidak menunda apa pun yang di bawah. */
#meetings > .meeting,
#tasks > .ai-group { animation: rowIn var(--t-slow) var(--ease-out) backwards; }
#meetings > .meeting:nth-child(1), #tasks > .ai-group:nth-child(1) { animation-delay: 0ms; }
#meetings > .meeting:nth-child(2), #tasks > .ai-group:nth-child(2) { animation-delay: 30ms; }
#meetings > .meeting:nth-child(3), #tasks > .ai-group:nth-child(3) { animation-delay: 60ms; }
#meetings > .meeting:nth-child(4), #tasks > .ai-group:nth-child(4) { animation-delay: 90ms; }
#meetings > .meeting:nth-child(5), #tasks > .ai-group:nth-child(5) { animation-delay: 120ms; }
#meetings > .meeting:nth-child(n+6), #tasks > .ai-group:nth-child(n+6) { animation-delay: 150ms; }

/* Lencana berganti status tanpa melompat. */
.badge { transition: background var(--t) var(--ease), color var(--t) var(--ease); }

/* Hormati setelan sistem: hilangkan gerak, sisakan umpan balik warna. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active, .primary:active, .ghost:active, .danger:active,
  .quick button:hover, .meeting:hover, .check:hover, .icon-btn:active,
  .segmented button:active, .actions-row button:active, .actions-row a:active {
    transform: none !important;
  }
}

/* ========================================================================== */
/* Layar lebar                                                                */
/* ========================================================================== */

@media (min-width: 1180px) {
  .view { max-width: 1180px; }

  /* Baris rapat jadi tabel sungguhan: judul melar, asal dan status tetap.
     Kolom pertama tetap ada untuk petak kartu recap — menyembunyikannya akan
     membuat baris yang punya kartu dan yang tidak berbeda lebarnya. */
  .meeting {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 150px 120px;
    align-items: center;
  }
  .src-col { display: block; font-size: 13px; color: var(--ink-3); }
  /* Item grid melar secara bawaan; lencana harus tetap selebar isinya. */
  .meeting .badge { justify-self: start; }

  /* Ruang cukup untuk tiga kolom papan action item (mockup 04). */
  #tasks { columns: 3; }
}

@media (min-width: 1500px) {
  .view { max-width: 1280px; }
}

/* Ponsel dalam posisi mendatar: perekam tidak boleh memakan seluruh tinggi. */
@media (max-height: 520px) and (orientation: landscape) {
  .recorder { padding: 16px; gap: 8px; }
  .timer { font-size: 34px; }
  .recorder .hint { display: none; }
  #login { padding-top: 28px; }
  .auth h1 { font-size: 24px; margin-top: 6px; }
  .install-note { display: none; }
}

/* --- Menu tindakan -------------------------------------------------------
   Delapan tombol sejajar membuat orang berhenti membacanya: dua pasang di
   antaranya hanya berbeda pada biaya ("Recap satu gambar" vs "Recap gaya AI",
   "Buat ulang MOM" vs "Proses ulang"), dan bedanya tidak terbaca dari
   namanya. Pasangan itu kini menjadi satu tombol berisi pilihan, dengan
   biayanya disebut di tempat pilihan itu diambil. */

.menu-wrap { position: relative; display: grid; }

.actions-row .menu-btn::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 7px;
  vertical-align: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
}
.actions-row .menu-btn[aria-expanded="true"] {
  background: var(--sand);
  border-color: var(--rule);
}

.menu-pop {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  min-width: max(100%, 248px);
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
/* Dekat tepi kanan layar, menu dibuka ke arah dalam. */
.menu-pop.align-end { left: auto; right: 0; }

.menu-pop button, .menu-pop a {
  display: block;
  width: 100%;
  padding: 9px 10px;
  text-align: left;
  font-size: 14px;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.menu-pop button:hover, .menu-pop a:hover {
  background: var(--accent-wash);
  text-decoration: none;
}
.menu-pop button:disabled { color: var(--faint); cursor: default; background: none; }

/* Baris kedua menjelaskan konsekuensinya — termasuk biaya — supaya pilihan
   diambil dengan tahu, bukan dengan menebak. */
.menu-pop .menu-note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}
.menu-pop button:disabled .menu-note { color: var(--fainter); }
.menu-pop .cost { color: var(--warn-ink); }
.menu-pop hr { margin: 5px 6px; border: 0; border-top: 1px solid var(--line-soft); }

/* --- Pemutar rekaman ------------------------------------------------------
   Menempel di atas saat transkrip digulir: melompat ke satu bagian lalu
   kehilangan kendali pemutarnya karena sudah tergulir jauh membuat fitur ini
   tidak ada gunanya. */

.player {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--lift);
}
.player audio { display: block; width: 100%; }
.player-hint { margin: 7px 2px 0; font-size: 12px; color: var(--muted); }

/* Waktu menjadi tombol hanya ketika ada audio untuk dilompati. */
.seg .ts-jump {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 5px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}
.seg .ts-jump::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-left: 5px solid currentColor;
}
.seg .ts-jump:hover { background: var(--accent-tint); border-color: var(--accent-tint); }
.seg .ts-jump:active { transform: translateY(1px); }

.seg-active {
  background: var(--accent-wash);
  border-radius: 8px;
}
.seg-active .grow { color: var(--ink); }

/* --- Halaman "Tentang" ---------------------------------------------------- */

.about-lede { margin: 8px 0 0; color: var(--ink-3); line-height: 1.6; }
.about-h {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.about-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.55;
}
.about-row + .about-row { border-top: 1px solid var(--line-soft); }
.about-k { color: var(--ink); font-weight: 600; }
.about-v { color: var(--ink-4); overflow-wrap: anywhere; }

@media (max-width: 560px) {
  /* Dua kolom sempit memaksa nama model terpotong; di ponsel ditumpuk. */
  .about-row { grid-template-columns: 1fr; gap: 2px; }
}

/* --- Pencarian ------------------------------------------------------------ */

/* Aturan pencarian dalam-halaman yang lama sudah tidak ada: kotak pencarian
   pindah ke topbar dan bentuknya didefinisikan sekali di bagian Shell. */
#q-clear {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  font-size: 18px; line-height: 1;
  color: var(--muted);
  background: none; border: 0; border-radius: 6px;
  cursor: pointer;
}
#q-clear:hover { background: var(--sand-2); color: var(--ink); }

/* Cuplikan hasil: kata yang cocok ditandai ‹...› oleh SQLite, lalu diganti
   menjadi <mark> saat dirender — teks mentahnya tidak pernah dimasukkan
   sebagai HTML. */
.hit-snip {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-4);
}
.hit-snip mark {
  padding: 0 2px;
  color: var(--accent-dark);
  background: var(--accent-tint);
  border-radius: 3px;
}
.hit-where { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }

/* --- Pemilih mesin transkripsi -------------------------------------------- */

.stt-opt {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 4px;
  cursor: pointer;
}
.stt-opt + .stt-opt { border-top: 1px solid var(--line-soft); }
.stt-opt input { margin-top: 3px; accent-color: var(--accent); }

/* Penyedia yang belum siap tetap terlihat, tetapi jelas tidak bisa dipilih. */
.stt-opt.mati { cursor: default; }
.stt-opt.mati .stt-name { color: var(--faint); }
.stt-opt.mati .stt-sub { color: var(--warn-ink); }

.stt-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.stt-sub { margin-top: 2px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }

.stt-tag {
  margin-left: 7px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-4);
  background: var(--sand-2);
  border-radius: 999px;
}
.stt-tag.diar { color: var(--accent-dark); background: var(--accent-tint); }

/* ========================================================================== */
/* Gaya recap AI: daftar di Pengaturan, pemilih saat membuat kartu            */
/* ========================================================================== */

/* Barisnya memakai kerangka .stt-opt, hanya tombolnya yang menumpuk sendiri
   di layar sempit — tiga tombol berdampingan memaksa nama gayanya terpotong. */
.style-actions { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.style-actions .btn { padding: 7px 11px; font-size: 13px; }

@media (max-width: 520px) {
  #style-panel .stt-opt { flex-direction: column; align-items: stretch; gap: 8px; }
  .style-actions .btn { flex: 1 1 auto; }
}

.style-field { margin-top: 12px; }
.style-hint { font-size: 12px; color: var(--faint); line-height: 1.5; }

.style-more { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.style-more summary { font-size: 14px; color: var(--ink-3); cursor: pointer; }
.style-more[open] summary { margin-bottom: 6px; }

/* Penyunting gaya berisi belasan kotak teks; tanpa lebar tambahan dan area
   gulir sendiri, tombol Simpan terdorong ke luar layar. */
.sheet-wide { max-width: 620px; }
.sheet-form { overflow: auto; min-height: 0; display: flex; flex-direction: column; }

.pick-list { overflow: auto; min-height: 0; display: flex; flex-direction: column; }
.pick-opt {
  display: flex;
  gap: 11px;
  padding: 11px 4px;
  text-align: left;
  background: none;
  border: none;
  border-radius: 7px;
  cursor: pointer;
}
.pick-opt + .pick-opt { border-top: 1px solid var(--line-soft); }
.pick-opt:hover { background: var(--sand); }

/* Alat prompt di penyunting gaya: empat tombol kecil, tidak boleh menyaingi
   tombol Simpan — makanya ukurannya sekunder dan warnanya netral. */
.style-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.style-tools .btn { padding: 7px 11px; font-size: 13px; }

/* Prompt lengkap ±3.000 karakter. Monospace karena yang dibaca di sini adalah
   struktur teksnya — baris, penanda bagian, daftar bernomor. */
.text-dump {
  flex: 1 1 auto;
  min-height: 240px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
  overflow: auto;
}

/* Pratinjau gaya di daftar Pengaturan. Kartunya potret 4:5, jadi lebarnya yang
   dikunci — tingginya mengikuti supaya proporsi kartu sungguhan terlihat. */
.style-thumb {
  flex: none;
  width: 56px;
  padding: 0;
  overflow: hidden;
  background: var(--sand);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  cursor: pointer;
}
.style-thumb img { display: block; width: 100%; height: auto; }
.style-thumb:hover { border-color: var(--accent); }

/* Placeholder ditulis apa adanya. Kotak abu-abu tanpa keterangan hanya membuat
   orang mengira gambarnya gagal dimuat. */
.style-thumb.kosong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  padding: 6px 4px;
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
  color: var(--faint);
  background: none;
  border-style: dashed;
  cursor: default;
}

/* ========================================================================== */
/* Dasbor                                                                     */
/* ========================================================================== */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.indosat-welcome {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 30px;
  border-radius: 0;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.indosat-welcome-copy { position: relative; z-index: 1; max-width: 620px; }
.brand-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.brand-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ioh-red); box-shadow: 9px 0 0 var(--ioh-magenta), 18px 0 0 var(--ioh-teal); margin-right: 18px; }
.indosat-welcome h1 { margin: 12px 0 8px; font-size: clamp(32px, 4vw, 46px); font-weight: 650; letter-spacing: -.055em; }
.indosat-welcome p { max-width: 470px; margin: 0; color: var(--muted); }
.indosat-welcome > img { flex: none; width: 62px; height: 62px; object-fit: contain; }
.ai-signature { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--ioh-gray); color: var(--surface); font-size: 12px; }
@media (max-width: 600px) {
  .indosat-welcome { align-items: flex-start; gap: 8px; padding: 22px 20px; border-radius: 20px; }
  .indosat-welcome > img { width: 40px; height: 40px; }
  .brand-kicker { font-size: 11px; }
  .indosat-welcome h1 { font-size: 27px; }
  .indosat-welcome p { font-size: 13px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stat-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, .07); }
.stat-tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--ioh-red);
}
.stat-tile:nth-child(2)::before { background: var(--ioh-teal); }
.stat-tile:nth-child(3)::before { background: var(--ioh-magenta); }
.stat-tile:nth-child(4)::before { background: var(--ioh-yellow); }
/* Restrained shell: brand colour belongs to the logo and useful controls. */
.topbar::before, .sidebar::before, .page-head h2::after, .stat-tile::before { display: none; }
.stat-tile:nth-child(2) .tile-ico { background: var(--accent-tint); color: var(--ioh-teal); }
.stat-tile:nth-child(3) .tile-ico { background: color-mix(in srgb, var(--ioh-magenta) 10%, white); color: var(--ioh-magenta); }
.stat-tile:nth-child(4) .tile-ico { background: var(--warn-tint); color: var(--warn); }
.stat-tile .tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.stat-tile .tile-ico {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-tint);
  color: var(--accent);
}
.stat-tile .tile-ico .ico { width: 17px; height: 17px; }
.stat-tile.warn .tile-ico { background: var(--warn-tint); color: var(--warn-ink); }
.stat-tile.ok   .tile-ico { background: var(--ok-tint); color: var(--ok); }
.stat-tile .n {
  font-family: var(--display);
  font-size: 31px;
  font-weight: 650;
  line-height: 1.1;
  color: var(--ink);
}
.stat-tile .l { font-size: 12.5px; color: var(--muted); }
.stat-tile .sub { font-size: 11.5px; color: var(--faint); }

.dash-grid { display: grid; gap: 16px; }

/* Kartu recap terbaru berdampingan dengan daftar; di ponsel bertumpuk. */
@media (min-width: 1100px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}

.panel {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.panel-head h3 { font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
.panel-head .link-btn {
  padding: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
}
.panel-head .link-btn:hover { text-decoration: underline; }
.panel-body { padding: 6px 0; }
.panel-body.pad { padding: 16px 18px; }

/* ========================================================================== */
/* Kartu recap AI                                                             */
/* ========================================================================== */

/* Gambar kartu adalah hasil yang dibayar per rapat; tempatnya paling atas,
   bukan tersembunyi di balik menu. Rasio 4:5 dikunci supaya kolomnya tidak
   melompat-lompat selagi gambar dimuat. */
.recap-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--sand-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
}
.recap-card img { display: block; width: 100%; height: auto; }
.recap-card .recap-tag {
  position: absolute;
  left: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(15, 23, 42, .62);
  backdrop-filter: blur(6px);
  border-radius: 999px;
}
.recap-card .recap-tag .ico { width: 13px; height: 13px; }

/* Keadaan sebelum ada gambar: kotak yang menjelaskan dirinya, bukan kotak kosong. */
.recap-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px;
  background: linear-gradient(150deg, var(--accent-wash), var(--surface));
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.recap-empty .ico { width: 20px; height: 20px; color: var(--accent); }
.recap-empty p { margin: 0; font-size: 13px; color: var(--muted); }

/* Petak gambar kecil di daftar dan dasbor. */
.recap-thumb {
  flex: none;
  width: 46px;
  height: 58px;
  object-fit: cover;
  background: var(--sand-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* ========================================================================== */
/* Halaman rapat — dua kolom                                                  */
/* ========================================================================== */

.detail-grid { display: grid; gap: 16px; align-items: start; }
.detail-left, .detail-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

@media (min-width: 1100px) {
  .detail-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
}

.detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.detail-head h2 { font-size: clamp(21px, 4.6vw, 28px); }
.detail-head .head-actions { display: flex; gap: 8px; align-items: center; }

.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-4);
}
.meta-row .meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.meta-row .meta .ico { width: 15px; height: 15px; color: var(--faint); }

/* Tab dengan ikon, gaya garis bawah seperti mockup. */
.segmented.tabs-underline {
  gap: 2px;
  border-bottom: 1px solid var(--line);
  padding: 0;
  overflow-x: auto;
}
.segmented.tabs-underline button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  white-space: nowrap;
}
.segmented.tabs-underline button .ico { width: 16px; height: 16px; }
.segmented.tabs-underline button:hover:not(.active) { color: var(--ink-3); background: none; }
.segmented.tabs-underline button.active {
  color: var(--accent);
  background: none;
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* Pemutar audio yang sebaris dengan kartu. */
.player-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.player-card audio { width: 100%; height: 36px; }

/* Baris pembicara. */
.spk-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line-soft);
}
.spk-row:last-child { border-bottom: 0; }
.spk-row .grow { min-width: 0; flex: 1; }
.spk-row .spk-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.spk-row .spk-sub { font-size: 12px; color: var(--muted); }
.spk-bar {
  height: 5px;
  margin-top: 5px;
  background: var(--sand-2);
  border-radius: 999px;
  overflow: hidden;
}
.spk-bar > div { height: 100%; background: var(--accent); border-radius: 999px; }

/* Monogram pembicara — warnanya mengikuti indeks yang sama dengan transkrip. */
.spk-avatar {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
}
.spk-avatar[data-spk="0"] { background: #4F46E5; }
.spk-avatar[data-spk="1"] { background: #0F9D8C; }
.spk-avatar[data-spk="2"] { background: #D97706; }
.spk-avatar[data-spk="3"] { background: #DB2777; }
.spk-avatar[data-spk="4"] { background: #2563EB; }

/* ========================================================================== */
/* Menu turun (lonceng & pemakai)                                             */
/* ========================================================================== */

.topbar .menu-wrap { position: relative; display: flex; }

.drop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  width: min(340px, calc(100vw - 28px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  animation: sheetIn var(--t) var(--ease-out);
}
.drop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.drop-head button {
  padding: 0;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
}
.drop button.drop-item, .drop a.drop-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  font-family: var(--sans);
  font-size: 13.5px;
  text-align: left;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
.drop .drop-item:hover { background: var(--sand-2); }
.drop .drop-item .ico { width: 17px; height: 17px; margin-top: 1px; color: var(--faint); }
.drop .drop-item .grow { min-width: 0; }
.drop .drop-item .when { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); }
.drop .drop-item.unread { background: var(--accent-wash); }
.drop .drop-item.unread .ico { color: var(--accent); }
.drop hr { height: 1px; margin: 5px 4px; background: var(--line-soft); border: 0; }
.drop .drop-empty { padding: 18px 12px; font-size: 13px; color: var(--muted); text-align: center; }

/* ========================================================================== */
/* Sakelar                                                                    */
/* ========================================================================== */

.switch-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.switch-row .grow { min-width: 0; }
.switch-row h4 { font-size: 14.5px; margin: 0 0 3px; }
.switch-row p { margin: 0; font-size: 13px; color: var(--muted); }

.switch {
  flex: none;
  position: relative;
  width: 46px;
  height: 26px;
  padding: 0;
  background: var(--line-strong);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t) var(--ease);
}
.switch::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease-out);
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch:disabled { opacity: .5; cursor: not-allowed; }

/* ========================================================================== */
/* Daftar sederhana yang dipakai beberapa halaman                             */
/* ========================================================================== */

.row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 18px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}
.row-item:last-child { border-bottom: 0; }
.row-item:hover { background: var(--sand); }
.row-item .grow { flex: 1; min-width: 0; }
.row-item .title { font-weight: 600; color: var(--ink); }
.row-item .sub { font-size: 12.5px; color: var(--muted); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--sand-2);
  color: var(--ink-4);
}
.tag.on  { background: var(--ok-tint); color: var(--ok); }
.tag.off { background: var(--sand-2); color: var(--muted); }
.tag.warn { background: var(--warn-tint); color: var(--warn-ink); }
.tag .ico { width: 13px; height: 13px; }

/* ========================================================================== */
/* Penyesuaian halaman rapat                                                  */
/* ========================================================================== */

/* Tombol Download adalah tautan, bukan tombol; ia butuh bentuk yang sama. */
a.primary.dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 9px;
}
a.primary.dl-btn:hover { text-decoration: none; }
/* Notulen belum ada: tautannya diredupkan dan tidak bisa ditekan, bukan
   dihilangkan — tombol yang berpindah-pindah tempat lebih membingungkan
   daripada tombol yang jelas belum bisa dipakai. */
a.primary.dl-btn.is-off { opacity: .45; pointer-events: none; }

.transcript-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.transcript-tools input[type="search"] { flex: 1; min-width: 160px; }
.transcript-tools select { flex: none; width: auto; min-width: 150px; }

/* Monogram pembicara di transkrip: lebih kecil daripada di daftar Speakers. */
.seg-who .spk-avatar { width: 26px; height: 26px; font-size: 11px; }
.seg-who { align-items: center; }

@media (min-width: 900px) {
  .seg-who { flex-direction: row; align-items: center; }
}

/* Di kolom sempit halaman rapat, transkrip tetap satu kolom bertumpuk. */
@media (min-width: 1100px) {
  .detail-left .seg {
    grid-template-columns: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .detail-left .seg-who { justify-content: flex-start; text-align: left; }
}

/* Layar sempit: judul rapat dan tombolnya tidak boleh berebut satu baris.
   Tanpa ini, Share + Download memakan setengah lebar dan judulnya terpaksa
   pecah tiga baris sementara baris keterangan turun satu per satu. */
@media (max-width: 720px) {
  .detail-head { flex-direction: column; align-items: stretch; }
  .detail-head .head-actions { justify-content: flex-start; }
  .page-head { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------- sunting & sahkan notulen
   Bilah keadaan duduk di atas notulen, bukan di dalamnya: yang dicetak dan
   diedarkan adalah .mom, dan menyisipkan tombol ke dalamnya berarti tombol
   itu ikut terbawa setiap kali orang menyalin isinya. */
.mom-tab { display: flex; flex-direction: column; gap: 14px; }

.mom-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  max-width: 780px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.mom-strip-state { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; flex: 1; min-width: 0; }
.mom-strip-state .badge .ico { width: 13px; height: 13px; }
.mom-strip-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mom-strip-actions .primary,
.mom-strip-actions .ghost-btn { padding: 8px 13px; font-size: 13px; }
.mom-strip-actions .ico { width: 15px; height: 15px; }

.mom-edit { display: flex; flex-direction: column; gap: 14px; max-width: 780px; }

.ed-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 11px 14px;
  max-width: 780px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: var(--lift);
}
/* Keterangan menyusut lebih dulu; tombolnya tidak pernah pecah ke baris kedua
   — Simpan yang terlempar ke bawah membuat bilahnya tampak seperti dua bilah. */
.ed-bar-note { flex: 1; min-width: 120px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ed-bar-actions { display: flex; gap: 8px; flex: none; }
.ed-bar-actions button { width: auto; }

.ed-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 15px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.ed-head { font-size: 15px; font-weight: 600; margin: 0; }
.ed-hint { margin: -4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

.ed-field { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; }
.ed-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.ed-field input, .ed-field textarea, .ed-field select { margin: 0; }

.ed-rows { display: flex; flex-direction: column; gap: 10px; }

.ed-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 12px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.ed-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px;
}
/* Tugas, keputusan, dan isu adalah kalimat, bukan satu kata — ia mengambil
   seluruh lebar baris walau tetangganya sempit. */
.ed-grid .wide { grid-column: 1 / -1; }
.ed-del { flex: none; }
.ed-del .ico { width: 16px; height: 16px; }
.ed-del:hover { color: var(--danger); }
.ed-add {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 7px 12px;
  font-size: 13px;
}
.ed-add .ico { width: 15px; height: 15px; }

@media (max-width: 560px) {
  .ed-grid { grid-template-columns: 1fr; }
  .ed-bar { position: static; }
}

/* ------------------------------------------------------------- tanya rapat
   Jawaban model tanpa rujukan yang bisa diperiksa hanyalah tebakan yang
   diketik rapi, jadi kutipan bukan hiasan di sini — ia bagian dari jawabannya. */
.ask-tab { display: flex; flex-direction: column; gap: 14px; max-width: 780px; }

.ask-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.ask-row { display: flex; gap: 9px; align-items: flex-start; }
.ask-row textarea { flex: 1; margin: 0; resize: vertical; }
.ask-row .primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  flex: none;
  padding: 10px 16px;
}
.ask-row .primary .ico { width: 16px; height: 16px; }
.ask-form .hint { margin: 0; }

.qa-list { display: flex; flex-direction: column; gap: 10px; }

.qa {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 15px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
/* Jawaban yang TIDAK ditemukan di transkrip harus terlihat berbeda dari yang
   ditemukan. Tanpa pembedaan ini, "tidak dibahas" dan sebuah fakta tampak
   sama meyakinkannya. */
.qa-none { background: var(--sand); border-style: dashed; }
.qa-none .badge { align-self: flex-start; }
.qa-none .badge .ico { width: 13px; height: 13px; }

.qa-wait { flex-direction: row; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }

.qa-head { display: flex; align-items: flex-start; gap: 10px; }
.qa-q { flex: 1; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; }
.qa-head .icon-btn { flex: none; }
.qa-head .icon-btn .ico { width: 15px; height: 15px; }
.qa-head .icon-btn:hover { color: var(--danger); }

.qa-a { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.qa-foot { font-size: 12px; color: var(--faint); }

.cites { display: flex; flex-direction: column; gap: 7px; padding-left: 11px; border-left: 2px solid var(--line-mid); }
.cite { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; }
.cite-time { font-family: var(--mono); font-size: 12px; color: var(--muted); }
button.cite-time { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent-dark); width: auto; }
button.cite-time:hover { text-decoration: underline; }
.cite-who { font-weight: 600; color: var(--ink-3); }
.cite-quote { flex: 1; min-width: 160px; color: var(--ink-3); line-height: 1.6; }

@media (max-width: 560px) {
  .ask-row { flex-direction: column; }
  .ask-row .primary { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------- admin SSO access */
.admin-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.admin-invite-card {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}
.admin-invite-card h3,
.admin-invite-card p { margin: 0; }
.admin-invite-card label { display: grid; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.admin-invite-card .primary { justify-content: center; margin-top: 3px; }
.admin-card-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--accent-dark);
  background: var(--accent-tint);
  border-radius: 13px;
}
.admin-card-mark .ico { width: 21px; height: 21px; }
.admin-people { min-width: 0; }
.admin-people .section-head { margin: 0 2px 10px; }
.admin-user-list { overflow: hidden; padding: 0; }
.admin-user-row {
  display: grid;
  grid-template-columns: 38px minmax(170px, 1fr) auto minmax(125px, auto) auto;
  gap: 13px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.admin-user-row:last-child { border-bottom: 0; }
.admin-user-row.is-disabled { background: var(--sand); }
.admin-user-row.is-disabled .spk-avatar,
.admin-user-row.is-disabled .admin-user-identity { opacity: .5; }
.admin-user-identity { display: grid; min-width: 0; gap: 2px; }
.admin-user-identity strong { display: flex; align-items: center; gap: 7px; color: var(--ink); }
.admin-user-identity span,
.admin-user-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.admin-user-identity span { font-size: 13px; }
.admin-user-identity small { font-size: 11.5px; }
.admin-user-identity .tag { font-size: 10px; padding: 2px 7px; }
.admin-role-select { min-width: 125px; margin: 0; padding-block: 8px; font-size: 12.5px; border-radius: 999px; }
.admin-access-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.admin-access-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--fainter); }
.admin-access-status.on::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-tint); }
.admin-toggle {
  width: auto;
  padding: 7px 10px;
  font-size: 12.5px;
  background: transparent;
  border-color: transparent;
  border-radius: 999px;
}
.admin-user-row:not(.is-disabled) .admin-toggle { color: var(--danger); }

@media (max-width: 860px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-invite-card { position: static; }
}
@media (max-width: 620px) {
  .admin-user-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; }
  .admin-access-status { grid-column: 2; }
  .admin-role-select { grid-column: 2; min-width: 0; width: 100%; }
  .admin-toggle { grid-column: 3; grid-row: 2 / span 2; align-self: center; }
  #app.admin-mode .tabbar { grid-template-columns: repeat(5, 1fr); }
}