/* Admin portal: list and conversation side by side on wide screens, stacked on phones. */
html, body { height: 100%; }
body { --toast-offset: 24px; }

.login { min-height: 100%; display: grid; place-items: center; padding: var(--sp-4) 16px; }
.login-card { width: min(400px, 100%); display: grid; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4); background: var(--surface); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.login-logo { width: 64px; height: 64px; border-radius: 16px; }
.login-card h1 { font-size: 1.8rem; }
.login-sub { color: var(--ink-2); margin-top: -.5rem; }

.inbox { height: 100%; display: flex; flex-direction: column; }
.inbox-head {
  display: flex; align-items: center; gap: .5rem; padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
  background: var(--surface); border-bottom: 1px solid var(--line); flex: none;
}
.ih-brand { display: flex; align-items: center; gap: .5rem; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; margin-right: auto; min-width: 0; white-space: nowrap; }
.ih-brand img { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.tg-state { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.tg-state svg { width: 16px; height: 16px; color: var(--telegram); }
.tg-state.on { background: var(--ok-wash); color: var(--ok); }
.tg-state.off { background: var(--warn-wash); color: var(--warn); }
@media (max-width: 420px) { .tg-state span { display: none; } }

.panes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.detail-pane, .list-pane, .detail-body, .chat-log { min-width: 0; }
.d-head { flex-wrap: wrap; }
.d-head .btn { flex: none; }
@media (max-width: 480px) { .d-id { flex: 1 1 0; } }
@media (min-width: 900px) { .panes { grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); } }

.list-pane { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--paper); }
.list-tools { display: grid; gap: .6rem; padding: 12px; border-bottom: 1px solid var(--line); }
.search { position: relative; }
.search svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.search .input { padding-left: 2.75rem; min-height: 46px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chips button {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .8rem; border-radius: 999px; border: 0;
  background: var(--surface-2); color: var(--ink-2); font: 700 .9rem var(--body); cursor: pointer;
}
.filter-chips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.filter-chips .c { font-family: var(--mono); font-weight: 500; opacity: .8; }
.filter-chips button[data-filter="needs_human"] .c:not(:empty) { color: var(--warn); opacity: 1; }
.filter-chips button[data-filter="needs_human"][aria-pressed="true"] .c { color: var(--accent); }

.rows { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: .7rem; width: 100%; padding: .8rem 12px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; text-align: left; cursor: pointer; align-items: start;
}
@media (hover: hover) { .row:hover { background: var(--surface); } }
.row[aria-current="true"] { background: var(--surface); box-shadow: inset 4px 0 0 var(--accent); }
.row .avatar { width: 40px; height: 40px; background: var(--surface-3); color: var(--ink); font: 800 .95rem/1 var(--display); }
.r-main { display: grid; gap: .2rem; min-width: 0; }
.r-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-prev { font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.unread .r-prev { color: var(--ink); font-weight: 700; }
.r-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .15rem; }
.r-cat { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; padding: .2rem .1rem; }
.r-side { display: grid; justify-items: end; gap: .35rem; }
.r-time { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.rows .empty-list { padding: var(--sp-5) var(--sp-3); text-align: center; color: var(--muted); }
.rows .skeleton { padding: 12px; display: grid; gap: 10px; }
.rows .skeleton span { height: 56px; border-radius: 12px; background: var(--surface-2); animation: pulse 1.2s infinite ease-in-out; }

.detail-pane { min-height: 0; display: flex; flex-direction: column; background: var(--chat-bg); }
.detail-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: .6rem; color: var(--muted); padding: var(--sp-4); text-align: center; }
.detail-empty svg { width: 40px; height: 40px; }
.detail-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
@media (max-width: 899px) {
  .detail-pane { display: none; }
  .inbox.show-detail .list-pane { display: none; }
  .inbox.show-detail .detail-pane { display: flex; }
  .detail-empty { display: none; }
}
@media (min-width: 900px) { .d-back { display: none; } }
.d-head { display: flex; align-items: center; gap: .5rem; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); flex: none; }
.d-id { flex: 1; min-width: 0; }
.d-id h2 { font-family: var(--body); font-size: 1.1rem; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-id p { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-context { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; padding: .55rem 12px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); flex: none; }
.d-context .tg { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; }
.d-context .tg svg { width: 16px; height: 16px; color: var(--telegram); }
.d-context .tg.failed { color: var(--danger); }
.d-context details { width: 100%; }
.d-context summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.d-context pre { margin: .4rem 0 0; padding: .7rem; border-radius: 10px; background: var(--surface-2); font: 500 .85rem/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* In the inbox, the customer is on the left and the team on the right. */
.detail-pane .bubble.customer { align-self: flex-start; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); border-bottom-left-radius: 8px; }
.detail-pane .bubble.bot { opacity: .92; }
.detail-pane .bubble.team { align-self: flex-end; background: var(--bubble-agent); color: var(--on-bubble-agent); border-bottom-right-radius: 8px; }
.detail-pane .sender.right { align-self: flex-end; }
.detail-pane .meta-line.right { align-self: flex-end; }
.d-hint { flex: none; padding: 0 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--surface); font-size: var(--fs-xs); color: var(--muted); }
.d-hint kbd { font-family: var(--mono); font-size: .75rem; padding: .05rem .3rem; border-radius: 4px; background: var(--surface-2); }
.detail-body .composer { padding-bottom: 6px; }
@media (pointer: coarse) { .d-hint kbd, .d-hint .keys { display: none; } }

/* Players vs guests, claims, digest, player history */
.view-switch { margin: 12px 12px 0; }
.who { display: inline-block; padding: .05rem .4rem; border-radius: 6px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.who.player { background: var(--accent); color: var(--on-accent); }
.who.guest { background: var(--surface-3); color: var(--ink-2); }
.handle { color: var(--accent-ink); font-weight: 700; font-size: var(--fs-sm); }
.row .avatar.player { background: var(--accent); color: var(--on-accent); }
.claims-pane { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-height: 0; overflow-y: auto; }
.claims-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.digest { margin: 0; padding: .8rem; border-radius: 12px; background: var(--surface-2); font: 500 .85rem/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.claim-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .8rem .2rem; border-bottom: 1px solid var(--line); }
.claim-row p { color: var(--ink-2); }
.claim-actions { display: flex; gap: 6px; }
.player-panel { padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--line); max-height: 45%; overflow-y: auto; font-size: var(--fs-sm); }
.player-panel h3 { font-family: var(--body); font-size: 1.05rem; letter-spacing: 0; }
.player-panel h4 { margin: .7rem 0 .3rem; font-size: .9rem; }
.player-panel ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
.player-panel .link { border: 0; background: none; padding: .3rem 0; color: var(--accent-ink); font: 700 var(--fs-sm) var(--body); text-align: left; cursor: pointer; text-decoration: underline; min-height: 32px; }
.player-panel code { font-family: var(--mono); color: var(--accent-ink); }
/* Segmented switch (the app stylesheet isn't loaded on this page) */
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: var(--r-control); background: var(--surface-2); }
.segmented button { min-height: 44px; padding: 0 .4rem; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font: 700 .95rem/1.1 var(--body); cursor: pointer; }
.segmented button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow); }

/* ---------- Admin portal: presence, platform board, announcements ---------- */
.presence-state { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
.presence-state .p-dot { width: 8px; height: 8px; border-radius: 50%; background: #8A93A6; flex: none; }
.presence-state[data-state="online"], .presence-state[data-state="team"] { background: var(--ok-wash); color: var(--ok); }
.presence-state[data-state="online"] .p-dot, .presence-state[data-state="team"] .p-dot { background: #22C55E; }
@media (max-width: 560px) { .presence-state span:last-child { display: none; } }
.segmented.view-switch button { font-size: .88rem; }
.side-pane { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-height: 0; overflow-y: auto; }
.pane-title { display: flex; align-items: center; gap: .5rem; font-family: var(--body); font-size: 1.15rem; letter-spacing: 0; }
.pane-title svg { width: 22px; height: 22px; color: var(--accent-ink); }
.pane-sub { font-family: var(--body); font-size: 1rem; letter-spacing: 0; margin-top: .4rem; }
.plat-rows { display: grid; gap: 10px; }
.plat { display: grid; gap: .6rem; padding: .8rem; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.plat-head { display: flex; align-items: center; gap: .6rem; }
.plat-head img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 1.5px var(--accent); }
.plat-head strong { flex: 1; min-width: 0; }
.seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-control); background: var(--surface-2); }
.seg-opt { position: relative; display: grid; place-items: center; min-height: 44px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: .8rem; color: var(--ink-2); text-align: center; padding: 0 2px; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-opt:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 2px var(--accent); }
.seg-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
.seg-opt.st-online:has(input:checked) { box-shadow: 0 0 0 2px #22C55E; }
.seg-opt.st-maintenance:has(input:checked) { box-shadow: 0 0 0 2px #EF4444; }
.seg-opt.st-limited:has(input:checked) { box-shadow: 0 0 0 2px #F59E0B; }
.plat-note { display: flex; gap: .5rem; }
.plat-note .input { flex: 1; min-width: 0; min-height: 44px; }
.pstat { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); white-space: nowrap; }
.pstat .pdot { width: 8px; height: 8px; border-radius: 50%; background: #8A93A6; }
.pstat.st-online { color: var(--ok); } .pstat.st-online .pdot { background: #22C55E; }
.pstat.st-maintenance { color: var(--danger); } .pstat.st-maintenance .pdot { background: #EF4444; }
.pstat.st-limited { color: var(--warn); } .pstat.st-limited .pdot { background: #F59E0B; }
.ann-form { padding: .9rem; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ann-form textarea { resize: vertical; min-height: 96px; }
.ann-form .btn svg { width: 20px; height: 20px; }
.ann-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .8rem .2rem; border-bottom: 1px solid var(--line); }
.ann-row > div { flex: 1 1 220px; min-width: 0; }
.ann-row p { color: var(--ink-2); overflow-wrap: anywhere; }
.ann-row.off { opacity: .6; }
.player-panel .ids { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0; }
.id-tag { padding: .1rem .5rem; border-radius: 999px; background: var(--accent-wash); color: var(--accent-ink); font-weight: 700; font-size: var(--fs-xs); overflow-wrap: anywhere; }
.ih-brand span { overflow: hidden; text-overflow: ellipsis; }
#logoutBtn { white-space: nowrap; flex: none; }
@media (max-width: 480px) { .ih-brand span { display: none; } .inbox-head { gap: .35rem; } }

/* ---------- Phase 3 dashboard tabs ---------- */
.segmented.view-switch { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.player-rows { display: grid; gap: 8px; }
.prow { border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.prow summary { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .7rem; align-items: start; padding: .75rem; cursor: pointer; list-style: none; min-height: 44px; }
.prow summary::-webkit-details-marker { display: none; }
.prow[open] summary { border-bottom: 1px solid var(--line); }
.prow .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 700 .9rem/1 var(--display); }
.pr-main { display: grid; gap: .15rem; min-width: 0; }
.pr-main .handle { overflow-wrap: anywhere; }
.pr-stats { display: flex; flex-wrap: wrap; gap: .3rem .7rem; font-size: var(--fs-xs); color: var(--ink-2); font-weight: 700; }
.pr-stats code, .ref-table code, .pr-detail code { font-family: var(--mono); color: var(--accent-ink); letter-spacing: .06em; }
.pr-detail { padding: .7rem .9rem 1rem; font-size: var(--fs-sm); display: grid; gap: .2rem; }
.pr-detail h4 { margin: .6rem 0 .2rem; font-size: .9rem; }
.pr-detail ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
.pr-detail .link { border: 0; background: none; padding: .3rem 0; color: var(--accent-ink); font: 700 var(--fs-sm) var(--body); text-align: left; cursor: pointer; text-decoration: underline; min-height: 32px; }
.gen-form { padding: .9rem; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.gen-form select { min-height: 44px; }
.ref-table { overflow-x: auto; }
.ref-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ref-table th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .4rem; }
.ref-table td { padding: .55rem .4rem; border-top: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.ref-table tr.st-replaced { opacity: .55; }
.spin-admin { display: grid; gap: .4rem; padding: .9rem; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: .5rem; }
.spin-admin .btn { justify-self: start; }
.pstat.st-none .pdot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ref-table td:first-child code { white-space: nowrap; }