omni-notify-mcp 1.3.14 → 1.3.21

package/ui/public/style.css

@@ -1,794 +1,793 @@
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-:root {
-  --bg:      #0d0f12;
-  --surface: #14171c;
-  --border:  #242832;
-  --text:    #e6e8ec;
-  --text-2:  #9aa3b2;
-  --text-3:  #5a6478;
-  --accent:  #4ea3ff;     /* bright blue — readable, distinctly "interactive" */
-  --accent-h:#6fb6ff;
-  --accent-d:#1a3a5c;     /* dark variant for backgrounds */
-  --success: #4ade80;
-  --danger:  #f87171;
-  --warn:    #d4a857;     /* muted amber, was glaring orange */
-  --r:       8px;
-}
-
-html, body { height: 100%; }
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  background: var(--bg);
-  color: var(--text);
-  font-size: 13px;
-  line-height: 1.5;
-  display: flex;
-  flex-direction: column;
-}
-
-/* ── Header ──────────────────────────────────────────────────────────────── */
-
-header {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 0 20px;
-  height: 48px;
-  flex-shrink: 0;
-  background: var(--surface);
-  border-bottom: 1px solid var(--border);
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--accent);
-  white-space: nowrap;
-}
-
-.subtitle {
-  color: var(--text-3);
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.header-link {
-  color: var(--accent);
-  background: var(--accent-d);
-  border: 1px solid var(--accent);
-  font-size: 12px;
-  font-weight: 600;
-  text-decoration: none;
-  padding: 5px 12px;
-  border-radius: 6px;
-  transition: background .15s, color .15s;
-  white-space: nowrap;
-}
-.header-link:hover {
-  background: var(--accent);
-  color: white;
-}
-
-.os-tag {
-  font-size: 11px;
-  color: var(--warn);
-  background: #1c1500;
-  border: 1px solid #3a2e00;
-  border-radius: 5px;
-  padding: 1px 7px;
-  white-space: nowrap;
-}
-
-/* ── Main ────────────────────────────────────────────────────────────────── */
-
-main {
-  flex: 1;
-  padding: 14px 18px;
-  min-height: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
-/* ── Card list (left column) ─────────────────────────────────────────────── */
-
-.card-list {
-  flex: 1;
-  min-height: 0;
-  height: 100%;
-  overflow: auto;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  grid-auto-rows: min-content;
-  align-content: start;
-  gap: 12px;
-}
-
-/* Top half: single Configuration panel with two side-by-side subsections.
-   Bottom half: full-width activity log. */
-.config-panel {
-  display: flex;
-  flex-direction: row;
-  flex-shrink: 0;
-  /* Take ~60% of the vertical space so the log gets a real chunk too */
-  height: 62%;
-  min-height: 0;
-  border-radius: var(--r);
-  border: 1px solid var(--border);
-  background: var(--surface);
-  overflow: hidden;
-}
-
-.section {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 12px 14px 14px;
-  min-width: 0;
-  height: 100%;
-  overflow: hidden;
-}
-
-/* ── Master kill switch ──────────────────────────────────────────────────── */
-
-.mute-all-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  flex-shrink: 0;
-  padding: 9px 14px;
-  border-radius: var(--r);
-  border: 1px solid var(--border);
-  background: var(--surface);
-}
-.mute-all-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
-.mute-all-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
-.mute-all-text { display: flex; flex-direction: column; min-width: 0; }
-.mute-all-title { font-weight: 700; font-size: 13px; }
-.mute-all-sub { color: var(--text-2); font-size: 11px; }
-.mute-all-bar.muted {
-  border-color: var(--danger);
-  background: linear-gradient(0deg, rgba(248,113,113,.12), rgba(248,113,113,.12)), var(--surface);
-  box-shadow: inset 0 0 0 1px rgba(248,113,113,.4);
-}
-.mute-all-bar.muted .mute-all-title,
-.mute-all-bar.muted .mute-all-sub { color: var(--danger); }
-body.all-muted .config-panel { opacity: .6; }
-
-/* Channels has 4 cards → needs ~3× the room of Policies (which has 2 cards). */
-.section-channels { flex: 3 1 0; }
-.section-policies { flex: 2 1 0; }
-
-/* Divider between the two subsections — owned by the panel, not the sections */
-.section + .section {
-  border-left: 1px solid var(--border);
-}
-
-/* Subtle accent strip at the top of each subsection — color carries the
-   role, so the title text stays bright/legible (don't tint text). */
-.section-channels { box-shadow: inset 0 3px 0 0 #4ea3ff; }   /* bright blue */
-.section-policies { box-shadow: inset 0 3px 0 0 #d4a857; }   /* muted amber */
-
-.section-hd {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  padding: 4px 2px 10px;
-  border-bottom: 1px solid var(--border);
-}
-
-.section-hd-title {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--text);
-}
-
-.section-hd-sub {
-  font-size: 11px;
-  color: var(--text-2);
-  margin-left: auto;
-}
-
-/* ── Log section (right, fills remaining width) ──────────────────────────── */
-
-.log-section {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--r);
-  overflow: hidden;
-}
-
-.log-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 12px;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-/* Collapsible activity-log section (collapsed by default). */
-.log-collapse {
-  background: transparent; border: none; cursor: pointer; padding: 2px;
-  color: var(--text-3); display: inline-flex; align-items: center; flex-shrink: 0;
-}
-.log-collapse:hover { color: var(--text); }
-.log-chevron { width: 16px; height: 16px; transition: transform .2s; }
-.log-section.collapsed .log-chevron { transform: rotate(-90deg); }
-.log-section.collapsed { flex: 0 0 auto; }
-.log-section.collapsed .log-header { border-bottom: none; }
-.log-section.collapsed .log-panel,
-.log-section.collapsed .clients-panel { display: none !important; }
-/* When the log is collapsed, let the config panel grow into the freed space.
-   Keep flex-basis = its 62% height so the height:100% chain on .section /
-   .card-list stays resolvable (height:auto here collapsed the cards to 0). */
-main:has(.log-section.collapsed) .config-panel { flex: 1 1 auto; }
-
-.log-title {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--text-3);
-  text-transform: uppercase;
-  letter-spacing: .5px;
-}
-
-.log-tabs { display: flex; gap: 2px; flex-shrink: 0; }
-.log-tab {
-  font: inherit; font-size: 11px; font-weight: 700;
-  text-transform: uppercase; letter-spacing: .5px;
-  padding: 4px 10px; border: none; background: transparent;
-  color: var(--text-3); cursor: pointer;
-  display: inline-flex; align-items: center; gap: 7px;
-  border-bottom: 2px solid transparent;
-}
-.log-tab:hover { color: var(--text); }
-.log-tab-active { color: var(--text); border-bottom-color: var(--accent); }
-
-.clients-panel { flex: 1; overflow-y: auto; padding: 8px 12px; }
-.client-row {
-  display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap;
-  padding: 8px 10px; margin-bottom: 6px;
-  border: 1px solid var(--border); border-radius: 8px;
-}
-.client-tag {
-  font-family: monospace; font-weight: 700; color: var(--text);
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-  min-width: 0; flex: 1 1 auto;
-}
-.client-kinds { display: flex; gap: 4px; flex-shrink: 0; }
-.client-kind {
-  font-size: 9px; text-transform: uppercase; letter-spacing: .4px;
-  padding: 2px 6px; border-radius: 6px;
-  background: var(--border); color: var(--text-2);
-}
-.client-actions { display: flex; gap: 4px; flex-shrink: 0; margin-left: auto; }
-.client-actions .btn-sm { padding: 3px 9px; font-size: 11px; }
-.client-meta { flex-basis: 100%; color: var(--text-3); font-size: 11px; }
-.clients-empty { color: var(--text-3); text-align: center; padding: 24px 12px; font-size: 12px; }
-
-.session-pills {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex: 1;
-  justify-content: center;
-  flex-wrap: wrap;
-  overflow: hidden;
-}
-.pill {
-  font: inherit;
-  font-size: 11px;
-  padding: 3px 10px;
-  border-radius: 12px;
-  border: 1px solid var(--border);
-  background: transparent;
-  color: var(--text-2);
-  cursor: pointer;
-  transition: background .15s, color .15s, border-color .15s;
-  white-space: nowrap;
-}
-.pill:hover { border-color: var(--accent); color: var(--text); }
-.pill-active {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: #fff;
-}
-.pill { display: inline-flex; align-items: center; gap: 5px; }
-.pill-dot {
-  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
-}
-.pill-dot-live  { background: #4ade80; }
-.pill-dot-idle  { background: #facc15; }
-.pill-dot-stale { background: #f87171; }
-.pill-dismiss {
-  margin-left: 1px; font-size: 13px; line-height: 1;
-  opacity: .6; cursor: pointer;
-}
-.pill-dismiss:hover { opacity: 1; }
-
-/* ── Cards ───────────────────────────────────────────────────────────────── */
-
-.card {
-  width: auto;
-  max-width: 100%;
-  min-width: 0;
-  background: var(--surface);
-  border: 2px solid #4a4a5a;
-  border-radius: var(--r);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 2px 8px rgba(0,0,0,0.4);
-}
-
-.card-hd {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 14px;
-  gap: 8px;
-  flex-shrink: 0;
-  cursor: pointer;
-  user-select: none;
-  transition: background .1s;
-}
-.card-hd:hover { background: rgba(255,255,255,0.03); }
-.card.expanded .card-hd { border-bottom: 2px solid #4a4a5a; }
-.ch-meta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.ch-name { font-size: 14px; font-weight: 600; }
-
-.card-chevron {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  color: var(--text-3);
-  transition: transform .2s;
-}
-.card.expanded .card-chevron { transform: rotate(180deg); }
-
-.card-body {
-  padding: 12px 14px;
-  display: none;
-  flex-direction: column;
-  gap: 10px;
-  flex: 1;
-}
-.card.expanded .card-body { display: flex; }
-
-/* ── Channel icons ───────────────────────────────────────────────────────── */
-
-.channel-icon {
-  width: 26px; height: 26px;
-  border-radius: 6px;
-  display: flex; align-items: center; justify-content: center;
-  flex-shrink: 0;
-}
-.desktop-icon  { background: #0d1a2e; color: #60a5fa; }
-.gmail-icon    { background: #2e0d0d; color: #f87171; }
-.telegram-icon { background: #0d1e2e; color: #38bdf8; }
-.whatsapp-icon { background: #0d2e1a; color: #4ade80; }
-.sms-icon      { background: #1e0d2e; color: #c084fc; }
-.ntfy-icon     { background: #1a2e0d; color: #86efac; }
-.discord-icon  { background: #0d0d2e; color: #a5b4fc; }
-.slack-icon    { background: #2e2a0d; color: #fbbf24; }
-.teams-icon    { background: #0d1e2e; color: #7dd3fc; }
-
-/* ── Tags & badges ───────────────────────────────────────────────────────── */
-
-.tag {
-  font-size: 10px;
-  font-weight: 500;
-  background: #1a1a24;
-  border: 1px solid var(--border);
-  color: var(--text-3);
-  padding: 1px 6px;
-  border-radius: 20px;
-}
-
-.badge {
-  font-size: 10px;
-  font-weight: 600;
-  padding: 2px 8px;
-  border-radius: 20px;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-.badge-idle  { background: #1e1e24; color: var(--text-3); }
-.badge-ok    { background: #0d2e22; color: #34d399; }
-.badge-error { background: #2e0d0d; color: #f87171; }
-.badge-warn  { background: #2e200d; color: #fbbf24; }
-
-/* ── Setup guides ────────────────────────────────────────────────────────── */
-
-.guide {
-  background: #0d0d18;
-  border: 1px solid #252538;
-  border-radius: 7px;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-.guide summary {
-  padding: 7px 11px;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 11px;
-  color: var(--accent);
-  list-style: none;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-.guide summary::-webkit-details-marker { display: none; }
-.guide summary::before { content: "▶"; font-size: 8px; transition: transform .15s; }
-.guide[open] summary::before { transform: rotate(90deg); }
-.guide ol {
-  padding: 0 11px 10px 26px;
-  font-size: 11px;
-  color: var(--text-2);
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  line-height: 1.5;
-}
-.guide a { color: var(--accent); }
-
-code.cp {
-  display: inline-block;
-  background: #1a1a2e;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 1px 6px;
-  font-family: monospace;
-  font-size: 10px;
-  cursor: pointer;
-}
-code.cp:hover { background: #22223a; }
-code.cp::after { content: " 📋"; font-size: 9px; }
-
-/* ── Form fields ─────────────────────────────────────────────────────────── */
-
-.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
-.fg   { display: flex; flex-direction: column; gap: 4px; }
-
-.fg label, label.lbl {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-3);
-  text-transform: uppercase;
-  letter-spacing: .4px;
-}
-
-input[type="text"],
-input[type="email"],
-input[type="tel"],
-input[type="password"],
-input[type="number"],
-input[type="time"] {
-  width: 100%;
-  padding: 8px 11px;
-  border: 2px solid #7a7a95;
-  border-radius: 7px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #ffffff;
-  background: #55556a;
-  outline: none;
-  transition: border-color .15s, box-shadow .15s;
-  color-scheme: dark;
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
-}
-input::placeholder { color: #cdcdda; opacity: 1; }
-
-select {
-  width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-  padding: 8px 11px;
-  border: 2px solid #7a7a95;
-  border-radius: 7px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #ffffff;
-  background: #55556a;
-  outline: none;
-  transition: border-color .15s, box-shadow .15s;
-  color-scheme: dark;
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
-  cursor: pointer;
-  text-overflow: ellipsis;
-}
-select:hover { border-color: #9a9ab5; }
-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124,109,250,.15); }
-input[type="text"]:hover,
-input[type="email"]:hover,
-input[type="tel"]:hover,
-input[type="password"]:hover,
-input[type="number"]:hover,
-input[type="time"]:hover {
-  border-color: #9a9ab5;
-}
-input:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px rgba(124,109,250,.15);
-}
-
-/* Day-of-week + other inline checkbox labels (e.g. DND days selector) */
-#dnd-days label,
-.day-pick label {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  border: 2px solid #7a7a95;
-  border-radius: 6px;
-  font-size: 12px;
-  color: #ffffff;
-  background: #55556a;
-  cursor: pointer;
-  user-select: none;
-  transition: background .15s, border-color .15s;
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
-}
-#dnd-days label:hover,
-.day-pick label:hover {
-  background: #6a6a82;
-  border-color: var(--accent);
-}
-#dnd-days input[type="checkbox"],
-.day-pick input[type="checkbox"] {
-  accent-color: var(--accent);
-  width: 16px;
-  height: 16px;
-  margin: 0;
-}
-
-/* Hint text next to threshold inputs */
-p.hint {
-  color: #888;
-  font-size: 12px;
-  margin: 4px 0 0 0;
-  line-height: 1.4;
-}
-p.hint code {
-  background: #55556a;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 11px;
-  color: #ffffff;
-  border: 1px solid #7a7a95;
-}
-
-/* ── Toggle ──────────────────────────────────────────────────────────────── */
-
-.toggle-wrap {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-}
-.toggle-wrap input { display: none; }
-.toggle {
-  width: 34px; height: 19px;
-  background: var(--border);
-  border-radius: 20px;
-  position: relative;
-  transition: background .15s;
-  flex-shrink: 0;
-}
-.toggle::after {
-  content: "";
-  position: absolute;
-  width: 13px; height: 13px;
-  background: #fff;
-  border-radius: 50%;
-  top: 3px; left: 3px;
-  transition: transform .15s;
-  box-shadow: 0 1px 2px rgba(0,0,0,.3);
-}
-.toggle-wrap input:checked + .toggle { background: var(--accent); }
-.toggle-wrap input:checked + .toggle::after { transform: translateX(15px); }
-.toggle-lbl { font-size: 12px; color: var(--text-2); margin-left: 6px; }
-
-/* ── Buttons ─────────────────────────────────────────────────────────────── */
-
-.actions {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  flex-wrap: wrap;
-  padding-bottom: 4px;
-}
-
-.btn {
-  padding: 7px 14px;
-  border-radius: 7px;
-  font-size: 13px;
-  font-weight: 600;
-  border: none;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  white-space: nowrap;
-  transition: all .15s;
-}
-.btn-sm { padding: 6px 12px; font-size: 12px; }
-.btn:disabled { opacity: .4; cursor: not-allowed; }
-
-.btn-primary { background: var(--accent); color: #fff; }
-.btn-primary:hover:not(:disabled) { background: var(--accent-h); }
-
-.btn-ghost { background: #1a1a22; color: var(--text-2); border: 1px solid var(--border); }
-.btn-ghost:hover:not(:disabled) { background: #222230; }
-
-.btn-danger { background: transparent; color: #f87171; border: 1px solid #3d1515; }
-.btn-danger:hover:not(:disabled) { background: #2e0d0d; }
-
-.btn-google { background: #1a1a22; color: var(--text); border: 1px solid var(--border); }
-.btn-google:hover:not(:disabled) { background: #222230; }
-
-/* ── Connected banner ────────────────────────────────────────────────────── */
-
-.ok-banner {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  background: #0d2e22;
-  border: 1px solid #134e35;
-  border-radius: 7px;
-  padding: 8px 12px;
-  font-size: 13px;
-  color: #34d399;
-}
-
-/* ── gcloud panel ────────────────────────────────────────────────────────── */
-
-.gcloud-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 11px;
-  border-radius: 7px;
-  font-size: 12px;
-  border: 1px solid var(--border);
-  background: #111118;
-}
-.gcloud-row .status-text { flex: 1; color: var(--text-2); }
-.gcloud-row .status-account { font-weight: 600; }
-
-.dot {
-  width: 7px; height: 7px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-.dot-ok   { background: var(--success); box-shadow: 0 0 5px var(--success); }
-.dot-warn { background: var(--warn); box-shadow: 0 0 5px var(--warn); }
-.dot-idle { background: var(--text-3); }
-.dot-spin {
-  background: transparent;
-  border: 2px solid var(--accent);
-  border-top-color: transparent;
-  animation: spin .7s linear infinite;
-}
-@keyframes spin { to { transform: rotate(360deg); } }
-
-.log-panel {
-  flex: 1;
-  overflow-y: auto;
-  padding: 6px 12px;
-  font-family: monospace;
-  font-size: 11px;
-  line-height: 1.7;
-}
-
-.log-entry { display: flex; gap: 8px; align-items: baseline; }
-.log-ts    { color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
-.log-client { color: var(--accent); font-weight: 700; white-space: nowrap; flex-shrink: 0; }
-.log-dir-out  { color: #38bdf8; flex-shrink: 0; }
-.log-dir-in   { color: #4ade80; flex-shrink: 0; }
-.log-dir-info { color: var(--text-3); flex-shrink: 0; }
-.log-channel  { color: #fbbf24; white-space: nowrap; flex-shrink: 0; }
-.log-msg      { color: var(--text-2); word-break: break-word; }
-
-/* ── Toast ───────────────────────────────────────────────────────────────── */
-
-.toast {
-  position: fixed;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: #1a202c;
-  color: #fff;
-  padding: 9px 18px;
-  border-radius: 8px;
-  font-size: 12px;
-  font-weight: 500;
-  box-shadow: 0 4px 20px rgba(0,0,0,.5);
-  z-index: 1000;
-  transition: opacity .2s, transform .2s;
-}
-.toast.toast-ok    { background: #065f46; }
-.toast.toast-error { background: #7f1d1d; }
-.toast.hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(8px); }
-
-.hidden { display: none !important; }
-
-/* ── Multi-destination chips + checklist pickers ─────────────────────────── */
-
-.chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; align-items: center; }
-.chip {
-  display: inline-flex; align-items: center; gap: 6px;
-  background: var(--accent-d); border: 1px solid var(--accent);
-  color: var(--text); font-size: 12px; font-weight: 600;
-  padding: 3px 7px 3px 10px; border-radius: 14px; max-width: 100%;
-}
-.chip-x { cursor: pointer; font-size: 15px; line-height: 1; opacity: .65; }
-.chip-x:hover { opacity: 1; }
-.chip-empty { color: var(--text-3); font-size: 12px; font-style: italic; }
-
-.dest-add { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
-
-.picker {
-  border: 1px solid var(--border); border-radius: 7px;
-  background: #0d0d18; padding: 5px; max-height: 190px; overflow-y: auto;
-  display: flex; flex-direction: column; gap: 2px;
-}
-.picker-item {
-  display: flex; align-items: center; gap: 8px;
-  padding: 5px 8px; border-radius: 5px; cursor: pointer; font-size: 12px;
-  color: var(--text);
-}
-.picker-item:hover { background: rgba(255,255,255,0.05); }
-.picker-item input { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
-.picker-actions {
-  display: flex; gap: 6px; padding: 6px 2px 2px;
-  position: sticky; bottom: 0; background: #0d0d18;
-}
-.picker-empty { color: var(--text-3); font-size: 12px; padding: 8px; }
-.picker-note { color: var(--text-2); font-size: 11px; padding: 6px 8px; line-height: 1.45; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
-.picker-note a { color: var(--accent); font-weight: 600; }
-.picker-note code { background: #1a1a2e; padding: 1px 5px; border-radius: 4px; }
-
-/* ── Compact layout — narrow widths (VS Code activity-bar panel) ──────────── */
-/* The same UI is embedded as-is in the VS Code extension webview. At a narrow
-   width it collapses to a single scrolling column so it fits the side panel. */
-
-@media (max-width: 620px) {
-  html, body { height: auto; }
-  body { font-size: 12px; }
-
-  header { padding: 0 12px; min-height: 44px; gap: 8px; flex-wrap: wrap; }
-  .subtitle { display: none; }
-
-  main { padding: 8px; gap: 8px; overflow: visible; }
-
-  .config-panel { flex-direction: column; height: auto; overflow: visible; }
-  .section { height: auto; overflow: visible; padding: 10px 10px 12px; }
-  .section + .section { border-left: none; border-top: 1px solid var(--border); }
-
-  .card-list { grid-template-columns: 1fr; height: auto; overflow: visible; gap: 8px; }
-  .row2 { grid-template-columns: 1fr; }
-
-  .log-section { min-height: 220px; }
-}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg:      #0d0f12;
+  --surface: #14171c;
+  --border:  #242832;
+  --text:    #e6e8ec;
+  --text-2:  #9aa3b2;
+  --text-3:  #5a6478;
+  --accent:  #4ea3ff;     /* bright blue — readable, distinctly "interactive" */
+  --accent-h:#6fb6ff;
+  --accent-d:#1a3a5c;     /* dark variant for backgrounds */
+  --success: #4ade80;
+  --danger:  #f87171;
+  --warn:    #d4a857;     /* muted amber, was glaring orange */
+  --r:       8px;
+}
+
+html, body { height: 100%; }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 13px;
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Header ──────────────────────────────────────────────────────────────── */
+
+header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 0 20px;
+  height: 48px;
+  flex-shrink: 0;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--accent);
+  white-space: nowrap;
+}
+
+.subtitle {
+  color: var(--text-3);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.header-link {
+  color: var(--accent);
+  background: var(--accent-d);
+  border: 1px solid var(--accent);
+  font-size: 12px;
+  font-weight: 600;
+  text-decoration: none;
+  padding: 5px 12px;
+  border-radius: 6px;
+  transition: background .15s, color .15s;
+  white-space: nowrap;
+}
+.header-link:hover {
+  background: var(--accent);
+  color: white;
+}
+
+.os-tag {
+  font-size: 11px;
+  color: var(--warn);
+  background: #1c1500;
+  border: 1px solid #3a2e00;
+  border-radius: 5px;
+  padding: 1px 7px;
+  white-space: nowrap;
+}
+
+/* ── Main ────────────────────────────────────────────────────────────────── */
+
+main {
+  flex: 1;
+  padding: 14px 18px;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+/* ── Card list (left column) ─────────────────────────────────────────────── */
+
+.card-list {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  overflow: auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  grid-auto-rows: min-content;
+  align-content: start;
+  gap: 12px;
+}
+
+/* Top half: single Configuration panel with two side-by-side subsections.
+   Bottom half: full-width activity log. */
+.config-panel {
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  /* Take ~60% of the vertical space so the log gets a real chunk too */
+  height: 62%;
+  min-height: 0;
+  border-radius: var(--r);
+  border: 1px solid var(--border);
+  background: var(--surface);
+  overflow: hidden;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 14px 14px;
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* ── Master kill switch ──────────────────────────────────────────────────── */
+
+.mute-all-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-shrink: 0;
+  padding: 9px 14px;
+  border-radius: var(--r);
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+.mute-all-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.mute-all-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
+.mute-all-text { display: flex; flex-direction: column; min-width: 0; }
+.mute-all-title { font-weight: 700; font-size: 13px; }
+.mute-all-sub { color: var(--text-2); font-size: 11px; }
+.mute-all-bar.muted {
+  border-color: var(--danger);
+  background: linear-gradient(0deg, rgba(248,113,113,.12), rgba(248,113,113,.12)), var(--surface);
+  box-shadow: inset 0 0 0 1px rgba(248,113,113,.4);
+}
+.mute-all-bar.muted .mute-all-title,
+.mute-all-bar.muted .mute-all-sub { color: var(--danger); }
+body.all-muted .config-panel { opacity: .6; }
+
+/* Channels has 4 cards → needs ~3× the room of Policies (which has 2 cards). */
+.section-channels { flex: 3 1 0; }
+.section-policies { flex: 2 1 0; }
+
+/* Divider between the two subsections — owned by the panel, not the sections */
+.section + .section {
+  border-left: 1px solid var(--border);
+}
+
+/* Subtle accent strip at the top of each subsection — color carries the
+   role, so the title text stays bright/legible (don't tint text). */
+.section-channels { box-shadow: inset 0 3px 0 0 #4ea3ff; }   /* bright blue */
+.section-policies { box-shadow: inset 0 3px 0 0 #d4a857; }   /* muted amber */
+
+.section-hd {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 4px 2px 10px;
+  border-bottom: 1px solid var(--border);
+}
+
+.section-hd-title {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text);
+}
+
+.section-hd-sub {
+  font-size: 11px;
+  color: var(--text-2);
+  margin-left: auto;
+}
+
+/* ── Log section (right, fills remaining width) ──────────────────────────── */
+
+.log-section {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  overflow: hidden;
+}
+
+.log-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+/* Collapsible activity-log section (collapsed by default). */
+.log-collapse {
+  background: transparent; border: none; cursor: pointer; padding: 2px;
+  color: var(--text-3); display: inline-flex; align-items: center; flex-shrink: 0;
+}
+.log-collapse:hover { color: var(--text); }
+.log-chevron { width: 16px; height: 16px; transition: transform .2s; }
+.log-section.collapsed .log-chevron { transform: rotate(-90deg); }
+.log-section.collapsed { flex: 0 0 auto; }
+.log-section.collapsed .log-header { border-bottom: none; }
+.log-section.collapsed .log-panel,
+.log-section.collapsed .clients-panel { display: none !important; }
+/* When the log is collapsed, let the config panel grow into the freed space.
+   Keep flex-basis = its 62% height so the height:100% chain on .section /
+   .card-list stays resolvable (height:auto here collapsed the cards to 0). */
+main:has(.log-section.collapsed) .config-panel { flex: 1 1 auto; }
+
+.log-title {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-3);
+  text-transform: uppercase;
+  letter-spacing: .5px;
+}
+
+.log-tabs { display: flex; gap: 2px; flex-shrink: 0; }
+.log-tab {
+  font: inherit; font-size: 11px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: .5px;
+  padding: 4px 10px; border: none; background: transparent;
+  color: var(--text-3); cursor: pointer;
+  display: inline-flex; align-items: center; gap: 7px;
+  border-bottom: 2px solid transparent;
+}
+.log-tab:hover { color: var(--text); }
+.log-tab-active { color: var(--text); border-bottom-color: var(--accent); }
+
+.clients-panel { flex: 1; overflow-y: auto; padding: 8px 12px; }
+.client-row {
+  display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap;
+  padding: 8px 10px; margin-bottom: 6px;
+  border: 1px solid var(--border); border-radius: 8px;
+}
+.client-tag {
+  font-family: monospace; font-weight: 700; color: var(--text);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  min-width: 0; flex: 1 1 auto;
+}
+.client-kinds { display: flex; gap: 4px; flex-shrink: 0; }
+.client-kind {
+  font-size: 9px; text-transform: uppercase; letter-spacing: .4px;
+  padding: 2px 6px; border-radius: 6px;
+  background: var(--border); color: var(--text-2);
+}
+.client-actions { display: flex; gap: 4px; flex-shrink: 0; margin-left: auto; }
+.client-actions .btn-sm { padding: 3px 9px; font-size: 11px; }
+.client-meta { flex-basis: 100%; color: var(--text-3); font-size: 11px; }
+.clients-empty { color: var(--text-3); text-align: center; padding: 24px 12px; font-size: 12px; }
+
+.session-pills {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  justify-content: center;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+.pill {
+  font: inherit;
+  font-size: 11px;
+  padding: 3px 10px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-2);
+  cursor: pointer;
+  transition: background .15s, color .15s, border-color .15s;
+  white-space: nowrap;
+}
+.pill:hover { border-color: var(--accent); color: var(--text); }
+.pill-active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+.pill { display: inline-flex; align-items: center; gap: 5px; }
+.pill-dot {
+  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
+}
+.pill-dot-live  { background: #4ade80; }
+.pill-dot-idle  { background: #facc15; }
+.pill-dot-stale { background: #f87171; }
+.pill-dismiss {
+  margin-left: 1px; font-size: 13px; line-height: 1;
+  opacity: .6; cursor: pointer;
+}
+.pill-dismiss:hover { opacity: 1; }
+
+/* ── Cards ───────────────────────────────────────────────────────────────── */
+
+.card {
+  width: auto;
+  max-width: 100%;
+  min-width: 0;
+  background: var(--surface);
+  border: 2px solid #4a4a5a;
+  border-radius: var(--r);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 2px 8px rgba(0,0,0,0.4);
+}
+
+.card-hd {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  gap: 8px;
+  flex-shrink: 0;
+  cursor: pointer;
+  user-select: none;
+  transition: background .1s;
+}
+.card-hd:hover { background: rgba(255,255,255,0.03); }
+.card.expanded .card-hd { border-bottom: 2px solid #4a4a5a; }
+.ch-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.ch-name { font-size: 14px; font-weight: 600; }
+
+.card-chevron {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  color: var(--text-3);
+  transition: transform .2s;
+}
+.card.expanded .card-chevron { transform: rotate(180deg); }
+
+.card-body {
+  padding: 12px 14px;
+  display: none;
+  flex-direction: column;
+  gap: 10px;
+  flex: 1;
+}
+.card.expanded .card-body { display: flex; }
+
+/* ── Channel icons ───────────────────────────────────────────────────────── */
+
+.channel-icon {
+  width: 26px; height: 26px;
+  border-radius: 6px;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.desktop-icon  { background: #0d1a2e; color: #60a5fa; }
+.gmail-icon    { background: #2e0d0d; color: #f87171; }
+.telegram-icon { background: #0d1e2e; color: #38bdf8; }
+.sms-icon      { background: #1e0d2e; color: #c084fc; }
+.ntfy-icon     { background: #1a2e0d; color: #86efac; }
+.discord-icon  { background: #0d0d2e; color: #a5b4fc; }
+.slack-icon    { background: #2e2a0d; color: #fbbf24; }
+.teams-icon    { background: #0d1e2e; color: #7dd3fc; }
+
+/* ── Tags & badges ───────────────────────────────────────────────────────── */
+
+.tag {
+  font-size: 10px;
+  font-weight: 500;
+  background: #1a1a24;
+  border: 1px solid var(--border);
+  color: var(--text-3);
+  padding: 1px 6px;
+  border-radius: 20px;
+}
+
+.badge {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 20px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.badge-idle  { background: #1e1e24; color: var(--text-3); }
+.badge-ok    { background: #0d2e22; color: #34d399; }
+.badge-error { background: #2e0d0d; color: #f87171; }
+.badge-warn  { background: #2e200d; color: #fbbf24; }
+
+/* ── Setup guides ────────────────────────────────────────────────────────── */
+
+.guide {
+  background: #0d0d18;
+  border: 1px solid #252538;
+  border-radius: 7px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.guide summary {
+  padding: 7px 11px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 11px;
+  color: var(--accent);
+  list-style: none;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.guide summary::-webkit-details-marker { display: none; }
+.guide summary::before { content: "▶"; font-size: 8px; transition: transform .15s; }
+.guide[open] summary::before { transform: rotate(90deg); }
+.guide ol {
+  padding: 0 11px 10px 26px;
+  font-size: 11px;
+  color: var(--text-2);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  line-height: 1.5;
+}
+.guide a { color: var(--accent); }
+
+code.cp {
+  display: inline-block;
+  background: #1a1a2e;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-family: monospace;
+  font-size: 10px;
+  cursor: pointer;
+}
+code.cp:hover { background: #22223a; }
+code.cp::after { content: " 📋"; font-size: 9px; }
+
+/* ── Form fields ─────────────────────────────────────────────────────────── */
+
+.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.fg   { display: flex; flex-direction: column; gap: 4px; }
+
+.fg label, label.lbl {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-3);
+  text-transform: uppercase;
+  letter-spacing: .4px;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="tel"],
+input[type="password"],
+input[type="number"],
+input[type="time"] {
+  width: 100%;
+  padding: 8px 11px;
+  border: 2px solid #7a7a95;
+  border-radius: 7px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #ffffff;
+  background: #55556a;
+  outline: none;
+  transition: border-color .15s, box-shadow .15s;
+  color-scheme: dark;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
+}
+input::placeholder { color: #cdcdda; opacity: 1; }
+
+select {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 8px 11px;
+  border: 2px solid #7a7a95;
+  border-radius: 7px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #ffffff;
+  background: #55556a;
+  outline: none;
+  transition: border-color .15s, box-shadow .15s;
+  color-scheme: dark;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
+  cursor: pointer;
+  text-overflow: ellipsis;
+}
+select:hover { border-color: #9a9ab5; }
+select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124,109,250,.15); }
+input[type="text"]:hover,
+input[type="email"]:hover,
+input[type="tel"]:hover,
+input[type="password"]:hover,
+input[type="number"]:hover,
+input[type="time"]:hover {
+  border-color: #9a9ab5;
+}
+input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(124,109,250,.15);
+}
+
+/* Day-of-week + other inline checkbox labels (e.g. DND days selector) */
+#dnd-days label,
+.day-pick label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: 2px solid #7a7a95;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #ffffff;
+  background: #55556a;
+  cursor: pointer;
+  user-select: none;
+  transition: background .15s, border-color .15s;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
+}
+#dnd-days label:hover,
+.day-pick label:hover {
+  background: #6a6a82;
+  border-color: var(--accent);
+}
+#dnd-days input[type="checkbox"],
+.day-pick input[type="checkbox"] {
+  accent-color: var(--accent);
+  width: 16px;
+  height: 16px;
+  margin: 0;
+}
+
+/* Hint text next to threshold inputs */
+p.hint {
+  color: #888;
+  font-size: 12px;
+  margin: 4px 0 0 0;
+  line-height: 1.4;
+}
+p.hint code {
+  background: #55556a;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  color: #ffffff;
+  border: 1px solid #7a7a95;
+}
+
+/* ── Toggle ──────────────────────────────────────────────────────────────── */
+
+.toggle-wrap {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+.toggle-wrap input { display: none; }
+.toggle {
+  width: 34px; height: 19px;
+  background: var(--border);
+  border-radius: 20px;
+  position: relative;
+  transition: background .15s;
+  flex-shrink: 0;
+}
+.toggle::after {
+  content: "";
+  position: absolute;
+  width: 13px; height: 13px;
+  background: #fff;
+  border-radius: 50%;
+  top: 3px; left: 3px;
+  transition: transform .15s;
+  box-shadow: 0 1px 2px rgba(0,0,0,.3);
+}
+.toggle-wrap input:checked + .toggle { background: var(--accent); }
+.toggle-wrap input:checked + .toggle::after { transform: translateX(15px); }
+.toggle-lbl { font-size: 12px; color: var(--text-2); margin-left: 6px; }
+
+/* ── Buttons ─────────────────────────────────────────────────────────────── */
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  flex-wrap: wrap;
+  padding-bottom: 4px;
+}
+
+.btn {
+  padding: 7px 14px;
+  border-radius: 7px;
+  font-size: 13px;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  white-space: nowrap;
+  transition: all .15s;
+}
+.btn-sm { padding: 6px 12px; font-size: 12px; }
+.btn:disabled { opacity: .4; cursor: not-allowed; }
+
+.btn-primary { background: var(--accent); color: #fff; }
+.btn-primary:hover:not(:disabled) { background: var(--accent-h); }
+
+.btn-ghost { background: #1a1a22; color: var(--text-2); border: 1px solid var(--border); }
+.btn-ghost:hover:not(:disabled) { background: #222230; }
+
+.btn-danger { background: transparent; color: #f87171; border: 1px solid #3d1515; }
+.btn-danger:hover:not(:disabled) { background: #2e0d0d; }
+
+.btn-google { background: #1a1a22; color: var(--text); border: 1px solid var(--border); }
+.btn-google:hover:not(:disabled) { background: #222230; }
+
+/* ── Connected banner ────────────────────────────────────────────────────── */
+
+.ok-banner {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  background: #0d2e22;
+  border: 1px solid #134e35;
+  border-radius: 7px;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: #34d399;
+}
+
+/* ── gcloud panel ────────────────────────────────────────────────────────── */
+
+.gcloud-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 11px;
+  border-radius: 7px;
+  font-size: 12px;
+  border: 1px solid var(--border);
+  background: #111118;
+}
+.gcloud-row .status-text { flex: 1; color: var(--text-2); }
+.gcloud-row .status-account { font-weight: 600; }
+
+.dot {
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.dot-ok   { background: var(--success); box-shadow: 0 0 5px var(--success); }
+.dot-warn { background: var(--warn); box-shadow: 0 0 5px var(--warn); }
+.dot-idle { background: var(--text-3); }
+.dot-spin {
+  background: transparent;
+  border: 2px solid var(--accent);
+  border-top-color: transparent;
+  animation: spin .7s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.log-panel {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px 12px;
+  font-family: monospace;
+  font-size: 11px;
+  line-height: 1.7;
+}
+
+.log-entry { display: flex; gap: 8px; align-items: baseline; }
+.log-ts    { color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
+.log-client { color: var(--accent); font-weight: 700; white-space: nowrap; flex-shrink: 0; }
+.log-dir-out  { color: #38bdf8; flex-shrink: 0; }
+.log-dir-in   { color: #4ade80; flex-shrink: 0; }
+.log-dir-info { color: var(--text-3); flex-shrink: 0; }
+.log-channel  { color: #fbbf24; white-space: nowrap; flex-shrink: 0; }
+.log-msg      { color: var(--text-2); word-break: break-word; }
+
+/* ── Toast ───────────────────────────────────────────────────────────────── */
+
+.toast {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #1a202c;
+  color: #fff;
+  padding: 9px 18px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  box-shadow: 0 4px 20px rgba(0,0,0,.5);
+  z-index: 1000;
+  transition: opacity .2s, transform .2s;
+}
+.toast.toast-ok    { background: #065f46; }
+.toast.toast-error { background: #7f1d1d; }
+.toast.hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(8px); }
+
+.hidden { display: none !important; }
+
+/* ── Multi-destination chips + checklist pickers ─────────────────────────── */
+
+.chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; align-items: center; }
+.chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  background: var(--accent-d); border: 1px solid var(--accent);
+  color: var(--text); font-size: 12px; font-weight: 600;
+  padding: 3px 7px 3px 10px; border-radius: 14px; max-width: 100%;
+}
+.chip-x { cursor: pointer; font-size: 15px; line-height: 1; opacity: .65; }
+.chip-x:hover { opacity: 1; }
+.chip-empty { color: var(--text-3); font-size: 12px; font-style: italic; }
+
+.dest-add { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
+
+.picker {
+  border: 1px solid var(--border); border-radius: 7px;
+  background: #0d0d18; padding: 5px; max-height: 190px; overflow-y: auto;
+  display: flex; flex-direction: column; gap: 2px;
+}
+.picker-item {
+  display: flex; align-items: center; gap: 8px;
+  padding: 5px 8px; border-radius: 5px; cursor: pointer; font-size: 12px;
+  color: var(--text);
+}
+.picker-item:hover { background: rgba(255,255,255,0.05); }
+.picker-item input { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
+.picker-actions {
+  display: flex; gap: 6px; padding: 6px 2px 2px;
+  position: sticky; bottom: 0; background: #0d0d18;
+}
+.picker-empty { color: var(--text-3); font-size: 12px; padding: 8px; }
+.picker-note { color: var(--text-2); font-size: 11px; padding: 6px 8px; line-height: 1.45; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
+.picker-note a { color: var(--accent); font-weight: 600; }
+.picker-note code { background: #1a1a2e; padding: 1px 5px; border-radius: 4px; }
+
+/* ── Compact layout — narrow widths (VS Code activity-bar panel) ──────────── */
+/* The same UI is embedded as-is in the VS Code extension webview. At a narrow
+   width it collapses to a single scrolling column so it fits the side panel. */
+
+@media (max-width: 620px) {
+  html, body { height: auto; }
+  body { font-size: 12px; }
+
+  header { padding: 0 12px; min-height: 44px; gap: 8px; flex-wrap: wrap; }
+  .subtitle { display: none; }
+
+  main { padding: 8px; gap: 8px; overflow: visible; }
+
+  .config-panel { flex-direction: column; height: auto; overflow: visible; }
+  .section { height: auto; overflow: visible; padding: 10px 10px 12px; }
+  .section + .section { border-left: none; border-top: 1px solid var(--border); }
+
+  .card-list { grid-template-columns: 1fr; height: auto; overflow: visible; gap: 8px; }
+  .row2 { grid-template-columns: 1fr; }
+
+  .log-section { min-height: 220px; }
+}