:root {
  --ink: #0c2231;
  --ink-2: #3a5667;
  --ink-3: #6d8695;
  --line: #d6e1e8;
  --line-soft: #e6edf1;
  --base: #eaeff3;
  --surface: #fff;
  --rail: #0b1f2d;
  --rail-ink: #9db4c2;
  --rail-line: #1d3a4d;
  --signal: #0a6fd8;
  --signal-ink: #075ab0;
  --signal-soft: #e4eefb;
  --ok: #0f8a6a;
  --ok-soft: #e2f3ed;
  --warn: #b06a00;
  --warn-soft: #fbf0dd;
  --bad: #c8372d;
  --bad-soft: #fbe9e7;
  --sans: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --display: 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --radius: 10px;
  --shadow: 0 1px 2px #0c22310f, 0 8px 24px #0c22310a;
  color: var(--ink);
  background: var(--base);
  font-family: var(--sans);
}
* { box-sizing: border-box }
[hidden] { display: none !important }
body { margin: 0; background: var(--base); font-size: 14px; line-height: 1.55; overflow-x: hidden }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -.01em }
h1 { font-size: 25px }
h2 { font-size: 18px }
h3 { font-size: 15px; margin-top: 4px }
p { margin: 6px 0 0; color: var(--ink-2) }
.subtle { font-size: 13px; color: var(--ink-3) }
a { color: var(--signal-ink) }
small { display: block; color: var(--ink-3); font-size: 12px; line-height: 1.5 }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0) }

button {
  cursor: pointer; font: 600 14px var(--sans); border: 1px solid transparent; border-radius: 8px;
  background: var(--signal); color: #fff; padding: 10px 16px;
}
button:hover { background: var(--signal-ink) }
button:disabled { opacity: .5; cursor: not-allowed }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 2px;
}
.quiet { background: var(--surface); color: var(--ink); border-color: var(--line) }
.quiet:hover { background: var(--base); color: var(--ink) }
label { display: block; font: 600 13px var(--sans); margin: 18px 0 6px }
input, textarea, select {
  width: 100%; font: 14px var(--sans); color: var(--ink); background: var(--surface);
  border: 1px solid #c3d2db; border-radius: 8px; padding: 10px 12px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--signal); outline-offset: -1px; border-color: var(--signal) }
textarea { resize: vertical }
.eyebrow { display: block; font: 600 13px var(--display); color: var(--ink-3); margin-bottom: 2px }
pre {
  background: #f4f7f9; border: 1px solid var(--line-soft); border-radius: 8px; padding: 14px;
  font: 12px/1.65 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0 0;
}
code { font: 12px ui-monospace, Consolas, monospace }

/* ---------- Masuk ---------- */
.login-screen { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr }
.login-intro { background: var(--rail); color: #fff; padding: 7vw 5vw; display: flex; flex-direction: column; justify-content: center; gap: 26px }
.login-intro h1 { font-size: clamp(34px, 3.8vw, 52px); line-height: 1.1; max-width: 15ch; color: #fff }
.login-intro p { color: var(--rail-ink); max-width: 44ch; font-size: 15px }
.wordmark { font: 600 19px var(--display); letter-spacing: -.02em }
.wordmark span { color: var(--rail-ink); font-weight: 400 }
.signal-line { width: 100%; max-width: 320px; height: 26px; overflow: visible }
.signal-line .track { stroke: #1d3a4d; stroke-width: 2 }
.signal-line .pulse { stroke: #2fb98a; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 26 290; animation: travel 3.4s cubic-bezier(.5, 0, .5, 1) infinite }
.signal-line .node { fill: #2fb98a }
@keyframes travel { from { stroke-dashoffset: 316 } to { stroke-dashoffset: 0 } }
.login-form { display: flex; flex-direction: column; justify-content: center; padding: 7vw 5vw; background: var(--surface) }
.login-form > * { width: 100%; max-width: 360px }
.login-form h2 { font-size: 23px }
.login-form button { margin-top: 22px; padding: 12px }
#login-error:not(:empty) { color: var(--bad); margin-top: 14px; font-weight: 600 }

/* ---------- Kerangka ---------- */
#workspace { display: grid; grid-template-columns: 228px 1fr; min-height: 100vh }
.rail { background: var(--rail); display: flex; flex-direction: column; gap: 6px; padding: 22px 14px; position: sticky; top: 0; height: 100vh }
.rail .wordmark { color: #fff; padding: 0 10px 20px; display: block; text-decoration: none }
.rail nav { display: flex; flex-direction: column; gap: 2px }
.rail button {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: transparent; color: var(--rail-ink); font-weight: 500; padding: 10px 11px; border-radius: 8px;
}
.rail button:hover { background: #15314382; color: #fff }
.rail button[aria-pressed=true] { background: var(--surface); color: var(--ink); font-weight: 600 }
.rail svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.rail-end { margin-top: auto; display: flex; flex-direction: column; gap: 2px }
.rail-end button[aria-pressed=false] { color: #6b8495 }
.rail-end button[aria-pressed=false] svg { opacity: .55 }
.shell { display: flex; flex-direction: column; min-width: 0 }
.topline { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 32px 0 }
main { padding: 18px 32px 28px; flex: 1; min-width: 0 }
footer { padding: 0 32px 20px; font-size: 12px; color: var(--ink-3) }
#notice { padding: 11px 14px; border: 1px solid #e2cf9a; background: #fdf7e7; border-radius: 8px; color: #6d5415; margin: 0 0 18px; overflow-wrap: anywhere }

.badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; background: var(--surface); border: 1px solid var(--line); border-radius: 30px; padding: 6px 13px; white-space: nowrap }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none }
.badge.live .dot { animation: breathe 2.2s ease-in-out infinite }
.badge.warn { background: var(--warn-soft); border-color: #e7cfa3; color: var(--warn) }
.badge.warn .dot { background: var(--warn) }
@keyframes breathe { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow) }
.card > button { margin-top: 20px }
.form-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: start; max-width: 1080px }

/* ---------- Inbox ---------- */
.inbox-layout { display: grid; grid-template-columns: 290px 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); height: calc(100vh - 168px); min-height: 520px }
.contact-panel { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; padding: 18px 14px }
.panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px }
.count { font: 600 12px var(--sans); background: var(--base); color: var(--ink-2); border-radius: 20px; padding: 3px 9px; font-variant-numeric: tabular-nums }
.contacts { overflow: auto; margin-top: 12px; display: flex; flex-direction: column; gap: 1px }
.contacts > p { padding: 10px; font-size: 13px }
.contact { display: block; width: 100%; text-align: left; background: transparent; color: var(--ink); border: 0; padding: 11px 12px; font-weight: 500 }
.contact:hover { background: var(--base) }
.contact[aria-pressed=true] { background: var(--signal-soft); color: var(--signal-ink) }
.contact b { display: block; font: 600 14px var(--sans) }
.contact span { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.contact[aria-pressed=true] span { color: #4b7cb8 }
.conversation { display: flex; flex-direction: column; min-width: 0; min-height: 0 }
.chat-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 24px; border-bottom: 1px solid var(--line) }
.chat-heading p { margin: 2px 0 0; font-size: 12px; font-variant-numeric: tabular-nums }
.messages { flex: 1; overflow: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; background: var(--base) }
.empty { margin: auto; text-align: center; max-width: 34ch }
.empty p { font-size: 13px }
.message { max-width: 74%; padding: 11px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; align-self: flex-start; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px #0c22310a }
.message.out { align-self: flex-end; background: #dbeafe82; border-color: #bcd6f5; border-radius: 12px 12px 3px 12px }
.message small { margin-top: 6px; font-size: 11px; font-variant-numeric: tabular-nums }
.message.failed, .message.out.failed { background: var(--bad-soft); border-color: #f0c7c2 }
.message .error { color: var(--bad); font-weight: 600 }
.composer { display: flex; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--line) }
.composer textarea { flex: 1 }
.composer button { align-self: flex-end; white-space: nowrap }

/* ---------- Tangga status ---------- */
.state { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--sans); border-radius: 20px; padding: 3px 10px; background: var(--base); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap }
.state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none }
.state[data-status=pending] { color: var(--ink-3) }
.state[data-status=pending]::before { animation: breathe 1.6s ease-in-out infinite }
.state[data-status=accepted], .state[data-status=sent], .state[data-status=received] { background: var(--signal-soft); border-color: #c3dcf8; color: var(--signal-ink) }
.state[data-status=delivered], .state[data-status=read] { background: var(--ok-soft); border-color: #bfe3d7; color: var(--ok) }
.state[data-status=unknown] { background: var(--warn-soft); border-color: #e7cfa3; color: var(--warn) }
.state[data-status=failed] { background: var(--bad-soft); border-color: #f0c7c2; color: var(--bad) }

/* ---------- Log ---------- */
#view-logs .card { max-width: 1080px }
.lead { margin-top: 0 }
.log-counts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px }
.log-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 14px; align-items: end; padding-bottom: 6px }
.log-filters button { width: 100% }
.log-table { margin-top: 4px }
.log-row { border-top: 1px solid var(--line-soft); padding: 15px 0 15px 14px; border-left: 3px solid #c3dcf8 }
.log-row.in { border-left-color: #bfe3d7 }
.log-row:not(:has(.log-error)) + .log-row { border-top-color: var(--line-soft) }
.log-head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px }
.log-head b { font: 600 14px var(--sans); overflow-wrap: anywhere }
.log-head .when { margin-left: auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums }
.log-text { margin: 8px 0 0; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 7.4em; overflow: auto }
.log-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 9px }
.log-facts span { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere }
.log-facts b { color: var(--ink-3); font-weight: 500 }
.log-error { margin: 10px 0 0; font-size: 13px; color: var(--bad); background: var(--bad-soft); border: 1px solid #f0c7c2; border-radius: 8px; padding: 9px 12px; overflow-wrap: anywhere }
#log-more { margin-top: 20px }

/* ---------- Daftar lain ---------- */
.guide { background: #f4f7f9; box-shadow: none }
.guide-item { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px }
.guide-item h3 { margin: 0 }
.template-library { margin-top: 20px }
.library-item { border-top: 1px solid var(--line-soft); padding: 18px 0 }
.library-item h3 { overflow-wrap: anywhere }
.user-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-soft) }
dl { margin: 14px 0 0; font-size: 13px }
dt { color: var(--ink-3); margin-top: 12px }
dd { margin: 2px 0 0; font-weight: 600 }

main { animation: rise .3s ease-out }
@keyframes rise { from { opacity: 0; transform: translateY(5px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important } }

@media (max-width: 1000px) {
  .form-layout { grid-template-columns: 1fr }
  .login-screen { grid-template-columns: 1fr }
  .login-intro { padding: 44px 30px }
  .login-intro h1 { font-size: 32px }
  .login-form { padding: 34px 30px }
}
@media (max-width: 760px) {
  #workspace { grid-template-columns: 1fr }
  .rail { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; flex-direction: row; align-items: center; gap: 2px; padding: 7px 8px; z-index: 5; border-top: 1px solid var(--rail-line); overflow-x: auto }
  .rail .wordmark, .rail-end { display: none }
  .rail nav { flex-direction: row; gap: 2px; width: 100% }
  .rail button { flex-direction: column; gap: 4px; padding: 7px 10px; font-size: 10.5px; min-width: 62px; text-align: center; justify-content: center }
  .shell { padding-bottom: 72px }
  .topline { padding: 16px 16px 0; flex-wrap: wrap }
  main { padding: 14px 16px 22px }
  footer { padding: 0 16px 16px }
  .inbox-layout { grid-template-columns: 1fr; height: auto }
  .contact-panel { border-right: 0; border-bottom: 1px solid var(--line); max-height: 240px; min-width: 0 }
  .contact span { max-width: 100% }
  .conversation { height: 500px }
  .messages { padding: 16px }
  .message { max-width: 88% }
  .card { padding: 18px }
  .log-head .when { margin-left: 0; width: 100% }
}