:root {
--bg: #080b12;
--panel: rgba(16, 24, 39, 0.82);
--panel-2: rgba(22, 32, 52, 0.72);
--line: rgba(148, 163, 184, 0.18);
--text: #e5e7eb;
--muted: #94a3b8;
--green: #22c55e;
--red: #ef4444;
--amber: #f59e0b;
--blue: #38bdf8;
--purple: #a78bfa;
--safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 160px; }
body {
margin: 0;
min-height: 100vh;
color: var(--text);
background:
radial-gradient(circle at 20% 10%, rgba(56, 189, 248, 0.16), transparent 34%),
radial-gradient(circle at 80% 0%, rgba(167, 139, 250, 0.18), transparent 30%),
linear-gradient(180deg, #060914 0%, var(--bg) 100%);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-webkit-text-size-adjust: 100%;
}
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
padding: 24px clamp(16px, 4vw, 44px);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(18px);
position: sticky;
top: 0;
z-index: 5;
background: rgba(8, 11, 18, 0.74);
}
.eyebrow { color: var(--blue); text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; margin: 0 0 4px; }
h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.05em; }
button {
border: 1px solid var(--line);
background: linear-gradient(135deg, rgba(56,189,248,.16), rgba(167,139,250,.14));
color: var(--text);
border-radius: 12px;
padding: 10px 14px;
cursor: pointer;
font-weight: 700;
min-height: 42px;
}
button:hover { border-color: var(--blue); }
.device-mode {
border: 1px solid var(--line);
border-radius: 999px;
color: var(--blue);
background: rgba(56, 189, 248, .10);
padding: 5px 10px;
white-space: nowrap;
}
.top-actions { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .9rem; }
.mobile-tabs {
display: none;
gap: 8px;
overflow-x: auto;
padding: 10px clamp(16px, 4vw, 44px);
border-bottom: 1px solid var(--line);
background: rgba(8, 11, 18, .82);
backdrop-filter: blur(18px);
position: sticky;
top: 0;
z-index: 4;
scrollbar-width: none;
}
.mobile-tabs::-webkit-scrollbar { display: none; }
.mobile-tabs button {
flex: 0 0 auto;
min-height: 38px;
padding: 8px 12px;
border-radius: 999px;
font-size: .82rem;
}
main { padding: 24px clamp(16px, 4vw, 44px) 48px; max-width: 1600px; margin: 0 auto; }
.hero { display: grid; grid-template-columns: 380px 1fr; gap: 16px; margin-bottom: 16px; }
.glass, .panel, .metric {
border: 1px solid var(--line);
background: var(--panel);
box-shadow: 0 24px 80px rgba(0, 0, 0, .24);
backdrop-filter: blur(18px);
border-radius: 22px;
}
.identity-card { padding: 22px; display: flex; align-items: center; gap: 18px; min-height: 150px; }
.identity-card h2 { margin: 0 0 8px; font-size: 1.7rem; }
.identity-card p { margin: 0; color: var(--muted); }
.pulse { width: 54px; height: 54px; border-radius: 50%; background: var(--red); box-shadow: 0 0 30px var(--red); }
.pulse.ok { background: var(--green); box-shadow: 0 0 34px rgba(34,197,94,.75); }
.metrics { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 12px; }
.metric { padding: 16px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; }
.metric .label { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.metric .value { font-size: 1.8rem; font-weight: 900; letter-spacing: -.04em; }
.metric .detail { color: var(--muted); font-size: .86rem; line-height: 1.35; }
.metric.good { border-left: 4px solid var(--green); }
.metric.warn { border-left: 4px solid var(--amber); }
.metric.bad { border-left: 4px solid var(--red); }
.grid { display: grid; gap: 16px; margin-bottom: 16px; }
.grid.two { grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); }
.panel { padding: 18px; min-width: 0; }
.panel-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-title h2 { margin: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; }
.panel-title span { color: var(--muted); font-size: .82rem; }
.services { display: grid; gap: 10px; }
.service { display: flex; justify-content: space-between; gap: 12px; padding: 12px; background: rgba(15, 23, 42, .72); border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 14px; }
.service.ok { border-left-color: var(--green); }
.service.bad { border-left-color: var(--red); }
.service.warn { border-left-color: var(--amber); }
.service strong { display: block; }
.service small { color: var(--muted); }
.badge { align-self: start; border-radius: 999px; padding: 4px 9px; font-size: .75rem; background: rgba(148,163,184,.14); color: var(--muted); white-space: nowrap; }
.chat-panel { min-height: 620px; display: flex; flex-direction: column; }
.chat-log { flex: 1; min-height: 330px; overflow: auto; padding: 12px; border-radius: 16px; background: rgba(2, 6, 23, .55); border: 1px solid var(--line); margin-bottom: 12px; }
.msg { margin-bottom: 12px; max-width: 92%; padding: 12px 14px; border-radius: 14px; white-space: pre-wrap; line-height: 1.45; }
.msg.user { margin-left: auto; background: rgba(56, 189, 248, .16); border: 1px solid rgba(56, 189, 248, .22); }
.msg.assistant { background: rgba(34, 197, 94, .10); border: 1px solid rgba(34, 197, 94, .18); }
.msg.system { background: rgba(245, 158, 11, .10); border: 1px solid rgba(245, 158, 11, .18); color: #fde68a; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
textarea { width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 14px; background: rgba(2, 6, 23, .72); color: var(--text); padding: 12px; font: inherit; min-height: 46px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.quick button { font-size: .82rem; font-weight: 600; padding: 8px 10px; }
pre { margin: 0; max-height: 420px; overflow: auto; white-space: pre-wrap; word-break: break-word; background: rgba(2, 6, 23, .62); border: 1px solid var(--line); border-radius: 16px; padding: 14px; color: #cbd5e1; }
@media (max-width: 1100px) { .hero, .grid.two { grid-template-columns: 1fr; } .metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
body {
background:
radial-gradient(circle at 50% -10%, rgba(56, 189, 248, 0.18), transparent 36%),
linear-gradient(180deg, #060914 0%, var(--bg) 100%);
}
.topbar {
position: static;
align-items: flex-start;
flex-direction: column;
gap: 12px;
padding: 16px;
}
.eyebrow { font-size: .66rem; }
h1 { font-size: 2rem; }
.top-actions {
width: 100%;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 8px;
font-size: .78rem;
}
.device-mode { grid-column: 1 / -1; width: fit-content; }
main { padding: 14px 12px calc(28px + var(--safe-bottom)); }
.hero { gap: 10px; margin-bottom: 10px; }
.identity-card { min-height: 96px; padding: 16px; border-radius: 18px; }
.identity-card h2 { font-size: 1.18rem; }
.identity-card p { font-size: .82rem; word-break: break-word; }
.pulse { width: 38px; height: 38px; flex: 0 0 auto; }
.metrics {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 4px;
gap: 10px;
-webkit-overflow-scrolling: touch;
}
.metric {
min-width: 72vw;
min-height: 116px;
padding: 14px;
scroll-snap-align: start;
border-radius: 18px;
}
.metric .value { font-size: 1.45rem; }
.grid { gap: 10px; margin-bottom: 10px; }
.panel { padding: 14px; border-radius: 18px; }
.panel-title { display: block; margin-bottom: 10px; }
.panel-title h2 { font-size: .86rem; margin-bottom: 3px; }
.panel-title span { font-size: .74rem; }
.chat-panel { min-height: calc(100vh - 170px); }
.chat-log { min-height: 42vh; padding: 10px; border-radius: 14px; }
.msg { max-width: 100%; font-size: .92rem; padding: 10px 11px; }
.chat-form {
position: sticky;
bottom: var(--safe-bottom);
grid-template-columns: 1fr;
gap: 8px;
padding-top: 8px;
background: linear-gradient(180deg, rgba(8, 11, 18, 0), rgba(8, 11, 18, .92) 18%);
}
textarea {
min-height: 52px;
max-height: 34vh;
resize: none;
font-size: 16px;
}
.chat-form button, #refresh-btn { min-height: 48px; }
.quick { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.quick button { flex: 0 0 auto; max-width: 78vw; white-space: normal; text-align: left; }
.service { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 11px; }
.badge { justify-self: start; }
pre { max-height: 300px; font-size: .8rem; padding: 11px; }
}
.is-mobile .grid.two { grid-template-columns: 1fr; }
@media (min-width: 681px) {
.is-desktop .chat-log { min-height: 330px; }
}
/* Auto-detected mobile/desktop layout overrides. JS toggles html.is-mobile/html.is-desktop. */
.is-desktop .mobile-tabs { display: none; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
html.is-mobile { scroll-padding-top: 116px; }
.is-mobile body { padding-bottom: var(--safe-bottom); }
.is-mobile .topbar {
position: sticky;
top: 0;
z-index: 6;
padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 10px;
gap: 10px;
}
.is-mobile .top-actions {
width: 100%;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 8px;
}
.is-mobile #last-refresh {
grid-column: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.is-mobile #refresh-btn { grid-column: 2; grid-row: 1 / span 2; }
.is-mobile .device-mode { grid-column: 1; justify-self: start; }
.is-mobile .mobile-tabs {
display: flex;
top: 94px;
z-index: 5;
}
.is-mobile .panel, .is-mobile .glass, .is-mobile .metric { box-shadow: 0 12px 40px rgba(0,0,0,.22); }
.is-mobile .metrics { scrollbar-width: none; }
.is-mobile .metrics::-webkit-scrollbar { display: none; }
.is-mobile .chat-panel { min-height: min(74vh, 640px); }
.is-mobile .chat-log { max-height: 42vh; }
.is-mobile .chat-form button { width: 100%; }
.is-mobile .quick { scrollbar-width: none; }
.is-mobile .quick::-webkit-scrollbar { display: none; }
.is-mobile .quick button {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (min-width: 761px) {
.is-desktop .mobile-tabs { display: none; }
}

/* Mobile-first polish overrides */
.mobile-tabs button[aria-current="true"] {
  border-color: rgba(56, 189, 248, .72);
  background: linear-gradient(135deg, rgba(56,189,248,.34), rgba(167,139,250,.22));
  color: #f8fafc;
}

@media (hover: none) {
  button:hover { border-color: var(--line); }
  button:active { transform: scale(.985); border-color: var(--blue); }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 132px; }
  body { overflow-x: hidden; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 8;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 9px;
    background: rgba(8, 11, 18, .92);
  }

  .eyebrow { display: none; }
  h1 { font-size: 1.45rem; letter-spacing: -.04em; }

  .top-actions {
    grid-template-columns: minmax(0, 1fr) 96px;
    font-size: .76rem;
  }
  .device-mode {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #refresh-btn {
    min-height: 44px;
    padding-inline: 10px;
  }

  .mobile-tabs {
    display: flex;
    position: sticky;
    top: calc(77px + env(safe-area-inset-top, 0px));
    z-index: 7;
    padding: 8px 12px;
    background: rgba(8, 11, 18, .94);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  }

  .mobile-tabs button {
    min-height: 36px;
    padding: 7px 11px;
  }

  main {
    width: 100%;
    padding: 12px 10px calc(22px + var(--safe-bottom));
  }

  .hero {
    grid-template-columns: 1fr;
    margin-bottom: 10px;
  }

  .identity-card {
    min-height: unset;
    padding: 13px;
    gap: 12px;
  }
  .identity-card h2 { font-size: 1.05rem; }
  .identity-card p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
  }
  .metric {
    min-width: 0;
    min-height: 112px;
    padding: 12px;
  }
  .metric:first-child {
    grid-column: 1 / -1;
    min-height: 92px;
  }
  .metric .label { font-size: .64rem; }
  .metric .value { font-size: 1.18rem; }
  .metric .detail { font-size: .76rem; }

  .grid.two,
  .grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .panel,
  .glass,
  .metric {
    border-radius: 16px;
  }

  .panel { padding: 12px; }
  .panel-title h2 { font-size: .82rem; }
  .panel-title span { display: none; }

  .chat-panel {
    min-height: calc(100svh - 145px);
  }
  .chat-log {
    min-height: 38svh;
    max-height: 46svh;
    font-size: .92rem;
  }
  .chat-form {
    position: sticky;
    bottom: var(--safe-bottom);
    margin-inline: -4px;
    padding: 8px 4px 4px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(8,11,18,0), rgba(8,11,18,.96) 20%);
  }
  .chat-form button { min-height: 48px; }

  .quick {
    margin-inline: -2px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .quick::-webkit-scrollbar { display: none; }
  .quick button {
    flex: 0 0 auto;
    max-width: 84vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .service {
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
  }
  .service strong,
  .service small { overflow-wrap: anywhere; }

  pre {
    max-height: 52svh;
    font-size: .78rem;
    line-height: 1.35;
  }
}

@media (max-width: 380px) {
  .metrics { grid-template-columns: 1fr; }
  .metric:first-child { grid-column: auto; }
  h1 { font-size: 1.32rem; }
  .mobile-tabs { top: calc(72px + env(safe-area-inset-top, 0px)); }
}