/* Cloud5060 UCC agent page: brand red #A31E2D, charcoal #232323 (same look as the earlier UCC). */
:root {
  --brand: #A31E2D; --charcoal: #232323; --brand-text: #A31E2D;
  --bg: #F4F4F5; --surface: #FFFFFF; --border: #E2E2E5; --text: #232323; --muted: #6B6B70; --focus: #A31E2D;
  --rail: 108px; --topbar: 52px; --radius: 8px;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 15px; color: var(--text);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #18181A; --surface: #232325; --border: #38383C; --text: #EDEDEF; --muted: #A1A1A8; --focus: #E0606E; --brand-text: #F07A86; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #18181A; --surface: #232325; --border: #38383C; --text: #EDEDEF; --muted: #A1A1A8; --focus: #E0606E; --brand-text: #F07A86; color-scheme: dark }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.app { display: grid; height: 100%; grid-template-columns: var(--rail) 1fr; grid-template-rows: var(--topbar) 1fr;
  grid-template-areas: "top top" "rail main"; }
.topbar { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 16px; background: var(--charcoal); color: #fff; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-name { font-size: 17px; letter-spacing: .2px; }
.brand-name strong { color: #F07A86; }
.topbar-right { display: flex; align-items: center; gap: 10px; font-size: 14px; min-width: 0; }
.who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line { width: 10px; height: 10px; border-radius: 50%; background: #8A8A90; flex: none; }
.line[data-state="on"] { background: #3FBF6A; }

.rail { grid-area: rail; display: flex; flex-direction: column; gap: 4px; padding: 8px 6px;
  background: var(--surface); border-right: 1px solid var(--border); }
.rail-btn { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border: 0;
  border-radius: var(--radius); background: transparent; color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer; }
.rail-btn svg { width: 22px; height: 22px; fill: currentColor; }
.rail-btn:hover { background: var(--bg); color: var(--text); }
.rail-btn[aria-current="page"] { color: var(--brand-text); background: color-mix(in srgb, var(--brand) 10%, transparent); font-weight: 600; }
.rail-dot { position: absolute; top: 8px; right: 30px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand);
  border: 2px solid var(--surface); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.35); } }

.main { grid-area: main; min-height: 0; padding: 16px; }
.view { height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.view iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--surface); }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; grid-template-rows: var(--topbar) 1fr 64px; grid-template-areas: "top" "main" "rail"; }
  .rail { flex-direction: row; justify-content: space-around; border-right: 0; border-top: 1px solid var(--border); padding: 4px; }
  .rail-btn { flex: 1; }
  .rail-dot { right: calc(50% - 22px); }
  .main { padding: 0; }
  .view { border: 0; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .rail-dot { animation: none; } }
.placeholder { display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; height: 100%; padding: 24px; color: var(--muted); }
.placeholder h2 { margin: 0; font-size: 17px; color: var(--text); }
.placeholder p { margin: 0; max-width: 46ch; }
.placeholder code { font-size: 13px; background: var(--bg); padding: 1px 5px; border-radius: 4px; }