a2acalling 0.6.75 → 0.6.76

package/.claude/worktrees/agent-acefedbd/.claude/worktrees/agent-aa4cd927/src/dashboard/public/style.css

@@ -0,0 +1,1274 @@
+/* A2A-47: Dark theme CSS custom properties replacing light theme */
+:root {
+  --bg: #0B0E14;
+  --panel: #151B28;
+  --ink: #e2e8f0;
+  --ink-muted: #94a3b8;
+  --line: rgba(255, 255, 255, 0.08);
+  --accent: #3B82F6;
+  --sidebar-bg: #0F131C;
+  --card-bg: #1E2738;
+
+  /* Map app vars to Shoelace design tokens */
+  --sl-color-primary-600: var(--accent);
+  --sl-font-sans: "Inter", "IBM Plex Sans", "Segoe UI", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--sl-font-sans);
+  color: var(--ink);
+  background: var(--bg);
+}
+
+/* A2A-47: Panel-based layout — only active panel is visible */
+.panel {
+  display: none;
+}
+
+.panel.active {
+  display: block;
+}
+
+/* ── A2A-47: Fixed sidebar navigation ──────────────────────── */
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 256px;
+  height: 100vh;
+  background: var(--sidebar-bg);
+  border-right: 1px solid var(--line);
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+  overflow-y: auto;
+}
+
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 1.2rem 1rem;
+  border-bottom: 1px solid var(--line);
+}
+
+.brand-icon {
+  font-size: 1.5rem;
+  color: var(--accent);
+}
+
+.brand-text {
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--ink);
+  white-space: nowrap;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 0;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.65rem 1rem;
+  color: var(--ink-muted);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+  border-right: 3px solid transparent;
+  font-size: 0.9rem;
+  user-select: none;
+}
+
+.nav-item:hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--ink);
+}
+
+/* A2A-47: Active nav item — blue tint background + right border facing content */
+.nav-item.active {
+  background: rgba(59, 130, 246, 0.15);
+  border-right: 3px solid #3B82F6;
+  color: var(--ink);
+}
+
+.nav-icon {
+  font-size: 1.25rem;
+}
+
+.nav-label {
+  white-space: nowrap;
+}
+
+/* ── A2A-47: Main content area offset by sidebar ──────────── */
+.main-content {
+  margin-left: 256px;
+  min-height: 100vh;
+  position: relative;
+  overflow: hidden;
+}
+
+/* A2A-47: Decorative gradient orbs for visual depth */
+.bg-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(120px);
+  pointer-events: none;
+  opacity: 0.15;
+}
+
+.bg-orb-blue {
+  width: 500px;
+  height: 500px;
+  background: #3B82F6;
+  top: -150px;
+  right: -100px;
+}
+
+.bg-orb-purple {
+  width: 400px;
+  height: 400px;
+  background: #8B5CF6;
+  bottom: -100px;
+  left: -50px;
+}
+
+.content-header {
+  padding: 1.2rem 1.5rem 0.8rem;
+  position: relative;
+  z-index: 1;
+}
+
+.content-header h1 {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.content-body {
+  padding: 0 1.5rem 1.5rem;
+  position: relative;
+  z-index: 1;
+}
+
+h2,
+h3 {
+  margin-top: 0;
+  color: var(--ink);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.8rem;
+}
+
+.filters {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 0.6rem;
+  margin-bottom: 0.9rem;
+  /* A2A-49: Subtle background for filter areas */
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 0.8rem;
+}
+
+/* A2A-47: Glass-panel style for cards in dark theme */
+.glass-panel {
+  background: rgba(30, 41, 59, 0.4);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+}
+
+/* Shoelace sl-card spacing — dark theme overrides */
+sl-card {
+  margin-bottom: 0.9rem;
+  --padding: 0.75rem 0.8rem;
+}
+
+/* A2A-47: Let Shoelace dark theme handle card background instead of hardcoded light */
+sl-card::part(base) {
+  background: var(--card-bg);
+  border-color: var(--line);
+}
+
+/* Shoelace sl-details spacing */
+sl-details {
+  margin-bottom: 0.9rem;
+}
+
+/* Shoelace sl-input, sl-textarea, sl-select spacing */
+sl-input,
+sl-textarea,
+sl-select,
+sl-checkbox {
+  margin-bottom: 0.6rem;
+}
+
+/* Labels for inline wrapping around sl-select */
+label {
+  display: block;
+  margin-bottom: 0.6rem;
+  font-size: 0.9rem;
+  color: var(--ink-muted);
+}
+
+/* A2A-47: Tables with dark theme colors */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1rem;
+}
+
+th,
+td {
+  border: 1px solid var(--line);
+  padding: 0.45rem 0.5rem;
+  vertical-align: top;
+  text-align: left;
+  font-size: 0.85rem;
+}
+
+/* A2A-47: Dark header background replacing light #f8fafc */
+th {
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--ink-muted);
+  font-weight: 500;
+}
+
+/* A2A-47: Dark selected row replacing light #f0f7ff */
+tr[data-selected="1"] td {
+  background: rgba(59, 130, 246, 0.12);
+}
+
+/* Summary & transcript */
+.summary {
+  max-width: 500px;
+  white-space: pre-wrap;
+}
+
+.summary-pending {
+  color: var(--ink-muted);
+  margin: 0.25em 0 0.75em;
+}
+
+.transcript-details {
+  margin-top: 1em;
+}
+
+/* A2A-47: Dark transcript background replacing light #f9fafb */
+.transcript {
+  max-width: 600px;
+  white-space: pre-wrap;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  padding: 0.75em;
+  margin-top: 0.5em;
+  font-size: 0.85em;
+  max-height: 400px;
+  overflow-y: auto;
+  color: var(--ink);
+}
+
+.mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+}
+
+#logs-table td {
+  cursor: default;
+}
+
+/* A2A-49: Universal dark table row hover for all tabs.
+   Uses 0.04 to match the existing logs hover opacity from A2A-47. */
+table tbody tr:hover td {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+/* A2A-49: Contacts rows use buttons inside cells (not full-row click),
+   so they don't get cursor:pointer — only calls rows do. */
+
+/* A2A-49: Clickable table rows get pointer cursor */
+#calls-table tbody tr {
+  cursor: pointer;
+}
+
+#calls-table tbody tr:hover td {
+  background: rgba(59, 130, 246, 0.08);
+}
+
+/* A2A-47: Dark notice styling replacing light blue colors */
+#notice {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  padding: 0.7rem 0.8rem;
+  border-radius: 8px;
+  background: rgba(59, 130, 246, 0.2);
+  border: 1px solid rgba(59, 130, 246, 0.4);
+  color: #93c5fd;
+  display: none;
+  z-index: 200;
+  backdrop-filter: blur(8px);
+}
+
+/* Pin button for last-called contacts (sl-icon-button) */
+.pin-btn {
+  font-size: 1rem;
+  color: #64748b;
+}
+
+.pin-btn:hover {
+  color: var(--accent);
+}
+
+.pin-btn.pinned {
+  color: var(--accent);
+}
+
+/* ── A2A-41: Topic/Goal list rows — dark theme overrides ──── */
+.topic-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.5rem 0.6rem;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  margin-bottom: 0.4rem;
+  background: var(--card-bg);
+  cursor: grab;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+
+.topic-row:hover {
+  border-color: var(--accent);
+  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.15);
+}
+
+.topic-row.dragging {
+  opacity: 0.5;
+  border-style: dashed;
+}
+
+/* A2A-47: Dark inherited row replacing light #f8fafc */
+.topic-row.inherited {
+  opacity: 0.55;
+  background: rgba(255, 255, 255, 0.03);
+  cursor: default;
+  border-style: dashed;
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.topic-row.inherited .drag-handle,
+.topic-row.inherited .topic-delete-btn {
+  display: none;
+}
+
+.drag-handle {
+  color: #64748b;
+  cursor: grab;
+  user-select: none;
+  font-size: 1.1rem;
+  line-height: 1;
+  padding-top: 2px;
+}
+
+.topic-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.topic-header {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.topic-label {
+  flex: 1;
+  font-size: 0.9rem;
+}
+
+.topic-description {
+  margin-top: 0.35rem;
+  padding-left: 0.1rem;
+}
+
+.topic-desc-text {
+  font-size: 0.82rem;
+  color: var(--ink-muted);
+  margin: 0 0 0.3rem;
+  line-height: 1.4;
+}
+
+.inherited-badge {
+  font-size: 0.72rem;
+  color: #64748b;
+  font-style: italic;
+  margin-left: auto;
+}
+
+.add-item-btn {
+  width: 100%;
+  margin-top: 0.3rem;
+  border: 1px dashed var(--line);
+  border-radius: 6px;
+  padding: 0.4rem;
+  background: transparent;
+  color: #64748b;
+  cursor: pointer;
+  font-size: 0.85rem;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.add-item-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* ── A2A-48: Permissions tab layout ────────────────────────── */
+/* A2A-48: flex row for main content + right sidebar. The sidebar is fixed
+   width and hidden on narrow viewports to keep the main area usable. */
+.perm-layout {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.perm-main {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  max-width: 900px;
+}
+
+.perm-sidebar {
+  width: 280px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  max-height: calc(100vh - 120px);
+}
+
+.perm-section {
+  margin-bottom: 1.5rem;
+}
+
+.perm-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.6rem;
+}
+
+.perm-section-header h2 {
+  margin: 0;
+}
+
+.perm-hint {
+  font-size: 0.78rem;
+  color: var(--ink-muted);
+  font-style: italic;
+}
+
+.perm-add-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: none;
+  border: none;
+  color: var(--accent);
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 0.3rem 0.5rem;
+  border-radius: 6px;
+  transition: background 0.15s ease;
+}
+
+.perm-add-btn:hover {
+  background: rgba(59, 130, 246, 0.1);
+}
+
+/* ── A2A-48: Tier cards grid ──────────────────────────────── */
+.tier-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 0.75rem;
+}
+
+.tier-card {
+  position: relative;
+  background: rgba(30, 39, 56, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  height: 96px;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.tier-card:hover {
+  background: rgba(30, 39, 56, 0.8);
+  border-color: rgba(255, 255, 255, 0.18);
+}
+
+/* A2A-48: Active tier card gets a gradient glow border via pseudo-element
+   with blur, matching the concept mock's neon glow effect. */
+.tier-card.active {
+  border-color: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 12px rgba(59, 130, 246, 0.25), 0 0 4px rgba(59, 130, 246, 0.15);
+}
+
+.tier-card.active::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #3B82F6, #06B6D4);
+  opacity: 0.5;
+  filter: blur(6px);
+  z-index: -1;
+}
+
+.tier-card .status-dot {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+.tier-card-icon {
+  font-size: 1.5rem;
+}
+
+.tier-card-name {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+/* ── A2A-48: Toggle switch cards (replacing checkboxes) ────── */
+.tool-toggles-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 0.75rem;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-switch .slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #374151;
+  transition: 0.3s;
+  border-radius: 24px;
+}
+
+.toggle-switch .slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.3s;
+  border-radius: 50%;
+}
+
+.toggle-switch input:checked + .slider {
+  background-color: #3B82F6;
+  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
+}
+
+.toggle-switch input:checked + .slider:before {
+  transform: translateX(20px);
+}
+
+.tool-toggle-card {
+  background: rgba(30, 41, 59, 0.4);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  padding: 1rem 1.2rem;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.tool-toggle-card:hover {
+  background: rgba(30, 41, 59, 0.6);
+}
+
+/* A2A-48: Enabled tool card gets subtle blue border glow to match concept mock */
+.tool-toggle-card.enabled {
+  border-color: rgba(59, 130, 246, 0.3);
+  box-shadow: 0 0 15px rgba(59, 130, 246, 0.1);
+}
+
+.tool-toggle-info {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.tool-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 1.3rem;
+}
+
+.tool-toggle-card h3 {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--ink);
+}
+
+.tool-toggle-card p {
+  margin: 0.2rem 0 0;
+  font-size: 0.78rem;
+  color: var(--ink-muted);
+  max-width: 220px;
+}
+
+/* ── A2A-48: Configuration zones (topics + goals) ─────────── */
+.config-columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.config-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.config-col-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
+  padding: 0 0.25rem;
+}
+
+/* A2A-51: "+" button in column headers for adding topics/goals without sidebar */
+.col-header-add-btn {
+  margin-left: auto;
+  background: none;
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 4px;
+  color: var(--ink-muted);
+  cursor: pointer;
+  padding: 1px 4px;
+  display: flex;
+  align-items: center;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.col-header-add-btn:hover {
+  color: var(--ink);
+  border-color: rgba(255,255,255,0.3);
+}
+
+.config-col-header--teal {
+  color: #2DD4BF;
+}
+
+.config-col-header--yellow {
+  color: #FBBF24;
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-dot--teal {
+  background: #2DD4BF;
+  box-shadow: 0 0 8px rgba(45, 212, 191, 0.8);
+}
+
+.status-dot--yellow {
+  background: #FBBF24;
+  box-shadow: 0 0 8px rgba(250, 204, 21, 0.8);
+}
+
+.status-dot--green {
+  background: #10B981;
+  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
+}
+
+.count-badge {
+  font-size: 0.65rem;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  margin-left: auto;
+}
+
+.count-badge--teal {
+  background: rgba(45, 212, 191, 0.1);
+  color: #5EEAD4;
+  border: 1px solid rgba(45, 212, 191, 0.2);
+}
+
+.count-badge--yellow {
+  background: rgba(250, 204, 21, 0.1);
+  color: #FDE68A;
+  border: 1px solid rgba(250, 204, 21, 0.2);
+}
+
+/* A2A-48: Drop zone uses dashed SVG border matching the concept mock.
+   The SVG stroke approach avoids needing a separate border-image. */
+.perm-drop-zone {
+  min-height: 140px;
+  border-radius: 12px;
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  background: rgba(30, 39, 56, 0.3);
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%233B82F640' stroke-width='2' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+  transition: background-color 0.2s ease;
+}
+
+.perm-drop-zone.drag-over {
+  background-color: rgba(59, 130, 246, 0.08);
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%233B82F6' stroke-width='2' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+}
+
+.active-item-card {
+  position: relative;
+  background: var(--card-bg);
+  border-radius: 8px;
+  padding: 0.6rem 2.2rem 0.6rem 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: background 0.15s ease;
+}
+
+.active-item-card:hover {
+  background: rgba(37, 47, 66, 1);
+}
+
+/* A2A-48: Teal accent for topic cards with glow shadow */
+.active-item-card--teal {
+  border: 1px solid rgba(45, 212, 191, 0.5);
+  box-shadow: 0 0 12px rgba(45, 212, 191, 0.15);
+}
+
+/* A2A-48: Yellow accent for goal cards with glow shadow */
+.active-item-card--yellow {
+  border: 1px solid rgba(234, 179, 8, 0.5);
+  box-shadow: 0 0 12px rgba(234, 179, 8, 0.15);
+}
+
+.active-item-card .item-name {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.active-item-card .item-type-label {
+  font-size: 0.6rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.active-item-card--teal .item-type-label {
+  color: #2DD4BF;
+}
+
+.active-item-card--yellow .item-type-label {
+  color: #FBBF24;
+}
+
+.active-item-card .item-close-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background: none;
+  border: none;
+  color: var(--ink-muted);
+  cursor: pointer;
+  padding: 2px;
+  border-radius: 50%;
+  line-height: 1;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.active-item-card .item-close-btn:hover {
+  color: #f87171;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.drop-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 0.75rem;
+  margin-top: auto;
+  flex: 1;
+  min-height: 40px;
+}
+
+.drop-placeholder span {
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.2);
+  font-weight: 500;
+}
+
+/* ── A2A-48: Right sidebar ────────────────────────────────── */
+.preview-card {
+  background: linear-gradient(135deg, #1E293B, #0F172A);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 1.2rem;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 1.2rem;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+/* A2A-48: decorative gradient orbs inside the preview card */
+.preview-card::before {
+  content: '';
+  position: absolute;
+  top: -30px;
+  right: -30px;
+  width: 80px;
+  height: 80px;
+  background: rgba(59, 130, 246, 0.15);
+  border-radius: 50%;
+  filter: blur(20px);
+  pointer-events: none;
+}
+
+.preview-card::after {
+  content: '';
+  position: absolute;
+  bottom: -20px;
+  left: -20px;
+  width: 60px;
+  height: 60px;
+  background: rgba(139, 92, 246, 0.15);
+  border-radius: 50%;
+  filter: blur(20px);
+  pointer-events: none;
+}
+
+.preview-card-inner {
+  position: relative;
+  z-index: 1;
+}
+
+.preview-tier-badge {
+  display: inline-block;
+  font-size: 0.65rem;
+  padding: 0.15rem 0.5rem;
+  border-radius: 999px;
+  background: rgba(59, 130, 246, 0.1);
+  color: #60A5FA;
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  margin-top: 0.3rem;
+}
+
+.preview-summary {
+  font-size: 0.82rem;
+  color: var(--ink-muted);
+  line-height: 1.5;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 0.6rem;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  margin-top: 0.75rem;
+}
+
+.preview-summary strong {
+  color: var(--ink);
+}
+
+.preview-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.72rem;
+  color: var(--ink-muted);
+  padding-top: 0.5rem;
+  margin-top: 0.75rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.sidebar-list {
+  margin-bottom: 1rem;
+}
+
+.sidebar-list-header {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ink-muted);
+  margin-bottom: 0.5rem;
+}
+
+.sidebar-item {
+  background: rgba(30, 39, 56, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 0.5rem 0.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.4rem;
+  cursor: grab;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.sidebar-item:hover {
+  background: var(--card-bg);
+  border-color: rgba(255, 255, 255, 0.18);
+}
+
+.sidebar-item.dragging {
+  opacity: 0.5;
+}
+
+/* A2A-48: Active items in the sidebar are dimmed with dashed border and
+   non-draggable to indicate they are already in the active zone. */
+.sidebar-item.active-in-zone {
+  opacity: 0.5;
+  border-style: dashed;
+  cursor: default;
+  font-style: italic;
+}
+
+.sidebar-item .sidebar-item-name {
+  font-size: 0.82rem;
+  font-weight: 500;
+  color: var(--ink-muted);
+}
+
+.sidebar-item .sidebar-item-active-label {
+  font-size: 0.7rem;
+  color: var(--ink-muted);
+  font-style: italic;
+}
+
+.sidebar-add-btn {
+  width: 100%;
+  margin-top: 0.4rem;
+  padding: 0.45rem;
+  border: 1px dashed rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--ink-muted);
+  font-size: 0.78rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.3rem;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.sidebar-add-btn:hover {
+  color: var(--accent);
+  border-color: rgba(59, 130, 246, 0.4);
+}
+
+/* ── A2A-41: Validation warnings — adjusted for dark theme ── */
+.tier-warnings {
+  margin-bottom: 0.8rem;
+}
+
+.tier-warning {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.45rem 0.7rem;
+  border-radius: 6px;
+  font-size: 0.82rem;
+  margin-bottom: 0.3rem;
+}
+
+/* A2A-47: Warning colors darkened for dark theme */
+.tier-warning.warn {
+  background: rgba(245, 158, 11, 0.15);
+  border: 1px solid rgba(245, 158, 11, 0.4);
+  color: #fbbf24;
+}
+
+.tier-warning.danger {
+  background: rgba(239, 68, 68, 0.15);
+  border: 1px solid rgba(239, 68, 68, 0.4);
+  color: #f87171;
+}
+
+.tier-warning.info {
+  background: rgba(59, 130, 246, 0.15);
+  border: 1px solid rgba(59, 130, 246, 0.4);
+  color: #93c5fd;
+}
+
+/* ── A2A-41: Preview dialog ────────────────────────────────── */
+#preview-content h4 {
+  font-size: 0.88rem;
+  margin: 0.8rem 0 0.3rem;
+  color: var(--ink);
+}
+
+#preview-content h4:first-child {
+  margin-top: 0;
+}
+
+#preview-content ul {
+  margin: 0;
+  padding-left: 1.2rem;
+}
+
+#preview-content li {
+  font-size: 0.85rem;
+  margin-bottom: 0.25rem;
+  line-height: 1.4;
+}
+
+#preview-content li strong {
+  color: var(--ink);
+}
+
+/* A2A-49: Contact status colored badges */
+.contact-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.82rem;
+}
+
+.contact-status::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.contact-status[data-status="online"]::before {
+  background: #10B981;
+  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
+}
+
+.contact-status[data-status="offline"]::before {
+  background: #EF4444;
+  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
+}
+
+.contact-status[data-status="unknown"]::before {
+  background: #6B7280;
+}
+
+/* A2A-49: Log level color coding */
+.log-level {
+  font-size: 0.78rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.log-level[data-level="error"] {
+  color: #F87171;
+}
+
+.log-level[data-level="warn"] {
+  color: #FBBF24;
+}
+
+.log-level[data-level="info"] {
+  color: #60A5FA;
+}
+
+.log-level[data-level="debug"] {
+  color: #A78BFA;
+}
+
+.log-level[data-level="trace"] {
+  color: #6B7280;
+}
+
+/* A2A-49: Dark monospace code elements */
+code {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  padding: 0.1em 0.35em;
+  font-size: 0.85em;
+  color: #E2E8F0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+}
+
+/* A2A-49: pre.summary gets dark background. This SUPPLEMENTS the existing
+   .summary rule (max-width + white-space) — do NOT remove .summary. */
+pre.summary {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 0.75em;
+  color: var(--ink);
+}
+
+/* A2A-49: sl-details summary bar dark polish */
+sl-details::part(summary) {
+  font-weight: 500;
+  color: var(--ink);
+}
+
+sl-details::part(base) {
+  background: var(--card-bg);
+  border-color: var(--line);
+}
+
+/* A2A-49: Health card gets glass-panel treatment via CSS (not index.html).
+   The acceptance criterion requires glass-panel styling on #health-latest.
+   We target the sl-card shadow DOM part directly. */
+#health-latest::part(base) {
+  background: rgba(30, 41, 59, 0.4);
+  backdrop-filter: blur(12px);
+  border-color: rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+}
+
+/* A2A-49: Health tab — step icons and status reinforcement.
+   Shoelace badge variants (success/danger/warning) already provide
+   green/red/yellow colors in dark theme — no override needed. */
+#health-latest details ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+#health-latest details li {
+  padding: 0.3rem 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  font-size: 0.85rem;
+}
+
+#health-latest details li:last-child {
+  border-bottom: none;
+}
+
+/* A2A-49: Native <details> dark styling inside health cards */
+#health-latest details > summary {
+  cursor: pointer;
+  color: var(--ink-muted);
+  font-size: 0.85rem;
+  padding: 0.3rem 0;
+}
+
+#health-latest details > summary:hover {
+  color: var(--ink);
+}
+
+/* A2A-50: Glass styling for sl-dialog panels in the Permissions tab.
+   Uses ::part(panel) to style the shadow DOM of Shoelace dialogs while
+   preserving accessibility features (focus trap, ESC, ARIA). The codebase
+   already uses ::part(base) on sl-card (line 205) and sl-details (line 1152). */
+#create-item-dialog::part(panel),
+#preview-dialog::part(panel),
+#delete-confirm-dialog::part(panel),
+#new-tier-dialog::part(panel) {
+  background: rgba(30, 41, 59, 0.85);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+}
+
+/* ── A2A-48: Hide permissions sidebar below 1280px ─────────── */
+@media (max-width: 1280px) {
+  .perm-sidebar {
+    display: none;
+  }
+}
+
+/* A2A-48: Stack config columns on narrow screens */
+@media (max-width: 900px) {
+  .config-columns {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ── A2A-47: Responsive — sidebar collapses at 1024px ──────── */
+@media (max-width: 1024px) {
+  .sidebar {
+    width: 80px;
+  }
+
+  /* A2A-47: Hide labels, show only icons on narrow screens */
+  .brand-text,
+  .nav-label {
+    display: none;
+  }
+
+  .sidebar-brand {
+    justify-content: center;
+    padding: 1.2rem 0.5rem;
+  }
+
+  .nav-item {
+    justify-content: center;
+    padding: 0.65rem 0.5rem;
+    gap: 0;
+  }
+
+  .main-content {
+    margin-left: 80px;
+  }
+}