:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
  --bg: #080d1a;
  --surface: #101a2e;
  --surface-2: #14213a;
  --surface-3: #182945;
  --border: #263651;
  --border-soft: rgba(122, 155, 203, .18);
  --text: #f4f8ff;
  --muted: #a9b8cf;
  --blue: #488ff8;
  --blue-strong: #2f7cf0;
  --cyan: #30d9e7;
  --user: #14294a;
  --online: #37d99a;
  --offline: #72839d;
  --danger: #ff6b7a;
  --shadow: 0 18px 60px rgba(0, 0, 0, .38);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body {
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% -20%, rgba(72, 143, 248, .15), transparent 42%),
    var(--bg);
}
button, textarea, select, input { font: inherit; }
button, a { color: inherit; }
button { cursor: pointer; }
main {
  width: 100%;
  max-width: 760px;
  min-height: 100svh;
  height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 16px max(10px, env(safe-area-inset-bottom));
  overflow: hidden;
}
header {
  flex: 0 0 60px;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border-soft);
}
.app-title {
  min-width: 0;
  flex: 1;
  font-size: 18px;
  line-height: 1;
  font-weight: 760;
  letter-spacing: -.025em;
}
.drawer-title {
  font-size: 17px;
  font-weight: 740;
  letter-spacing: -.02em;
}
.mobile-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
}
.brand-mark, .blocking-mark, .empty-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #04131c;
  background: linear-gradient(140deg, #4cfff0, #3287ff);
  box-shadow: 0 8px 24px rgba(48, 217, 231, .14);
  font-weight: 850;
  letter-spacing: -.04em;
}
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 11px;
}
.brand-copy { min-width: 0; display: grid; gap: 1px; }
.brand-copy strong { font-size: 17px; line-height: 1.05; font-weight: 760; letter-spacing: -.02em; }
.brand-copy small { font-size: 10px; color: var(--muted); letter-spacing: .02em; }
header > #login { text-decoration: none; font-size: 13px; color: var(--cyan); }
.icon-button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  display: inline-grid;
  place-items: center;
  font-size: 21px;
}
.icon-button:hover, .icon-button:focus-visible {
  background: rgba(255, 255, 255, .05);
  border-color: var(--border-soft);
}
.dot, .target-dot {
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--offline);
  box-shadow: 0 0 0 3px rgba(114, 131, 157, .10);
}
.dot { width: 9px; height: 9px; }
.dot.online, .target-dot.online { background: var(--online); box-shadow: 0 0 0 3px rgba(55, 217, 154, .12); }
.target-dot { width: 8px; height: 8px; }
.target-dot.offline, .target-dot.unknown { background: var(--offline); }

.context {
  flex: 0 0 auto;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(16, 26, 46, .82);
  padding: 0 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
  text-align: left;
  color: var(--text);
}
.context:hover:not(:disabled) { border-color: #36527b; background: var(--surface-2); }
.context:disabled { opacity: .55; cursor: default; }
#contextLabel {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 620;
}
#notice {
  flex: 0 0 auto;
  font-size: 12px;
  color: #f3bd72;
  margin: 7px 2px 0;
  min-height: 0;
}
#notice:empty { display: none; }

.blocking, .empty {
  margin: auto 0;
  text-align: center;
  padding: 30px 20px;
}
.blocking-mark, .empty-mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 15px;
  font-size: 15px;
}
.blocking h1, .empty h1 { margin: 0 0 9px; font-size: 22px; font-weight: 740; letter-spacing: -.025em; }
.blocking p, .empty p { margin: 0 auto 18px; max-width: 450px; line-height: 1.55; color: var(--muted); font-size: 14px; }

.primary {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 11px;
  min-height: 44px;
  padding: 0 17px;
  background: linear-gradient(180deg, #5598fa, var(--blue-strong));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(72, 143, 248, .18);
}
.primary:hover:not(:disabled) { filter: brightness(1.06); }
.primary:disabled { opacity: .45; cursor: default; }

#messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 18px 2px 12px;
  scrollbar-gutter: stable;
}
.message-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.message-row.user { justify-content: flex-end; }
.avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
}
.message {
  min-width: 0;
  max-width: calc(100% - 40px);
  line-height: 1.62;
  overflow-wrap: anywhere;
  font-size: 14.5px;
}
.message-row.user .message {
  max-width: 82%;
  padding: 10px 14px;
  border: 1px solid #284a75;
  border-radius: 16px 16px 5px 16px;
  background: linear-gradient(180deg, #173154, var(--user));
}
.message-row.assistant .message { padding: 3px 0; }
.message p { margin: 0 0 10px; }
.message p:last-child { margin-bottom: 0; }
.message ul, .message ol { margin: 6px 0 11px; padding-left: 22px; }
.message li { margin: 3px 0; }
.message-table { max-width: 100%; overflow-x: auto; margin: 10px 0; border: 1px solid var(--border); border-radius: 10px; }
.message-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.message-table th, .message-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.message-table th { background: var(--surface); font-weight: 600; white-space: nowrap; }
.message-table td:first-child { min-width: 140px; overflow-wrap: anywhere; }
.message-table td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.message-table tbody tr:last-child td { border-bottom: 0; }
.message-table tbody tr:nth-child(even) { background: #ffffff04; }
.file-ref {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: .94em;
  color: #dcecff;
}
.message strong { color: #fff; }
.message code {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: .92em;
  background: #13223a;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 1px 5px;
}
.message pre {
  margin: 10px 0;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #0d1627;
  overflow-x: auto;
}
.message pre code { padding: 0; border: 0; background: transparent; }
.status-marker { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; padding: 3px 0; }
.status-marker::before { content: "•"; color: var(--cyan); }

.activity {
  flex: 0 0 auto;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
  padding: 2px 2px 4px;
}
.activity img { width: 28px; height: 28px; border-radius: 9px; }
.activity-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(48, 217, 231, .45);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

#composer {
  flex: 0 0 auto;
  display: flex;
  gap: 9px;
  align-items: flex-end;
  padding-top: 9px;
  background: linear-gradient(180deg, rgba(8, 13, 26, 0), var(--bg) 22%);
}
textarea {
  flex: 1;
  resize: none;
  min-height: 50px;
  max-height: 144px;
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 13px 14px;
  background: #0e182a;
  color: var(--text);
  outline: none;
  overflow-y: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
}
textarea::placeholder { color: #71839f; }
textarea:focus { border-color: #417ec7; box-shadow: 0 0 0 3px rgba(72, 143, 248, .12); }
.send {
  width: 48px;
  height: 48px;
  min-height: 48px;
  flex: 0 0 48px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 14px;
  padding: 0;
  background: linear-gradient(180deg, #5a9cff, var(--blue-strong));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(72, 143, 248, .22);
  transition: transform .14s ease, filter .14s ease, opacity .14s ease;
}
.send:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.send:active:not(:disabled) { transform: translateY(0) scale(.97); }
.send svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stop-icon {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: currentColor;
}
.send:disabled { opacity: .42; cursor: default; box-shadow: none; transform: none; }

dialog {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(1, 5, 13, .72); backdrop-filter: blur(2px); }
.sheet {
  width: min(100%, 760px);
  max-height: 82dvh;
  margin: auto auto 0;
  border-radius: 20px 20px 0 0;
  padding: 20px 20px max(20px, env(safe-area-inset-bottom));
}
.sheet-head, .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet h2, .drawer h2 { font-size: 15px; margin: 0; }
label { display: block; margin: 17px 0; font-size: 12px; color: var(--muted); }
select, input[type="text"] {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 7px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #0d1728;
  color: var(--text);
  outline: none;
}
select:focus, input[type="text"]:focus { border-color: #417ec7; box-shadow: 0 0 0 3px rgba(72, 143, 248, .10); }
.sheet > .primary { width: 100%; }

.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(88vw, 350px);
  max-width: 350px;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border-radius: 0 18px 18px 0;
  padding: max(16px, env(safe-area-inset-top)) 13px max(16px, env(safe-area-inset-bottom));
  background: #0b1424;
}
.drawer-head { min-height: 46px; }
.new-conversation {
  width: 100%;
  min-height: 44px;
  margin: 15px 0 20px;
  border: 1px solid #315681;
  border-radius: 11px;
  background: rgba(72, 143, 248, .10);
  color: #dbeaff;
  text-align: left;
  padding: 0 12px;
  font-weight: 680;
}
.new-conversation:hover:not(:disabled) { background: rgba(72, 143, 248, .16); }
.drawer h2 { margin-bottom: 9px; color: var(--muted); font-weight: 620; }
#conversations { display: grid; gap: 4px; }
.conversation {
  width: 100%;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px;
  align-items: center;
}
.conversation:hover, .conversation.current { background: rgba(255, 255, 255, .04); border-color: var(--border-soft); }
.conversation-open {
  min-width: 0;
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  padding: 7px 8px;
  text-align: left;
  display: flex;
  gap: 8px;
  align-items: center;
}
.conversation-actions {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  display: grid;
  place-items: center;
}
.conversation-actions:hover:not(:disabled) { background: rgba(255, 255, 255, .06); color: var(--text); }
.conversation-actions:disabled { opacity: .35; cursor: default; }
.conversation .running-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(48, 217, 231, .5);
  flex: 0 0 auto;
}
.conversation-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.muted { color: var(--muted); font-size: 13px; }
.logout {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: max(16px, env(safe-area-inset-bottom));
  min-height: 44px;
  border: 0;
  border-top: 1px solid var(--border-soft);
  background: transparent;
  color: var(--muted);
  text-align: left;
  padding: 11px 4px 0;
}

.conversation-sheet { max-width: 520px; }
.danger-button, .quiet-button {
  min-height: 44px;
  border-radius: 11px;
  padding: 0 14px;
  font-weight: 680;
}
.danger-button {
  width: 100%;
  margin-top: 10px;
  border: 1px solid rgba(255, 107, 122, .34);
  background: rgba(255, 107, 122, .08);
  color: #ff9aa6;
}
.danger-button.strong { margin: 0; background: #b7384a; border-color: #d24a5d; color: white; }
.quiet-button { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.danger-confirm {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(255, 107, 122, .25);
  border-radius: 12px;
  background: rgba(255, 107, 122, .05);
}
.danger-confirm p { margin: 0 0 10px; font-size: 13px; color: #ffb3bc; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

@media (max-width: 520px) {
  main { padding-left: 12px; padding-right: 12px; }
  #messages { padding-top: 14px; gap: 15px; }
  .sheet { padding-left: 16px; padding-right: 16px; }
}
:is(.context-switch){display:flex;flex-wrap:wrap;gap:6px 12px;margin:18px 0;padding:10px 14px;border-block:1px solid var(--border,#ddd);color:var(--muted,#666);font-size:12px;overflow-wrap:anywhere}.context-switch strong{font-weight:500}.context-switch time{margin-left:auto;font-size:11px}

#pcHistorySidebar{display:none}
@media(min-width:1024px){
 body{display:grid;grid-template-columns:260px minmax(0,1fr);height:100svh;overflow:hidden}
 body>main{width:100%;max-width:none;min-width:0;height:100svh;overflow:auto;margin:0;padding-left:clamp(24px,5vw,90px);padding-right:clamp(24px,5vw,90px)}
 #pcHistorySidebar{display:flex;flex-direction:column;min-width:0;height:100svh;padding:20px 14px;border-right:1px solid var(--border-soft);background:var(--surface)}
 #pcHistoryContent{display:flex;flex-direction:column;flex:1;min-height:0;gap:12px}
 #pcHistoryContent .drawer-head{padding:0 8px;margin-bottom:8px}
 #pcHistoryContent #historyClose,#historyButton{display:none}
 #pcHistoryContent h2{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:8px}
 #pcHistoryContent #conversations{display:block;overflow:auto;flex:1;min-height:0}
 #pcHistoryContent .conversation{margin-bottom:4px}
 #pcHistoryContent #logout{position:static;margin-top:auto;flex:none;width:100%}
 .pc-pages{display:grid;gap:4px;border-top:1px solid var(--border-soft);padding-top:12px;margin-top:12px}
 .pc-pages a{color:var(--muted);text-decoration:none;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600}
 .pc-pages a:hover,.pc-pages a[aria-current="page"]{background:var(--surface-3);color:var(--text)}
}

.bw-page-switch{display:flex!important;flex-wrap:nowrap!important;gap:4px;align-items:center;width:100%;padding:0 0 14px;margin:12px 0 0;border-bottom:1px solid var(--border);flex:none}
.bw-page-switch a{flex:1;text-align:center;text-decoration:none;padding:10px 4px!important;border:0;border-radius:14px;font-size:14px!important;font-weight:700;color:var(--muted);background:transparent;white-space:nowrap}
.bw-page-switch a:hover{color:var(--text);background:rgba(82,139,245,.08)}
.bw-page-switch a[aria-current="page"]{color:#578cfa;background:#121b2a}

#pcHistorySidebar>.bw-page-switch{display:none!important}@media(min-width:1024px){#pcHistoryContent>.bw-page-switch{margin-top:auto;border-color:var(--border-soft)}#pcHistoryContent #logout{margin-top:0}}

.bw-page-switch a{font-size:12px!important;padding:8px 4px!important}.bw-account{display:flex;gap:10px;align-items:center;min-width:0;padding:12px 0}.bw-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#1b2a44;color:#578cfa;font-weight:700;flex:none}.bw-account-copy{display:grid;gap:3px;min-width:0}.bw-account-copy strong{font-size:13px}.bw-account-copy small{font-size:12px;color:var(--muted)}.bw-account-copy strong,.bw-account-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:1024px){#pcHistoryContent #bw-account{margin-top:0}}

.bw-footer{display:flex!important;flex-direction:column!important;gap:0!important;margin-top:auto!important;padding-top:12px!important;flex:none;min-width:0;width:100%}
.bw-footer .bw-page-switch{display:flex!important;gap:4px!important;align-items:center;width:100%;padding:0 0 14px!important;margin:0!important;border-bottom:1px solid #2b2e35!important}
.bw-footer .bw-page-switch a{flex:1;text-align:center;text-decoration:none;padding:8px 4px!important;border:0;border-radius:14px;font-size:12px!important;line-height:20px;font-weight:700;color:#a9b0bc;background:transparent;white-space:nowrap}
.bw-footer .bw-page-switch a[aria-current="page"]{color:#578cfa;background:#121b2a}
.bw-footer .bw-account{display:flex;gap:10px;align-items:center;min-width:0;margin:0!important;padding:16px 4px!important}
.bw-footer .bw-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#1b2a44;color:#578cfa;font-weight:700;font-size:16px;flex:none}
.bw-footer .bw-account-copy{display:grid;gap:3px;min-width:0}
.bw-footer .bw-account-copy strong{font-size:13px;line-height:18px;font-weight:650;color:#f4f8ff}
.bw-footer .bw-account-copy small{font-size:12px;line-height:16px;color:#a9b0bc}
.bw-footer .bw-account-copy strong,.bw-footer .bw-account-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-footer button{position:static!important;margin:0!important;width:100%!important;min-width:0!important;height:40px!important;min-height:40px!important;border:1px solid #34373f!important;border-radius:12px!important;padding:8px!important;background:transparent!important;color:#f4f8ff!important;text-align:center!important;font-size:13px!important;line-height:20px!important;font-weight:500!important}
.bw-footer button[hidden],.bw-footer [hidden]{display:none!important}
@media(max-width:1023px){#pcFooter{display:none!important}}

.bw-footer{font:13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;background:#090a0d}

.bw-brand{display:flex;align-items:center;gap:12px}.bw-brand img{width:32px;height:32px;border-radius:8px;flex:none}.bw-brand strong{font-size:18px;line-height:24px;color:#f4f8ff}.bw-brand small{display:block;font-size:12px;color:#a9b0bc}.bw-chat-brand{padding:8px 4px 20px;flex:none}@media(min-width:1024px){header .bw-brand{display:none}}

.bw-footer,.bw-footer *{box-sizing:border-box}.bw-footer .bw-page-switch a{flex:1 1 0!important;max-width:none!important}.bw-footer button{max-width:none!important;align-self:stretch!important}

.bw-footer{padding-left:0!important;padding-right:0!important}

.bw-footer{border-top:0!important}

.bw-brand{gap:10px}.bw-brand strong{font-size:15px;line-height:21px}.bw-brand small{font-size:13px;margin-top:2px;color:#aaaeb8}.bw-chat-brand{padding:0 8px 20px}@media(min-width:1024px){#pcHistorySidebar{background:#090a0d;padding:19px 14px 15px}}

.service-device-name{font-weight:400;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-title{display:flex;align-items:center;gap:8px;min-width:0}@media(min-width:1024px){#pcHistoryContent .drawer-head{display:none}}