/* LIVELY × OIC console — left: LINE simulator (authentic), right: supervisor ops (dark navy/gold) */
:root {
  --navy: #173c6e;
  --navy-deep: #0e284e;
  --navy-ink: #091c38;
  --gold: #e3c36a;
  --gold-soft: #f0db9c;
  --line-bg: #849ebf;
  --line-green: #6fd35c;
  --ok: #2e9e63;
  --warn: #d9a13c;
  --danger: #d1615f;
  --font: "Sukhumvit Set", "Noto Sans Thai", "Prompt", -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font); background: var(--navy-ink); color: #e8edf5; overflow: hidden; }

.app { display: grid; grid-template-columns: 430px 1fr; height: 100vh; }

/* ═══ phone ═══ */
.phone-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 18px 10px; background: radial-gradient(120% 90% at 30% 10%, #16345f 0%, #091c38 70%); }
.phone { width: 392px; height: min(86vh, 800px); background: var(--line-bg); border-radius: 36px;
  border: 6px solid #0a1526; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px #2b4a77;
  display: flex; flex-direction: column; overflow: hidden; position: relative; }
.phone-hint { font-size: 11.5px; color: #8fa7c9; text-align: center; max-width: 380px; line-height: 1.5; }

.line-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: #2c3e50; background: linear-gradient(180deg, #34495e, #2c3e50); color: #fff; flex-shrink: 0; }
.line-back { font-size: 24px; opacity: .8; }
.line-avatar { width: 36px; height: 36px; border-radius: 50%; background: #fff; padding: 3px; }
.line-title { flex: 1; }
.line-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.badge-verified { background: #4a86e8; color: #fff; font-size: 10px; width: 16px; height: 16px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.line-sub { font-size: 10.5px; opacity: .75; }
.line-icons { font-size: 18px; opacity: .8; }
/* simulator-only control: on a real channel the member menu is linked per user after
   e-KYC, so a guest cannot reach it — this exists so a reviewer can see both menus */
.state-toggle { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-family: var(--font); font-size: 10.5px; font-weight: 700;
  border-radius: 999px; padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.state-toggle:hover { background: rgba(255,255,255,.2); }
.state-toggle.member { background: var(--gold); border-color: var(--gold-soft); color: var(--navy-ink); }

.chat { flex: 1; overflow-y: auto; padding: 14px 10px 8px; display: flex; flex-direction: column; gap: 10px; }
.chat::-webkit-scrollbar { width: 4px; }
.chat::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 2px; }

.msg-row { display: flex; gap: 8px; align-items: flex-end; }
.msg-row.user { flex-direction: row-reverse; }
.msg-avatar { width: 26px; height: 26px; border-radius: 50%; background: #fff; padding: 2px; flex-shrink: 0; }
.msg-stack { display: flex; flex-direction: column; gap: 6px; max-width: 86%; min-width: 0; }
.msg-row.user .msg-stack { align-items: flex-end; }

.bubble { background: #fff; color: #1d2733; border-radius: 16px; padding: 9px 13px; font-size: 13.5px;
  line-height: 1.55; white-space: pre-wrap; word-break: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.12);
  border-top-left-radius: 4px; }
.msg-row.user .bubble { background: var(--line-green); border-radius: 16px; border-top-right-radius: 4px; }
.bubble a { color: #1a6ed8; }
.bubble .cite { display: block; margin-top: 6px; font-size: 11px; color: #7a8699; }

.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa8bb; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

/* rich cards (template/flex renderings) */
.card { background: #fff; color: #1d2733; border-radius: 14px; overflow: hidden; width: 252px;
  box-shadow: 0 1px 2px rgba(0,0,0,.15); flex-shrink: 0; }
.card img.thumb { width: 100%; aspect-ratio: 1.51; object-fit: cover; display: block; }
.card .c-body { padding: 10px 12px; }
.card .c-title { font-weight: 700; font-size: 13.5px; margin-bottom: 3px; }
.card .c-text { font-size: 12px; color: #57657a; line-height: 1.5; }
.card .c-actions { border-top: 1px solid #edf0f4; }
.card .c-actions button, .card .c-actions a { display: block; width: 100%; text-align: center; padding: 9px 6px;
  background: none; border: none; border-bottom: 1px solid #edf0f4; color: #1a6ed8; font-family: var(--font);
  font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.card .c-actions :last-child { border-bottom: none; }
.card .c-actions button:hover { background: #f4f7fb; }

.carousel { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; max-width: 100%; }
.carousel::-webkit-scrollbar { height: 4px; }
.carousel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 2px; }
.carousel .card img.img-carousel { width: 100%; display: block; }

/* flex bubble rendering */
.flexb { width: 258px; }
.flexb.mega { width: 286px; }
.fx-header { padding: 12px 14px; }
.fx-header .fx-line { line-height: 1.4; }
.fx-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.fx-row { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; }
.fx-row .k { color: #8a94a6; }
.fx-sep { border-top: 1px solid #e8ebf0; margin: 3px 0; }
.fx-footer { padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.fx-footer.horizontal { flex-direction: row; }
.fx-btn { border-radius: 8px; padding: 9px 10px; text-align: center; font-size: 12.5px; font-weight: 700;
  cursor: pointer; border: none; font-family: var(--font); width: 100%; text-decoration: none; display: block; color: #fff; }
.fx-btn.secondary { background: #eef1f5; color: #2c3a4d; }

/* imagemap */
.imagemap { position: relative; width: 262px; border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.imagemap img { width: 100%; display: block; }
.imagemap .im-area { position: absolute; cursor: pointer; }
.imagemap .im-area:hover { background: rgba(23,60,110,.14); box-shadow: inset 0 0 0 2px rgba(23,60,110,.35); border-radius: 8px; }

/* quick replies */
.quickreplies { display: flex; gap: 7px; overflow-x: auto; padding: 6px 10px; background: transparent;
  position: absolute; bottom: 58px; left: 0; right: 0; z-index: 5; }
.quickreplies:empty { display: none; }
.quickreplies::-webkit-scrollbar { display: none; }
.qr { flex-shrink: 0; background: #fff; border: 1px solid #cdd8e6; color: #2b70c9; border-radius: 999px;
  padding: 7px 13px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font);
  box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.qr:hover { background: #eef4fc; }

.line-input { display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: #fff; flex-shrink: 0; }
.menu-toggle { background: none; border: none; font-size: 20px; color: #566; cursor: pointer; padding: 4px 6px; }
.line-input input { flex: 1; border: none; outline: none; font-size: 14px; font-family: var(--font);
  background: #f0f2f5; border-radius: 999px; padding: 9px 14px; }
.send-btn { background: none; border: none; font-size: 18px; color: #2b70c9; cursor: pointer; }

.richmenu { position: absolute; bottom: 58px; left: 0; right: 0; background: #fff; z-index: 6;
  box-shadow: 0 -6px 20px rgba(0,0,0,.25); }
.richmenu.hidden { display: none; }
.richmenu img { width: 100%; display: block; }
.rm-areas { position: absolute; inset: 0; }
.rm-area { position: absolute; cursor: pointer; }
.rm-area:hover { background: rgba(255,255,255,.15); box-shadow: inset 0 0 0 2px rgba(227,195,106,.7); border-radius: 10px; }
.rm-bar { background: #f0f2f5; color: #55606e; font-size: 11.5px; font-weight: 700;
  text-align: center; padding: 6px; letter-spacing: .02em; }

/* ═══ ops ═══ */
.ops { display: flex; flex-direction: column; min-width: 0; background: linear-gradient(180deg, #0c2244, #091c38); }
.ops-header { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 22px 12px; border-bottom: 1px solid #1d3a63; flex-wrap: wrap; }
.ops-brand { display: flex; align-items: center; gap: 12px; }
.ops-logo { font-size: 24px; font-weight: 800; letter-spacing: 3px; color: var(--gold);
  text-shadow: 0 0 24px rgba(227,195,106,.35); }
.ops-x { color: #56719c; font-size: 18px; }
.ops-oic { width: 40px; height: 40px; background: #fff; border-radius: 10px; padding: 3px; }
.ops-title { font-weight: 700; font-size: 15.5px; }
.ops-sub { font-size: 11.5px; color: #8fa7c9; }
.ops-metrics { display: flex; gap: 10px; }
.metric { background: #11294e; border: 1px solid #23446f; border-radius: 12px; padding: 8px 14px;
  text-align: center; min-width: 92px; }
.metric b { display: block; font-size: 19px; color: var(--gold-soft); }
.metric span { font-size: 10.5px; color: #8fa7c9; }

.ops-tabs { display: flex; gap: 4px; padding: 10px 22px 0; border-bottom: 1px solid #1d3a63; }
.tab { background: none; border: none; color: #8fa7c9; font-family: var(--font); font-size: 13.5px;
  font-weight: 700; padding: 10px 16px; cursor: pointer; border-radius: 10px 10px 0 0; }
.tab:hover { color: #cdd9ea; }
.tab.active { background: #11294e; color: var(--gold-soft); box-shadow: inset 0 2px 0 var(--gold); }

.ops-body { flex: 1; overflow: hidden; padding: 14px 22px 18px; }
.tab-pane { display: none; height: 100%; overflow-y: auto; }
.tab-pane.active { display: block; }
.tab-pane::-webkit-scrollbar { width: 6px; }
.tab-pane::-webkit-scrollbar-thumb { background: #23446f; border-radius: 3px; }
.pane-hint { font-size: 12px; color: #7d95b8; margin-bottom: 12px; line-height: 1.55; }

/* trace */
.trace { display: flex; flex-direction: column; gap: 6px; }
.trace-turn { border: 1px solid #1d3a63; border-radius: 12px; padding: 10px 14px; background: #0d2547; }
.trace-turn .t-head { display: flex; justify-content: space-between; font-size: 12px; color: #9db3d4;
  margin-bottom: 6px; gap: 10px; }
.trace-turn .t-head b { color: #e8edf5; font-weight: 700; }
.t-step { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; padding: 3px 0;
  font-variant-numeric: tabular-nums; }
.t-step .chip { flex-shrink: 0; font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 2px 8px;
  letter-spacing: .4px; }
.chip.guard { background: rgba(209,97,95,.16); color: #ec9f9d; border: 1px solid rgba(209,97,95,.4); }
.chip.tool { background: rgba(90,161,255,.14); color: #9cc3f5; border: 1px solid rgba(90,161,255,.35); }
.chip.flow { background: rgba(46,158,99,.16); color: #83d3a8; border: 1px solid rgba(46,158,99,.4); }
.chip.route { background: rgba(227,195,106,.14); color: var(--gold-soft); border: 1px solid rgba(227,195,106,.35); }
.t-step .nm { color: #cdd9ea; font-weight: 600; }
.t-step .rs { color: #8fa7c9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-step .ms { margin-left: auto; color: #56719c; font-size: 11px; flex-shrink: 0; }

/* tickets */
.tickets { display: flex; flex-direction: column; gap: 8px; }
.ticket { border: 1px solid #1d3a63; border-left: 4px solid var(--gold); border-radius: 10px;
  padding: 10px 14px; background: #0d2547; }
.ticket.high { border-left-color: var(--danger); }
.ticket .tk-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.ticket .tk-id { font-weight: 800; color: var(--gold-soft); }
.ticket .tk-team { color: #9cc3f5; }
.ticket .tk-sum { font-size: 12.5px; color: #cdd9ea; margin-top: 4px; line-height: 1.5; }
.ticket .tk-at { font-size: 10.5px; color: #56719c; margin-top: 4px; }
.empty { color: #56719c; font-size: 12.5px; padding: 20px; text-align: center; }

/* flow gallery */
.flowlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.flowcard { border: 1px solid #1d3a63; border-radius: 12px; padding: 12px 14px; background: #0d2547;
  display: flex; flex-direction: column; gap: 6px; }
.flowcard .f-kind { font-size: 10.5px; font-weight: 800; color: var(--gold); letter-spacing: .5px;
  text-transform: uppercase; }
.flowcard .f-title { font-weight: 700; font-size: 13.5px; }
.flowcard .f-note { font-size: 11.5px; color: #8fa7c9; line-height: 1.5; flex: 1; }
.flowcard .f-run { align-self: flex-start; background: var(--gold); color: var(--navy-ink); border: none;
  font-family: var(--font); font-weight: 800; font-size: 12px; border-radius: 8px; padding: 6px 14px;
  cursor: pointer; }
.flowcard .f-run:hover { background: var(--gold-soft); }

/* kb */
.kb-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.kb-tools input { flex: 1; background: #0d2547; border: 1px solid #23446f; color: #e8edf5;
  border-radius: 9px; padding: 9px 13px; font-family: var(--font); font-size: 13px; outline: none; }
.kb-tools input:focus { border-color: var(--gold); }
.kb-tools button { background: var(--gold); color: var(--navy-ink); border: none; border-radius: 9px;
  padding: 9px 18px; font-family: var(--font); font-weight: 800; font-size: 12.5px; cursor: pointer; }
.kb-count { font-size: 11.5px; color: #7d95b8; flex-shrink: 0; }

.kbresult { margin-bottom: 14px; }
.kbresult:empty { display: none; }
.kbresult .rank-head { font-size: 12px; color: #9db3d4; margin-bottom: 6px; }
.kbresult .rank-head b { color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.kbresult .rank { display: flex; gap: 10px; align-items: baseline; background: #0d2547;
  border: 1px solid #1d3a63; border-radius: 8px; padding: 7px 12px; margin-bottom: 4px; font-size: 12.5px; }
.kbresult .rank .sc { font-variant-numeric: tabular-nums; font-weight: 800; width: 46px; flex-shrink: 0; }
.kbresult .rank.win .sc { color: var(--ok); }
.kbresult .rank .sc.low { color: var(--warn); }

.kb-group { font-family: var(--font); font-weight: 800; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin: 14px 0 4px; }
.kblist { display: flex; flex-direction: column; gap: 2px; }
.kbrow { display: flex; gap: 10px; align-items: baseline; border-bottom: 1px solid #14304f;
  padding: 7px 4px; font-size: 12.5px; }
.kbrow .kb-id { font-weight: 800; color: var(--gold-soft); flex-shrink: 0; width: 150px;
  font-size: 11.5px; }
.kbrow .kb-title { color: #cdd9ea; flex: 1; }
.kbrow .kb-views { color: var(--warn); font-size: 11px; flex-shrink: 0;
  font-variant-numeric: tabular-nums; }
.kbrow .kb-src { color: #56719c; font-size: 11px; flex-shrink: 0; max-width: 210px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbrow a { color: #9cc3f5; text-decoration: none; }

@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  body { overflow: auto; }
  .ops-metrics { flex-wrap: wrap; }
}