:root {
      --bg-main: #05060a;
      --bg-panel: #0d0e14;
      --bg-panel-alt: #13141c;
      --border-subtle: #1e202a;
      --accent: #4c8dff;
      --accent-soft: rgba(76, 141, 255, 0.14);
      --text-main: #e4e6f1;
      --text-muted: #8a8da0;
      --danger: #ff4c6a;
      --ok: #7fdc7f;
      --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: var(--bg-main);
      color: var(--text-main);
      font-family: var(--font-family);
    }

    body {
      display: flex;
      align-items: stretch;
      justify-content: stretch;
    }







/* Global scrollbar styling (exclude .device-view region) */

/* Firefox */
body,
.control-drawer,
.control-tab-panel,
.issues-list,
.links-hosts-list,
.autofix-changes-list,
.textarea-small,
.insights-panel,
.rendering-lab-drawer {
  scrollbar-width: thin;
  scrollbar-color: #3a3d57 #05060a; /* thumb, track */
}

/* WebKit / Blink */
body::-webkit-scrollbar,
.control-drawer::-webkit-scrollbar,
.control-tab-panel::-webkit-scrollbar,
.issues-list::-webkit-scrollbar,
.links-hosts-list::-webkit-scrollbar,
.autofix-changes-list::-webkit-scrollbar,
.textarea-small::-webkit-scrollbar,
.insights-panel::-webkit-scrollbar,
.rendering-lab-drawer::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body::-webkit-scrollbar-track,
.control-drawer::-webkit-scrollbar-track,
.control-tab-panel::-webkit-scrollbar-track,
.issues-list::-webkit-scrollbar-track,
.links-hosts-list::-webkit-scrollbar-track,
.autofix-changes-list::-webkit-scrollbar-track,
.textarea-small::-webkit-scrollbar-track,
.insights-panel::-webkit-scrollbar-track,
.rendering-lab-drawer::-webkit-scrollbar-track {
  background: #05060a;
}

body::-webkit-scrollbar-thumb,
.control-drawer::-webkit-scrollbar-thumb,
.control-tab-panel::-webkit-scrollbar-thumb,
.issues-list::-webkit-scrollbar-thumb,
.links-hosts-list::-webkit-scrollbar-thumb,
.autofix-changes-list::-webkit-scrollbar-thumb,
.textarea-small::-webkit-scrollbar-thumb,
.insights-panel::-webkit-scrollbar-thumb,
.rendering-lab-drawer::-webkit-scrollbar-thumb {
  background: #2b2d3f;
  border-radius: 999px;
}

body::-webkit-scrollbar-thumb:hover,
.control-drawer::-webkit-scrollbar-thumb:hover,
.control-tab-panel::-webkit-scrollbar-thumb:hover,
.issues-list::-webkit-scrollbar-thumb:hover,
.links-hosts-list::-webkit-scrollbar-thumb:hover,
.autofix-changes-list::-webkit-scrollbar-thumb:hover,
.textarea-small::-webkit-scrollbar-thumb:hover,
.insights-panel::-webkit-scrollbar-thumb:hover,
.rendering-lab-drawer::-webkit-scrollbar-thumb:hover {
  background: #4c8dff;
}

.issues-list::-webkit-scrollbar,
.links-hosts-list::-webkit-scrollbar,
.autofix-changes-list::-webkit-scrollbar,
.textarea-small::-webkit-scrollbar,
.insights-panel::-webkit-scrollbar,
.rendering-lab-drawer::-webkit-scrollbar,
.reporting-drawer::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body::-webkit-scrollbar-track,
.control-drawer::-webkit-scrollbar-track,
.control-tab-panel::-webkit-scrollbar-track,
.issues-list::-webkit-scrollbar-track,
.links-hosts-list::-webkit-scrollbar-track,
.autofix-changes-list::-webkit-scrollbar-track,
.textarea-small::-webkit-scrollbar-track,
.insights-panel::-webkit-scrollbar-track,
.rendering-lab-drawer::-webkit-scrollbar-track,
.reporting-drawer::-webkit-scrollbar-track {
  background: #05060a;
}

body::-webkit-scrollbar-thumb,
.control-drawer::-webkit-scrollbar-thumb,
.control-tab-panel::-webkit-scrollbar-thumb,
.issues-list::-webkit-scrollbar-thumb,
.links-hosts-list::-webkit-scrollbar-thumb,
.autofix-changes-list::-webkit-scrollbar-thumb,
.textarea-small::-webkit-scrollbar-thumb,
.insights-panel::-webkit-scrollbar-thumb,
.rendering-lab-drawer::-webkit-scrollbar-thumb,
.reporting-drawer::-webkit-scrollbar-thumb {
  background: #2b2d3f;
  border-radius: 999px;
}






 #email-preview-app {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;      /* was: column */
  align-items: stretch;     /* ensure full-height children */
  background: radial-gradient(circle at top left, #151726 0%, #05060a 55%);
  color: var(--text-main);
  font-size: 13px;
  overflow: hidden;
}

  .insights-panel-closed {
    display: none;
  }

    /* ============ CONTROL DRAWER (LEFT) ============ */

    .control-drawer {
      position: fixed;
      top: 0;
      left: 0;
      width: 500px;
      max-width: 100%;
      height: 100vh;
      border-right: 1px solid var(--border-subtle);
      background: linear-gradient(180deg, #11121c 0%, #05060a 100%);
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      overflow-y: auto;
      transform: translateX(0);
      transition: transform 0.25s ease-out;
      z-index: 30;
    }

    .control-drawer.closed {
      transform: translateX(-100%);
    }

    .drawer-close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 1px solid #2a2c3f;
      background: #151727;
      color: #d0d2eb;
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .drawer-close-btn:hover {
      background: #202235;
    }

    .control-header {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding-right: 32px;
    }

    .app-title {
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: #f0f2ff;
    }

    .app-subtitle {
      font-size: 11px;
      color: var(--text-muted);
    }

    .control-section {
      border-radius: 8px;
      border: 1px solid var(--border-subtle);
      background: rgba(5, 6, 10, 0.9);
      padding: 10px;
    }

    .control-section-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 8px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      cursor: pointer;
    }


    /* Device loading skeleton overlay */
    .device-frame-inner {
      position: absolute;
      inset: 20px 0 0 0;
      background: #0b1020; /* darker base so skeleton is obvious */
      display: flex;
      flex-direction: column;
    }

    .device-frame-inner::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease-out;
      z-index: 5; /* sit above header + iframe */
    }

    /* When loading, show shimmer skeleton and hide iframe content */
    body.devices-loading .device-frame-inner::before {
      opacity: 1;
      background: linear-gradient(
        90deg,
        #111827 0%,
        #4b5563 20%,
        #111827 40%
      );
      background-size: 200% 100%;
      animation: device-skeleton-shimmer 1.2s ease-in-out infinite;
    }

    body.devices-loading .device-iframe {
      opacity: 0;
    }

    .device-iframe {
      width: 100%;
      flex: 1 1 auto;
      border: none;
      background: #ffffff;
      transition: opacity 0.18s ease-out;
    }

    @keyframes device-skeleton-shimmer {
      0% {
        background-position: 200% 0;
      }
      100% {
        background-position: -200% 0;
      }
    }



    


    .chip {
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent);
      white-space: nowrap;
    }

    .chip-danger {
      background: rgba(255, 76, 106, 0.14);
      color: var(--danger);
    }

    .field-label {
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 4px;
          color: #afac2b;
    }

    .field-row {
      display: flex;
      gap: 6px;
      align-items: stretch;
    }

    .text-input {
      flex: 1;
      min-width: 0;
      border-radius: 6px;
      border: 1px solid var(--border-subtle);
      background: #05060a;
      color: var(--text-main);
      padding: 6px 8px;
      font-size: 12px;
      outline: none;
      appearance: none;
    }

    .text-input::placeholder {
      color: #595c6f;
    }

    .text-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px rgba(76, 141, 255, 0.35);
    }

    .btn {
      border: none;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 12px;
      cursor: pointer;
      white-space: nowrap;
      font-weight: 500;
      background: var(--accent);
      color: #ffffff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .btn:disabled {
      opacity: 0.6;
      cursor: default;
    }

    .btn-secondary {
      background: #151727;
      color: var(--text-main);
      border: 1px solid var(--border-subtle);
          border: 1px solid #7d8ddc;
    padding: 5px;
    }

    .persona-grid .btn-secondary {
     border: 1px solid #25263a;
      padding: 11px;
    }

    .btn-ghost {
      background: transparent;
      border: 1px solid #25263a;
      color: var(--text-muted);
      font-size: 11px;
      padding: 3px 7px;
      border-radius: 999px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .btn-ghost:hover {
      background: #151627;
      color: #cfd1e8;
    }

  

    .device-label {
    color: #fff;
    zoom: 1.5;
    display: none;
}

    .device-actions button , .device-label-row {
      color: #fff !important;
    }

    .status {
      margin-top: 6px;
      font-size: 11px;
    }

    .status-loading {
      color: var(--accent);
    }

    .status-ok {
      color: var(--ok);
      overflow-wrap: break-word;
    }

    .status-error {
      color: var(--danger);
    }

    .hint {
      margin-top: 6px;
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.4;
    }

    .meta-list {
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 11px;
      color: var(--text-muted);
    }

    .meta-list li {
      display: flex;
      justify-content: space-between;
      padding: 2px 0;
      gap: 4px;
    }

    .meta-label {
      opacity: 0.8;
    }

    .meta-value {
      font-weight: 500;
      color: var(--text-main);
    }

    .toggle-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 6px;
    }

    .toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--text-muted);
    }

    .toggle input[type="checkbox"] {
      accent-color: var(--accent);
      cursor: pointer;
    }

    .toggle-label {
      cursor: pointer;
    }

    .range-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .range-row input[type="range"] {
      flex: 1;
    }

    .range-value {
      font-size: 11px;
      color: var(--text-muted);
      width: 40px;
      text-align: right;
    }

    .issues-list {
      margin-top: 6px;
      overflow-y: auto;
      border-radius: 6px;
      border: 1px solid #191a27;
      background: rgba(9, 10, 18, 0.95);
      padding: 6px;
      font-size: 11px;
      max-height: calc(100vh - 702px);
    }

    .issue-item {
      padding: 3px 4px;
      border-radius: 4px;
      margin-bottom: 3px;
      display: flex;
      justify-content: space-between;
      gap: 6px;
    }

    .issue-item span.issue-label {
      color: var(--text-muted);
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }



/* --- Detailed issues styling --- */

#issues-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 30px;
}

.issue-item {
  position: relative;
  padding: 6px 8px 7px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Severity stripe on the left */
.issue-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.issue-item[data-severity="error"]::before {
  background: #fb4b4b;
}
.issue-item[data-severity="warn"]::before {
  background: #facc15;
}
.issue-item[data-severity="info"]::before,
.issue-item:not([data-severity])::before {
  background: rgba(148, 163, 184, 0.8);
}

.issue-item:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(8, 10, 18, 0.9);
}

.issue-top-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.issue-label {
  font-size: 0.82rem;
}

/* tag chip already exists; this just nudges spacing */
.issue-tag {
  margin-left: auto;
}

.issue-explainer {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--text-soft, #b6bccb);
  padding-left: 2px;
}

.issue-explainer-line + .issue-explainer-line {
  margin-top: 2px;
}

.issue-explainer-why {
  opacity: 0.9;
}

.issue-explainer-fix {
  opacity: 1;
  color: var(--text-muted, #cdd2e0);
}







    /* Smart Auto-Fix summary block */

    .autofix-summary-block {
      border-radius: 8px;
      border: 1px solid #191a27;
      background: rgba(9, 10, 18, 0.95);
      padding: 8px 10px;
      font-size: 11px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .autofix-summary-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .autofix-summary-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted, #8a8dad);
    }

    .autofix-summary-sub {
      margin-top: 2px;
      font-size: 11px;
      color: var(--text-muted, #8a8dad);
    }

    .autofix-delta-text.up {
      color: #34d399;
    }

    .autofix-delta-text.down {
      color: #f97373;
    }

    .autofix-summary-score-chip {
      display: inline-flex;
      align-items: baseline;
      gap: 3px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      background: radial-gradient(circle at 30% 0%, #1f2937, #020617);
      color: #e5e7f4;
      font-weight: 600;
      white-space: nowrap;
    }

    .autofix-summary-score-chip.is-good {
      background: radial-gradient(circle at 30% 0%, #34d399, #059669);
      color: #021e16;
    }

    .autofix-summary-score-chip.is-ok {
      background: radial-gradient(circle at 30% 0%, #facc15, #eab308);
      color: #1e1300;
    }

    .autofix-summary-score-chip.is-bad {
      background: radial-gradient(circle at 30% 0%, #f97373, #dc2626);
      color: #1f0606;
    }

    .autofix-score-main {
      font-size: 14px;
    }

    .autofix-score-sub {
      font-size: 10px;
      opacity: 0.8;
    }

    .autofix-metric-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    @media (max-width: 480px) {
      .autofix-metric-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .autofix-metric-card {
      border-radius: 6px;
      border: 1px solid #191a27;
      background: rgba(8, 10, 18, 0.9);
      padding: 6px 8px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .autofix-metric-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted, #8a8dad);
    }

    .autofix-metric-value {
      font-size: 11px;
      color: var(--text-main, #e5e7f4);
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: baseline;
    }

    .autofix-pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 1px 6px;
      font-size: 9px;
      border: 1px solid #4c8dff;
      color: #cfd6ff;
      background: rgba(19, 33, 71, 0.8);
    }

    .autofix-changes-header {
      margin-top: 4px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted, #8a8dad);
    }

    .autofix-changes-list {
      margin: 4px 0 0;
      padding-left: 16px;
      font-size: 11px;
      color: var(--text-main, #e5e7f4);
      max-height: 120px;
      overflow-y: auto;
    }

    .autofix-changes-list li {
      margin-bottom: 2px;
    }

    .autofix-empty-note {
      margin-top: 4px;
      font-size: 11px;
      color: var(--text-muted, #8a8dad);
    }




    .issue-tag {
      font-size: 9px;
      padding: 1px 4px;
      border-radius: 999px;
      border: 1px solid #30324a;
      color: #cfd1ea;
      white-space: nowrap;
    }

    .issue-tag.warn {
      border-color: #ffb347;
      color: #ffb347;
    }

    .issue-tag.error {
      border-color: var(--danger);
      color: var(--danger);
    }

    .issue-tag.info {
      border-color: #4c8dff;
      color: #4c8dff;
    }

    .textarea-small {
      width: 100%;
      min-height: 80px;
      resize: vertical;
      border-radius: 6px;
      border: 1px solid var(--border-subtle);
      background: #05060a;
      color: var(--text-main);
      padding: 6px 8px;
      font-size: 11px;
      font-family: var(--font-family);
      outline: none;
    }

    .textarea-small::placeholder {
      color: #595c6f;
    }

    .textarea-small:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px rgba(76, 141, 255, 0.35);
    }

    /* Missing-alt list */

    .no-alt-item {
      display: flex;
      gap: 6px;
      padding: 4px;
      border-radius: 4px;
      margin-bottom: 4px;
      background: rgba(15, 17, 30, 0.95);
      align-items: flex-start;
    }

    .no-alt-thumb {
      width: 40px;
      height: 40px;
      border-radius: 4px;
      overflow: hidden;
      flex-shrink: 0;
      background: #11121a;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .no-alt-thumb img {
      max-width: 100%;
      max-height: 100%;
      display: block;
    }

    .no-alt-meta {
      flex: 1;
      min-width: 0;
    }

    .no-alt-meta-main {
      font-size: 11px;
      color: var(--text-main);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .no-alt-meta-sub {
      font-size: 10px;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      opacity: 0.8;
    }

    /* Links table */

    .links-table-row {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 4px;
      border-radius: 4px;
      margin-bottom: 4px;
      background: rgba(15, 17, 30, 0.95);
    }

    .link-main-line {
      display: flex;
      justify-content: space-between;
      gap: 6px;
      font-size: 11px;
    }

    .link-text {
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--text-main);
    }

    .link-domain {
      font-size: 10px;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .link-flags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 2px;
      font-size: 9px;
      color: var(--text-muted);
    }

    .link-flag {
      padding: 1px 4px;
      border-radius: 999px;
      border: 1px solid #30324a;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .link-flag.warn {
      border-color: #ffb347;
      color: #ffb347;
    }

    .link-flag.bad {
      border-color: var(--danger);
      color: var(--danger);
    }

    /* Fold line */

    .fold-line {
      position: absolute;
      left: 0;
      right: 0;
      top: 65%;
      border-top: 1px dashed rgba(0, 0, 0, 0.4);
      pointer-events: none;
      opacity: 0.9;
      display: none;
    }

    .fold-line-label {
      position: absolute;
      right: 6px;
      top: -9px;
      font-size: 9px;
      padding: 1px 6px;
      border-radius: 999px;
      background: rgba(5, 6, 10, 0.9);
      color: #d0d2eb;
      border: 1px solid rgba(48, 50, 74, 0.9);
    }

    body.show-fold .fold-line {
      display: block;
    }



/* Hosts quick-view row */
.links-hosts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 6px;
}

.links-host-chip {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(48, 50, 74, 0.9);
  background: rgba(5, 6, 10, 0.95);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Primary vs external vs relative hosts */
.links-host-chip[data-role="primary"] {
  border-color: var(--accent);
  color: var(--accent);
}

.links-host-chip[data-role="external"] {
  border-color: #ffb347;
  color: #ffb347;
}

.links-host-chip[data-role="relative"] {
  border-style: dashed;
  opacity: 0.85;
}

/* Make the href pill look clickable */
.link-flag-href {
    cursor: pointer;
    color: #000000;
    border-color: rgba(110, 164, 255, 0.5);
    border-radius: 3px;

}

.link-flag-href:hover {
  background: rgba(76, 141, 255, 0.12);
}


/* Links section: actions + highlight button */

.link-actions-row {
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
}

.link-jump-btn {
  border-radius: 999px;
  border: 1px solid #313552;
  background: transparent;
  color: #6ea4ff;
  font-size: 9px;
  padding: 2px 8px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.link-jump-btn:hover {
  background: rgba(110, 164, 255, 0.08);
  border-color: #6ea4ff;
}

/* Make href pill look like a primary link flag */

.link-flag-href {
    cursor: pointer;
    color: #000000;
    border-color: rgba(110, 164, 255, 0.5);
    margin-bottom: 5px;
    margin-top: 5px;
}

.link-flag-href:hover {
  color: #fff;
  background: rgba(7, 61, 154, 0.781);
}





    /* ============ MAIN PREVIEW AREA ============ */

    .preview-main {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
      flex: 1;
      margin-left: 500px; /* equal to drawer width */
      transition: margin-left 0.25s ease-out;
    }

    body.drawer-closed .preview-main {
      margin-left: 0;
    }

    .app-topbar {
      height: 42px;
      border-bottom: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
      font-size: 12px;
      z-index: 20;
    }

    .topbar-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .topbar-pill {
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid #27293a;
      background: #11121d;
      color: #b5b7d0;
      font-size: 11px;
    }

    .topbar-right {
      display: flex;
      gap: 8px;
      align-items: center;
      color: var(--text-muted);
      font-size: 11px;
    }


    .topbar-health-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  min-width: 110px;
}

.topbar-health-bar {
  width: 90px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.topbar-health-bar-fill {
  height: 100%;
  width: 0%;
  transform-origin: left center;
  opacity: 0.4;
  transition:
    width 0.25s ease-out,
    opacity 0.2s ease-out,
    background 0.2s ease-out;
  background: linear-gradient(90deg, #6b7280, #9ca3af);
}

/* Color states based on data-level */
.topbar-health-bar-fill[data-level="great"],
.topbar-health-bar-fill[data-level="good"] {
  background: linear-gradient(90deg, #22c55e, #4ade80);
  opacity: 0.95;
}

.topbar-health-bar-fill[data-level="ok"] {
  background: linear-gradient(90deg, #eab308, #f97316);
  opacity: 0.9;
}

.topbar-health-bar-fill[data-level="bad"] {
  background: linear-gradient(90deg, #f97373, #ef4444);
  opacity: 0.95;
}


    .topbar-health {
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid #2b2d3e;
      background: #11121d;
    }

  .topbar-icon-btn {
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #151727;
    border: 1px solid #2a2c3f;
    color: #d0d2eb;
    cursor: pointer;
    border: none;
    background: transparent;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
}

    .topbar-icon-btn:hover {
      background: #202235;
    }

    .topbar-icon {
      font-size: 13px;
      line-height: 1;
    }

    .preview-tabs {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 8px 10px 0;
      border-bottom: 1px solid #161724;
      z-index: 10;
    }

    .tab {
      border: none;
      border-radius: 999px;
      padding: 4px 9px;
      font-size: 11px;
      cursor: pointer;
      background: transparent;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .tab span.dimensions {
      opacity: 0.7;
      font-size: 10px;
    }

    .tab.active {
      background: var(--accent-soft);
      color: var(--text-main);
    }

    .tab:hover:not(.active) {
      background: #151627;
      color: #cfd1e8;
    }

    .preview-area {
      flex: 1;
      min-height: 0;
      padding: 14px;
      overflow: auto;
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }

    .device-view {
      display: none;
      width: 100%;
      height: 100%;
      align-items: flex-start;
      justify-content: center;
    }

    .device-view.active {
      display: flex;
    }

    .device-shell {
      border-radius: 22px;
      padding: 12px;
      background: radial-gradient(circle at top left, #303243 0%, #11131e 40%, #05060a 100%);
      box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(255, 255, 255, 0.015);
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: stretch;
      gap: 6px;
    }

    .device-shell.desktop {
      border-radius: 18px;
      padding: 10px;
      width: 1200px;
      height: 800px;
    }

    .device-shell.tablet-portrait {
      width: 834px;
      height: 1112px;
      zoom: 0.85;
    }

    .device-shell.tablet-landscape {
      width: 1112px;
      height: 834px;
      zoom: 0.85;
    }

    .device-shell.phone-portrait {
      width: 390px;
      height: 844px;
    }

    .device-shell.phone-landscape {
      width: 844px;
      height: 390px;
    }

    .device-screen {
      flex: 1;
      border-radius: 14px;
      overflow: hidden;
      background: #f3f3f3;
      position: relative;
      box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        inset 0 0 0 2px rgba(255, 255, 255, 0.02);
    }

    .device-status-bar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 20px;
      background: linear-gradient(180deg, #101010 0%, #050505 100%);
      color: #f7f7f7;
      font-size: 9px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 6px;
      z-index: 2;
      opacity: 0.9;
    }

    .device-frame-inner {
      position: absolute;
      inset: 20px 0 0 0;
      background: #f3f3f3;
      display: flex;
      flex-direction: column;
    }

    .device-iframe {
      width: 100%;
      flex: 1 1 auto;
      border: none;
      background: #ffffff;
    }


/* Smooth animated transition when switching email client profiles */
.email-app-header,
.device-iframe {
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

/* Fade/slide out */
body.profile-fade-out .email-app-header,
body.profile-fade-out .device-iframe {
  opacity: 0;
  transform: translateY(6px);
}

/* Fade/slide back in */
body.profile-fade-in .email-app-header,
body.profile-fade-in .device-iframe {
  opacity: 1;
  transform: translateY(0);
}




    .email-app-header {
      height: 40px;
      flex: 0 0 40px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
      background: linear-gradient(to bottom, #f8f8f8, #e9e9e9);
      color: #222;
      box-sizing: border-box;
    }

    .email-app-header-left {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .email-app-header-right {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .email-header-icon {
      font-size: 14px;
      opacity: 0.8;
    }

    .email-header-meta {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .email-header-app {
      font-weight: 600;
      font-size: 11px;
    }

    .email-header-folder {
      font-size: 10px;
      color: #666;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .email-header-badge {
      padding: 2px 6px;
      border-radius: 999px;
      font-size: 10px;
      background: #eceff7;
      color: #334155;
    }

    .email-header-dots {
      font-size: 16px;
      line-height: 1;
      opacity: 0.7;
    }

    .email-app-gmail {
      background: linear-gradient(to bottom, #fefefe, #f2f6ff);
    }

    .email-app-outlook {
      background: linear-gradient(to bottom, #fefefe, #e9f3ff);
    }

    .email-app-apple-mail {
      background: linear-gradient(to bottom, #fefefe, #eef7ff);
    }

    .device-label-row {
      display: block;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      color: var(--text-muted);
    }

    .device-label {
      color: var(--text-muted);
    }

    .device-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    
    /* Phone grids */

    .multi-phone-grid {
      display: grid;
      gap: 20px;
      align-items: flex-start;
      justify-content: center;
      width: 100%;
    }

    /* Let the browser decide how many phones fit in the row */
    .device-view[data-view="phone-portrait"] .multi-phone-grid {
      /* portrait phones are narrower, so smaller min-width */
      grid-template-columns: repeat(auto-fit, minmax(260px, max-content));
    }

    .device-view[data-view="phone-landscape"] .multi-phone-grid {
      /* landscape phones are wider, so bigger min-width */
      grid-template-columns: repeat(auto-fit, minmax(380px, max-content));
    }

    .phone-card-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      position: relative;
      padding-bottom: 24px;
      width: max-content;
      zoom: 0.7;
    }

    .device-view[data-view="phone-landscape"] .phone-card-wrapper {
      padding-bottom: 18px;
      zoom: 0.5;
    }

    .phone-card-label {
      margin-top: 4px;
      font-size: 11px;
      color: var(--text-muted);
      text-align: center;
      zoom: 1.7;
    }

    .phone-card-label strong {
      color: var(--text-main);
    }

    @media (max-width: 1200px) {
      .preview-main {
        margin-left: 520px;
      }

      .control-drawer {
        width: 520px;
      }

      .device-shell.desktop {
        transform: scale(0.9);
        transform-origin: top center;
      }
    }

    @media (max-width: 960px) {
      .preview-main {
        margin-left: 0;
      }

      body.drawer-closed .preview-main {
        margin-left: 0;
      }

      .control-drawer {
        width: 520px;
      }

      .device-shell.desktop {
        transform: scale(0.8);
        transform-origin: top center;
      }

      /* Slightly smaller min width so 1–2 phones fit depending on space */
      .device-view[data-view="phone-portrait"] .multi-phone-grid,
      .device-view[data-view="phone-landscape"] .multi-phone-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, max-content));
      }
    }

    @media (max-width: 768px) {
      .preview-area {
        padding: 10px;
      }

      .device-shell.desktop {
        transform: scale(0.7);
      }

      /* On very small screens, essentially one phone per row, centered */
      .device-view[data-view="phone-portrait"] .multi-phone-grid,
      .device-view[data-view="phone-landscape"] .multi-phone-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        justify-items: center;
      }
    }












    
/* --- UI Overhaul: Card system & theme variants --- */

    body.theme-domcell-dark {
      --bg-main: #05060a;
      --bg-panel: #0d0e14;
      --bg-panel-alt: #13141c;
    }

    body.theme-oled-black {
      --bg-main: #000000;
      --bg-panel: #050506;
      --bg-panel-alt: #090909;
    }

    body.theme-neutral-grey {
      --bg-main: #111217;
      --bg-panel: #181a22;
      --bg-panel-alt: #202330;
    }

    body.theme-high-contrast {
      --bg-main: #000000;
      --bg-panel: #111111;
      --bg-panel-alt: #1b1b1b;
      --accent: #ffdd33;
      --accent-soft: rgba(255, 221, 51, 0.16);
      --text-main: #ffffff;
      --text-muted: #d0d0d0;
    }

    #email-preview-app {
      padding: 4px;
      box-sizing: border-box;
    }

 .preview-main {
    border-radius: 4px;
    border: 1px solid var(--border-subtle);
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.95) 55%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.03);
    padding: 4px 4px 4px 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
      transition: margin-left 0.22s ease-out, margin-right 0.22s ease-out;
}


body.browser-open .preview-main {
  margin-right: 60vw;
}

    .control-drawer {
   
      border: 1px solid var(--border-subtle);
      background: linear-gradient(145deg, var(--bg-panel), var(--bg-panel-alt));
      box-shadow:
        0 16px 45px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(255, 255, 255, 0.02);
    }

    .app-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 4px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }

    .topbar-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .topbar-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .topbar-meta {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
      font-size: 11px;
    }

    .topbar-theme {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .theme-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text-muted);
    }

    .theme-select {
      background: rgba(10, 12, 18, 0.9);
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.06);
      color: var(--text-main);
      font-size: 11px;
      padding: 4px 10px;
      outline: none;
    }

    .app-command-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: radial-gradient(circle at top left, rgba(76, 141, 255, 0.12), rgba(3, 4, 8, 0.95));
      border: 1px solid rgba(76, 141, 255, 0.3);
    }

    .command-group {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .command-btn {
      font-size: 11px;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(8, 10, 16, 0.9);
      color: var(--text-main);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      line-height: 1;
      transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, border-color 0.12s ease-out, background 0.12s ease-out;
    }

    .command-btn span.icon {
      font-size: 11px;
      opacity: 0.8;
    }

    .command-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(0,0,0,0.6);
      border-color: var(--accent);
      background: rgba(20, 24, 36, 0.98);
    }

    .command-btn:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(0,0,0,0.7) inset;
    }

    .command-select {
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.13);
      background: rgba(8, 10, 16, 0.9);
      color: var(--text-main);
      outline: none;
    }

    .config-profiles {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
    }

    .config-label {
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--text-muted);
    }

    .profile-tab {
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.2);
      padding: 3px 9px;
      font-size: 10px;
      background: rgba(6, 8, 12, 0.9);
      color: var(--text-main);
      cursor: pointer;
      opacity: 0.85;
      transition: background 0.12s ease-out, opacity 0.12s ease-out, border-color 0.12s ease-out;
    }

    .profile-tab:hover {
      opacity: 1;
      border-color: var(--accent);
    }

    .profile-tab.active {
      background: var(--accent-soft);
      border-color: var(--accent);
    }




.quality-summary-tile {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(
    135deg,
    rgba(76, 141, 255, 0.16),
    rgba(5, 6, 10, 0.98)
  );
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  font-size: 11px;
}

/* Left: overall score */
.quality-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.quality-score-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
}

.quality-score-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--accent);
}

/* Right: mini dashboards */
.quality-metrics {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 10px;
  font-size: 11px;
  width: 100%;
}

.quality-metric {
  position: relative;
  padding: 6px 8px 8px;
  border-radius: 10px;
  background: rgba(5, 6, 10, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.quality-metric-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.quality-metric-label {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.quality-metric-tag {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(120, 124, 170, 0.7);
  color: #cfd1ea;
  white-space: nowrap;
  background: rgba(17, 18, 29, 0.9);
}

.quality-metric-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-top: 2px;
}

.quality-metric-value {
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 500;
}

.quality-metric-caption {
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
  flex: 1;
}

/* Mini “health bar” strip under each metric */
.quality-metric::after {
  content: "";
  display: block;
  height: 2px;
  border-radius: 999px;
  margin-top: 4px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.02)
  );
  opacity: 0.4;
}

/* State colors still driven by the same JS classes */
.quality-metric-ok {
  color: #60e39a;
}

.quality-metric-warn {
  color: #ffd479;
}

.quality-metric-bad {
  color: #ff7b83;
}

/* Use :has to tint the mini bar based on status (Chrome/Electron OK) */
.quality-metric:has(.quality-metric-value.quality-metric-ok)::after {
  background: linear-gradient(90deg, #27d980, #8df7b0);
  opacity: 1;
}

.quality-metric:has(.quality-metric-value.quality-metric-warn)::after {
  background: linear-gradient(90deg, #ffb347, #ffdf99);
  opacity: 1;
}

.quality-metric:has(.quality-metric-value.quality-metric-bad)::after {
  background: linear-gradient(90deg, #ff4c6a, #ff9aa9);
  opacity: 1;
}




/* --- Email Health dashboard --- */

.health-section {
  padding-bottom: 0.75rem;
}

.health-overview-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.75rem;
}

.health-score-card {
  background: var(--panel-subtle, #101218);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.health-score-main {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.health-score-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #a0a4b5);
}

.health-score-number {
  font-size: 1.9rem;
  font-weight: 700;
}

.health-score-grade {
  font-size: 0.88rem;
  color: var(--text-soft, #c5cada);
}

.health-score-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.health-score-bar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  transition: width 180ms ease-out, background-color 180ms ease-out;
  background: linear-gradient(
    90deg,
    #f97373,
    #f9a34e,
    #facc15,
    #4ade80
  );
}

/* Optional level tint if you want to tweak per band */
.health-score-bar-fill[data-level="bad"] {
  background: #f97373;
}
.health-score-bar-fill[data-level="ok"] {
  background: #facc15;
}
.health-score-bar-fill[data-level="good"] {
  background: #4ade80;
}
.health-score-bar-fill[data-level="great"] {
  background: #22c55e;
}

.health-score-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chip-pill {
  border-radius: 999px;
}

/* soft chip base */
.chip-soft {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-soft, #c5cada);
}

/* health category states */
.health-pill[data-state="ok"] {
  border-color: #22c55e;
  color: #22c55e;
}
.health-pill[data-state="warn"] {
  border-color: #facc15;
  color: #facc15;
}
.health-pill[data-state="bad"] {
  border-color: #fb4b4b;
  color: #fb4b4b;
}
.health-pill[data-state="neutral"],
.health-pill:not([data-state]) {
  border-color: rgba(255, 255, 255, 0.1);
}

/* meta columns layout */
.health-meta-columns {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.health-meta-column {
  background: var(--panel-subtle, #101218);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.health-meta-title {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #9ca3b5);
  margin-bottom: 0.3rem;
}

.health-meta-column .meta-list {
  margin-top: 0.1rem;
}

/* issues block */
.health-issues-wrap {
  margin-top: 1rem;
}

.health-issues-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.health-issues-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #9ca3b5);
}

.health-issues-caption {
  font-size: 0.75rem;
  color: var(--text-soft, #b6bccb);
}














/* Responsive guard: collapse to single column if tight */
@media (max-width: 1200px) {
  .quality-summary-tile {
    flex-direction: column;
  }

  .quality-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .quality-metrics {
    grid-template-columns: 1fr;
  }
}







    /* --- Device shells polish --- */

    .device-shell {
      transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out;
      border-radius: 26px;
      border: 1px solid rgba(0,0,0,0.8);
      background:
        radial-gradient(circle at top left, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.95) 50%),
        linear-gradient(145deg, #12131b, #040509);
      box-shadow:
        0 22px 50px rgba(0,0,0,0.9),
        0 0 0 1px rgba(255,255,255,0.03);
    }

    .device-shell:hover {
      transform: translateY(-3px);
      box-shadow:
        0 26px 60px rgba(0,0,0,0.95),
        0 0 0 1px rgba(79,152,255,0.6);
      border-color: rgba(79,152,255,0.8);
    }

    .device-screen {
      border-radius: 20px;
      overflow: hidden;
      position: relative;
    }

    .device-status-bar {
      background: linear-gradient(90deg, rgba(0,0,0,0.85), rgba(0,0,0,0.65));
    }

    .device-status-chip {
      position: absolute;
      top: 6px;
      left: 10px;
      padding: 2px 6px;
      border-radius: 999px;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      background: rgba(0,0,0,0.7);
      border: 1px solid rgba(255,255,255,0.25);
      color: rgba(255,255,255,0.82);
      pointer-events: none;
    }

    .device-status-chip.status-loading {
      border-color: rgba(255, 207, 120, 0.8);
      color: #ffd479;
    }

    .device-status-chip.status-ok {
      border-color: rgba(111, 230, 166, 0.9);
      color: #60e39a;
          z-index: 9;
    }

    .device-status-chip.status-error {
      border-color: rgba(255, 107, 130, 0.9);
      color: #ff7b83;
    }

    .device-mini-toolbar {
      position: absolute;
      top: 6px;
      right: 10px;
      display: inline-flex;
      gap: 4px;
      padding: 2px 3px;
      border-radius: 999px;
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(8px);
          z-index: 9;
    }

    .device-mini-btn {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.2);
      font-size: 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.9);
      background: rgba(8,10,16,0.9);
      cursor: pointer;
      padding: 0;
      line-height: 1;
      transition: background 0.12s ease-out, transform 0.12s ease-out, border-color 0.12s ease-out;
    }

    .device-mini-btn:hover {
      background: rgba(25,29,44,0.95);
      border-color: var(--accent);
      transform: translateY(-1px);
    }

    .device-mini-btn:active {
      transform: translateY(0);
    }

    /* --- Drawer polish --- */

    .control-header .app-title {
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

  .control-section {
    border-radius: 0px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.96));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    padding: 10px 10px 9px 10px;
    position: relative;
    width: 98%;
    margin-left: 0%;
    border: none;
    border-bottom: 1px solid #272727;
}
    .control-section.collapsed > .control-section-body {
      display: none;
    }

    .control-section-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      cursor: default;
    }

    .control-section-toggle {
      cursor: pointer;
      border-radius: 999px;
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(8,10,16,0.9);
      color: rgba(255,255,255,0.8);
    }

    .section-toggle {
        background-color: transparent;
    border: none;
    color: aliceblue;
    }

    .control-section-badge {
      border-radius: 999px;
      padding: 2px 7px;
      font-size: 10px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--text-muted);
    }

    .meta-list li:hover {
      background: radial-gradient(circle at left, rgba(255,255,255,0.04), transparent);
    }

    /* --- Typography refinements --- */

    body, input, textarea, button, select {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
    }

    .control-section-title,
    .topbar-pill,
    .chip {
      letter-spacing: 0.16em;
    }

    h1, h2, h3, .app-title {
      letter-spacing: 0.12em;
    }

    .device-label {
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .device-actions .btn-ghost {
      font-size: 11px;
    }

    @media (max-width: 900px) {
      .app-command-row {
        border-radius: 12px;
        flex-direction: column;
        align-items: flex-start;
      }
      .quality-summary-tile {
        flex-direction: column;
        align-items: flex-start;
      }
      .quality-metrics {
        grid-auto-flow: row;
        grid-auto-columns: unset;
      }
      .topbar-right {
        align-items: flex-end;
      }
    }

    /* ---------- Right-side Insights Panel ---------- */

.insights-panel {
  display: none; /* hidden until we have analysis */
  flex: 0 0 320px;
  padding: 16px 18px;
  border-left: 1px solid var(--border-subtle, #1f2030);
  background: var(--surface-elevated, #111221);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}




/* Inbox Simulation Feed --------------------------------------- */

.inbox-sim-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.inbox-sim-row {
  border-radius: 8px;
  padding: 6px 8px;
  background: #090a14;
  border: 1px solid #191a27;
  font-size: 11px;
}

.inbox-sim-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  color: var(--text-muted);
}

.inbox-sim-app {
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
}

.inbox-sim-meta {
  opacity: 0.7;
  font-size: 10px;
}

.inbox-sim-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inbox-sim-from {
  font-weight: 600;
  font-size: 11px;
}

.inbox-sim-snippet {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Slight client-specific vibes without breaking the dark theme */

.inbox-sim-row--gmail .inbox-sim-app {
  color: #f28b82; /* Gmail-ish accent */
}

.inbox-sim-row--outlook .inbox-sim-app {
  color: #63a4ff; /* Outlook-ish accent */
}

.inbox-sim-row--ios .inbox-sim-app {
  color: #a5b4fc; /* iOS-ish accent */
}

.inbox-sim-row--ios .inbox-sim-row {
  font-size: 12px;
}


.control-tab-panel .collapsed {
      padding-bottom: 0px;
}



#insights-toggle.topbar-icon-btn.active {
  background: rgba(59, 130, 246, 0.16); /* or your existing accent */
  border-color: rgba(59, 130, 246, 0.6);
}

#insights-toggle.topbar-icon-btn .topbar-icon {
  font-size: 13px;
}


.control-section-title .chip {
      position: absolute;
    right: 38px;
}


.insights-panel--visible {
  display: flex;
  flex-direction: column;
  gap: 16px;
      zoom: 0.9;
    max-width: 300px;
    padding: 10px;
        max-height: 110vh;
    overflow: auto;
    z-index: 10;
}

.insights-panel.insights-panel-closed {
  display: none !important;
}



@media (max-width: 1600px) {
.topbar-health-wrap {
    display: none;
}

}

@media (max-width: 1200px) {
  .insights-panel {
    display: none !important;
  }

  #insights-toggle {
    display: none;
  }
}

.insights-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.insights-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.insights-subtitle {
  font-size: 12px;
  color: var(--text-muted, #8a8dad);
  margin-top: 4px;
}

.insights-score-chip {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: radial-gradient(circle at 30% 0%, #1f2937, #020617);
  color: #e5e7f4;
}

.insights-score-chip[data-level="good"] {
  background: radial-gradient(circle at 30% 0%, #34d399, #059669);
  color: #0b1117;
}

.insights-score-chip[data-level="ok"] {
  background: radial-gradient(circle at 30% 0%, #facc15, #eab308);
  color: #111827;
}

.insights-score-chip[data-level="bad"] {
  background: radial-gradient(circle at 30% 0%, #f97373, #dc2626);
  color: #111827;
}

.insights-section {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 7px;
}

.insights-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #8a8dad);
  margin-bottom: 4px;
}

.insights-list {
  list-style: disc;
  padding-left: 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.insights-list li {
  color: var(--text-normal, #e5e7f4);
}

.insights-pill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  gap: 8px;
  font-size: 12px;
}

.insights-pill-row .pill-label {
  color: var(--text-muted, #8a8dad);
}

.insights-pill-row .pill-value {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11px;
}

.pill-value[data-state="ok"] {
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
}

.pill-value[data-state="warn"] {
  background: rgba(249, 115, 22, 0.12);
  color: #fed7aa;
}

.pill-value[data-state="neutral"] {
  color: var(--text-muted, #8a8dad);
}

/* ===== Control Drawer Tabs: General Tools / AI Tools ===== */

.control-tabs {
  margin-top: -7px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Header row that holds the two tab buttons */
.control-tabs-header {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    max-width: 98%;
    background-color: #324053;
}

/* Individual tab buttons */
.control-tab {
  flex: 1;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition:
    background 0.15s ease-out,
    color 0.15s ease-out,
    box-shadow 0.15s ease-out,
    border-color 0.15s ease-out,
    transform 0.12s ease-out;
}

.control-tab:hover {
  color: var(--text-main);
  background: rgba(15, 17, 30, 0.95);
}

/* Active tab (currently selected) */
.control-tab.active {
  background: var(--accent-soft);
  color: #f9fafb;
  box-shadow: 0 0 0 1px rgba(76, 141, 255, 0.6),
              0 6px 18px rgba(0, 0, 0, 0.7);
  border: 1px solid var(--accent);
  transform: translateY(-1px);
}

/* Panels wrapper */
.control-tabs-panels {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Each panel (General / AI) */
.control-tab-panel {
  display: none;
  flex-direction: column;
  gap: 8px;
}

/* Visible panel */
.control-tab-panel.active {
  display: flex;
}

/* Slight tightening on very small widths */
@media (max-width: 960px) {
  .control-tabs-header {
    padding: 2px;
  }

  .control-tab {
    padding: 4px 8px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
}

/* ============ RENDERING LAB FULL-SCREEN DRAWER ============ */
.rendering-lab-drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: radial-gradient(circle at top left, #181a2b 0%, #05060a 55%, #020308 100%);
  z-index: 120;
  transform: translateY(100%);
  transition: transform 0.28s ease-out, opacity 0.24s ease-out;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  pointer-events: none;
  opacity: 0;
}

.rendering-lab-drawer.rendering-lab-open {
  transform: translateY(0);
  pointer-events: auto;
  opacity: 1;
}

.rendering-lab-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
  gap: 10px;
}

.rendering-lab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(37, 40, 64, 0.9);
}

.rendering-lab-titlegroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rendering-lab-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f4f5ff;
}

.rendering-lab-subtitle {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
}

.rendering-lab-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rendering-lab-mode-group {
  display: inline-flex;
  gap: 4px;
}

.rendering-lab-mode-toggle {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
}

.rendering-lab-mode-toggle.active {
  border-color: var(--accent);
  background: radial-gradient(
    circle at top left,
    rgba(76, 141, 255, 0.26),
    rgba(8, 10, 16, 0.96)
  );
  color: #e5e9ff;
}

.rendering-lab-header-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rendering-lab-anim {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.rendering-lab-anim input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
}

.rendering-lab-close-btn {
  border-radius: 999px;
  border: 1px solid #343750;
  background: #151727;
  color: #e5e7ff;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
}

.rendering-lab-close-btn:hover {
  background: #22253b;
}

.rendering-lab-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  padding-top: 6px;
  overflow: hidden;
}

@media (max-width: 1280px) {
  .rendering-lab-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rendering-lab-pane {
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.18s ease-out,
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out;
}

.rendering-lab-pane-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--text-muted);
}

.rendering-lab-client-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
}

.rendering-lab-client-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.rendering-lab-pane-active {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(76, 141, 255, 0.45),
    0 18px 40px rgba(0, 0, 0, 0.85);
}

/* Make Rendering Lab devices a bit more compact within the overlay */
.rendering-lab-pane .device-shell.desktop {
  max-width: 100%;
  margin: 0 auto;
}

.rendering-lab-pane .device-shell.phone-portrait {
  max-width: 430px;
  margin: 0 auto;
}


@media (max-width: 768px) {
.tab span.dimensions {
  display: none;
}

}




/* ============ AI REPORTING FULL-SCREEN DRAWER ============ */

.reporting-drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: radial-gradient(circle at top left, #181a2b 0%, #05060a 55%, #020308 100%);
  z-index: 120;
  transform: translateY(100%);
  transition: transform 0.28s ease-out, opacity 0.24s ease-out;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  pointer-events: none;
  opacity: 0;
}

.reporting-drawer.reporting-open {
  transform: translateY(0);
  pointer-events: auto;
  opacity: 1;
}

.reporting-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
  gap: 10px;
}

.reporting-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(37, 40, 64, 0.9);
}

.reporting-titlegroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reporting-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f4f5ff;
}

.reporting-subtitle {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
}

.reporting-header-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.reporting-close-btn {
  border-radius: 999px;
  border: 1px solid #343750;
  background: #151727;
  color: #e5e7ff;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
}

.reporting-close-btn:hover {
  background: #22253b;
}

.reporting-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  padding-inline: 10px;
}

.reporting-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
  overflow: hidden;
}

.reporting-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.reporting-generate-btn {
  min-width: 220px;
  justify-content: center;
}

.reporting-status-row .ai-status {
  flex: 1;
  min-width: 220px;
}




.reporting-links-btn {
  font-size: 11px;
  padding-inline: 8px;
}

.reporting-links-wrapper {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(37, 40, 64, 0.7);
}

.reporting-links-title {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.reporting-links-output {
    margin: 0;
    padding: 8px 10px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid rgba(37, 40, 64, 0.9);
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    max-height: calc(100vh - 188px);
    overflow: auto;
    overflow-wrap: anywhere;
    color: #333;
    font-weight: 600;
}


.reporting-content {
    flex: 1;
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(46, 50, 81, 0.9);
    overflow: auto;
    font-size: 12px;
    line-height: 1.55;
    max-height: calc(100vh - 232px);
    max-width: 54%;
    background: #fff;
    color: #333;
}

/* Basic typography inside the AI report */
.reporting-content h2,
.reporting-content h3,
.reporting-content h4 {
  margin: 10px 0 4px;
  font-weight: 600;
   color: #333;
}

.reporting-content p {
  margin: 4px 0 6px;
}

.reporting-content ul {
  margin: 4px 0 8px 18px;
  padding: 0;
}

.reporting-content li {
  margin-bottom: 3px;
}

.browser-drawer::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.browser-drawer::-webkit-scrollbar-track {
  background: #05060a;
}

.browser-drawer::-webkit-scrollbar-thumb {
  background: #2b2d3f;
  border-radius: 999px;
}

.browser-drawer::-webkit-scrollbar-thumb:hover {
  background: #4c8dff;
}



.browser-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 60vw;
  min-width: 600px;
  height: 100vh;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.96) 60%);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  z-index: 110;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease-out, opacity 0.22s ease-out;
}

.browser-drawer.browser-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.browser-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  gap: 8px;
}

.browser-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 4px;
  border-radius: 8px;
  background-color: #000;
  border: 1px solid rgba(91, 139, 254, 0.5);
}

.browser-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.browser-title {
  font-size: 12px;
  font-weight: 600;
  color: #f5f7ff;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.browser-subtitle {
  font-size: 10px;
  color: #afb3d9;
  opacity: 0.9;
}

.browser-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.browser-close-btn {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(5, 6, 14, 0.9);
  color: #e3e5ff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.browser-close-btn:hover {
  border-color: #ff6369;
  color: #ffb3b7;
}

.browser-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  padding: 6px;
  border-radius: 8px;
  background: linear-gradient(135deg, #050712, #101425);
  border: 1px solid rgba(40, 42, 66, 0.9);
}

.browser-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.browser-nav-btn {
  padding: 3px 7px;
  font-size: 11px;
  border-radius: 999px;
}

.browser-url-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.browser-url-input {
  width: 100%;
  font-size: 11px;
}

.browser-go-btn {
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 999px;
}

.browser-favorites-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.browser-fav-select {
  max-width: 180px;
  font-size: 11px;
}

.browser-fav-add-btn {
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 999px;
}

.browser-body {
  flex: 1 1 auto;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(36, 39, 64, 0.95);
  background: #05060a;
}

.browser-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: #ffffff;
}






/* ===== Browser + drawer coordination ===== */

/* When the embedded browser is open, hide preview + insights */
body.browser-open .preview-main {
  display: none;
}

body.browser-open #insights-panel {
  display: none !important;
}

/* Browser width when drawer is NOT expanded (normal 500px drawer) */
body.browser-open:not(.drawer-expanded) .browser-drawer {
  width: 71vw;
  min-width: 600px;
}

/* Browser width when drawer IS expanded */
body.browser-open.drawer-expanded .browser-drawer {
  width: 24vw;
  min-width: 496px;
}







/* --- AI Tools: mini dash + spinner --- */

.ai-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 6px;
  margin-bottom: 4px;
}

.ai-mini-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.ai-mini-pill {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 11px;
  white-space: nowrap;
  background: radial-gradient(circle at 30% 0%, #1f2937, #020617);
  color: #e5e7f4;
}

.ai-mini-pill[data-state="idle"] {
  opacity: 0.7;
}

.ai-mini-pill[data-state="running"] {
  border-color: #38bdf8;
  color: #e0f2fe;
}

.ai-mini-pill[data-state="ok"] {
  border-color: #4ade80;
  color: #bbf7d0;
}

.ai-mini-pill[data-state="error"] {
  border-color: #f97373;
  color: #fee2e2;
}

/* Status row with spinner */
.ai-status {
  position: relative;
  padding-left: 18px; /* room for spinner */
}

.ai-status[data-loading="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 999px;
  border: 2px solid rgba(148, 163, 184, 0.6);
  border-top-color: #ffffff;
  animation: ai-spin 0.75s linear infinite;
}

@keyframes ai-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Copy-all row */
.ai-copy-row {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}

.ai-copy-row .btn,
.ai-copy-row .btn-secondary {
  width: 100%;
  justify-content: center;
  font-size: 11px;
  padding-inline: 8px;
}


/* Quality score help modal */

.quality-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #444a5f;
  background: transparent;
  color: #dfe4ff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.quality-help-btn:hover {
  border-color: #8aa4ff;
  background: rgba(138, 164, 255, 0.15);
}

.quality-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.quality-modal-backdrop.is-open {
  display: flex;
}

.quality-modal {
  max-width: 560px;
  width: 90%;
  max-height: 80vh;
  background: #111320;
  border: 1px solid #26293a;
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
}

.quality-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #1e2233;
}

.quality-modal-header h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.quality-modal-close {
  border: none;
  background: transparent;
  color: #dfe4ff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.quality-modal-close:hover {
  color: #ff8080;
}

.quality-modal-body {
  padding: 12px 16px 16px;
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
}

.quality-modal-body ul.quality-score-breakdown {
  margin: 8px 0 0;
  padding-left: 18px;
}

.quality-modal-body ul.quality-score-breakdown li {
  margin-bottom: 8px;
}

.meta-value.meta-multiline {
  white-space: pre-line;
      overflow-wrap: anywhere;
}

/* ---- Splash screen (full takeover) ---- */

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
  background: radial-gradient(circle at top left, #15162b, #050611 55%);
  color: #f5f5f8;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.splash-screen.splash-fade-out {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}

/* subtle grid / glow background */
.splash-backdrop {
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(transparent 0, transparent 75%, rgba(255, 255, 255, 0.04) 76%, transparent 77%) 0 0 / 100% 40px repeat-y,
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(125, 190, 255, 0.27), transparent 55%);
  opacity: 0.65;
  filter: blur(1px);
  pointer-events: none;
}

/* main content card */
.splash-inner {
  position: relative;
  padding: 34px 46px 30px 46px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.10);

  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  min-width: 420px;
  max-width: 720px;
  overflow: hidden; /* required */
}

.splash-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(assets/studio-start.jpg);
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    z-index: -1;
}

/* top row: chips */
.splash-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.splash-chip,
.splash-version-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.splash-chip {
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f8;
}

.splash-version-chip {
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(245, 245, 248, 0.88);
}

/* title block */
.splash-title-block {
  margin-bottom: 20px;
}

.splash-mark {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.70;
  margin-bottom: 6px;
}

.splash-title {
  font-size: 44px;
  line-height: 1.05;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.splash-subtitle {
  font-size: 15px;
  line-height: 1.4;
  opacity: 0.82;
}

.splash-subtitle span {
  color: #ffffff;
  font-weight: 600;
}

/* feature pills row */
.splash-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 14px 0;
}

.splash-pill {
  flex: 1 1 0;
  min-width: 140px;
  padding: 8px 10px 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.07), transparent 65%);
}

.pill-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.pill-desc {
  display: block;
  font-size: 11px;
  opacity: 0.8;
}

/* loading row */
.splash-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 10px 0;
}

.splash-spinner {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: #ffffff;
  border-right-color: #ffffff;
  animation: splash-spin 0.85s linear infinite;
}

.splash-progress-text {
  font-size: 12px;
  opacity: 0.85;
}

/* footnote */
.splash-footnote {
  font-size: 11px;
  opacity: 0.60;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 9px;
  margin-top: 4px;
}

/* responsive */
@media (max-width: 720px) {
  .splash-inner {
    margin: 0 18px;
    padding: 24px 20px 22px 20px;
    min-width: auto;
    
  }

  .splash-title {
    font-size: 32px;
    letter-spacing: 0.16em;
  }

  .splash-header-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .splash-pill-row {
    flex-direction: column;
  }
}

@keyframes splash-spin {
  to {
    transform: rotate(360deg);
  }
}



/* HELP MODAL BASE */
.help-modal.hidden {
  display: none;
}

.help-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
}

.help-container {
  position: relative;
  width: 900px;
  max-width: 95vw;
  max-height: 90vh;
  background: #0f111c;
  border: 1px solid #1f2131;
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(0,0,0,0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.help-header {
  padding: 18px 22px;
  border-bottom: 1px solid #1f2131;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #131522;
}

.help-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.help-close-btn {
  background: #222436;
  border: 1px solid #2a2c3f;
  color: #e4e6f1;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
}

.help-content {
  padding: 22px;
  overflow-y: auto;
}

.help-section {
  margin-bottom: 28px;
}

.help-section h3 {
  margin-top: 0;
  font-size: 16px;
}

.help-section h4 {
  margin-bottom: 6px;
  margin-top: 14px;
}

.help-section p,
.help-section li {
  font-size: 13px;
  line-height: 1.55;
}

.help-section ul {
  padding-left: 20px;
}



/* Persona selector grid */

.persona-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-top: 6px;
}

@media (min-width: 960px) {
  .persona-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Each persona option reuses .btn-secondary but is full-width, left-aligned, stacked text */
.persona-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  gap: 2px;
  white-space: normal;
  line-height: 1.35;
}

/* Selected persona state */
.persona-option.selected {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(76, 141, 255, 0.4),
    0 8px 24px rgba(15, 23, 42, 0.9);
  background: radial-gradient(
    circle at top left,
    rgba(76, 141, 255, 0.22),
    rgba(8, 10, 20, 0.98)
  );
}

/* Persona text hierarchy */
.persona-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
}

.persona-desc {
  font-size: 11px;
  color: var(--text-muted);
}


/* AI model selector block */
.ai-model-row {
  margin: 10px 0 14px;
  padding: 10px 10px 12px;
  border-radius: 8px;
  border: 1px solid #262840;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
      max-width: 98%;
}

/* Label above the dropdown */
.ai-model-row > label[for="ai-model-select"] {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c1c3dd;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Optional small “badge” on the right of the label */
.ai-model-row > label[for="ai-model-select"]::after {
  content: "Multi-provider";
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(109, 114, 255, 0.6);
  background: rgba(109, 114, 255, 0.16);
  color: #d7d9ff;
}

/* The dropdown itself */
#ai-model-select {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #262840;
  background-color: #050714;
  color: #f5f6ff;
  padding: 7px 28px 7px 10px; /* extra right padding for the chevron */
  font-size: 13px;
  line-height: 1.4;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* Hover / focus states */
#ai-model-select:hover {
  border-color: #3a3d63;
}

#ai-model-select:focus {
  outline: none;
  border-color: #6d72ff;
  box-shadow:
    0 0 0 1px rgba(109, 114, 255, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* Custom chevron */
.ai-model-row::after {
  content: "▾";
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-size: 11px;
  pointer-events: none;
  color: #aeb2ff;
  opacity: 0.9;
}

/* Option group styling inside the dropdown */
#ai-model-select optgroup {
  font-style: normal;
  color: #9ea2d8;
  background-color: #050714;
}

#ai-model-select option {
  background-color: #050714;
  color: #f5f6ff;
}


button:hover {
  opacity: 0.7;
  cursor: pointer;
}



/* ============ CONTROL DRAWER EXPANDED MODE ============ */

body.drawer-expanded .control-drawer {
  width: 71vw;
}

body.drawer-expanded .preview-main {
  margin-left: 71vw;
}

/* When expanded, hide device dimensions + top health strip + insights */
body.drawer-expanded .dimensions,
body.drawer-expanded .topbar-health-wrap,
body.drawer-expanded .insights-panel {
  display: none !important;
}

/* ===== Chat drawer (Relay Chat) ==================================== */

.chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 60vw;
  min-width: 600px;
  height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.96) 60%);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  z-index: 120;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease-out, opacity 0.22s ease-out;
}

.chat-drawer.chat-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.chat-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  gap: 8px;
}

/* Header */

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 4px;
  border-radius: 8px;
  background-color: #000000;
  border: 1px solid rgba(91, 139, 254, 0.5);
}

.chat-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-title {
  font-size: 12px;
  font-weight: 600;
  color: #f5f7ff;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.chat-subtitle {
  font-size: 10px;
  color: #afb3d9;
  opacity: 0.9;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-model-select {
  max-width: 220px;
  font-size: 11px;
  border-radius: 999px;
  padding: 4px 9px;
  border: 1px solid rgba(91, 139, 254, 0.7);
  background: radial-gradient(circle at top left, #07091c 0%, #050616 55%);
  color: #dfe3ff;
}

.chat-model-select optgroup {
  color: #9da3d8;
}

.chat-close-btn {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(5, 6, 14, 0.9);
  color: #e3e5ff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.chat-close-btn:hover {
  border-color: #ff6369;
  color: #ffb3b7;
}

/* Body / messages */

.chat-body {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 10px;
  border: 1px solid rgba(36, 39, 64, 0.95);
  background: radial-gradient(circle at top, #050616 0%, #020308 60%);
  padding: 10px;
  box-sizing: border-box;
}

.chat-messages {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

/* ChatGPT-style message layout */

.chat-message {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
}

.chat-message-assistant {
  flex-direction: row;
}

.chat-message-user {
  flex-direction: row-reverse;
}

.chat-message-avatar {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  background: radial-gradient(circle at top, #4e65ff 0%, #1b2257 60%);
  color: #f5faff;
  box-shadow: 0 0 0 1px rgba(92, 121, 255, 0.5);
}

.chat-message-user .chat-message-avatar {
  background: radial-gradient(circle at top, #18a56f 0%, #0b5238 60%);
  box-shadow: 0 0 0 1px rgba(79, 211, 151, 0.6);
}

.chat-message-bubble {
  max-width: 100%;
}

.chat-message-content {
  border-radius: 10px;
  padding: 8px 10px;
  background: radial-gradient(circle at top, #0d1024 0%, #050716 75%);
  border: 1px solid rgba(63, 80, 168, 0.7);
  color: #e2e5ff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7);
}

.chat-message-user .chat-message-content {
  background: radial-gradient(circle at top, #0d1f16 0%, #04110b 75%);
  border-color: rgba(80, 202, 133, 0.8);
  color: #e3ffe9;
}

.chat-message-initial .chat-message-content {
  opacity: 0.95;
}

.chat-message-content p {
  margin: 0 0 4px;
}

.chat-message-content p:last-child {
  margin-bottom: 0;
}

/* Streaming cursor */

.chat-message-cursor {
  display: inline-block;
  width: 6px;
  height: 11px;
  margin-left: 2px;
  border-radius: 2px;
  background: rgba(223, 226, 255, 0.9);
  animation: chat-cursor-blink 1s steps(2, start) infinite;
}

@keyframes chat-cursor-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* Input bar */

.chat-input-bar {
  margin-top: 8px;
  border-radius: 10px;
  border: 1px solid rgba(40, 42, 66, 0.9);
  background: linear-gradient(145deg, #050712, #090b1b);
  padding: 8px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-input-inner {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.chat-input {
  flex: 1 1 auto;
  max-height: 120px;
  border-radius: 10px;
  border: 1px solid #262840;
  background: #050616;
  color: #f5f6ff;
  padding: 6px 8px;
  font-size: 13px;
  resize: none;
}

.chat-input:focus {
  outline: none;
  border-color: #6d72ff;
  box-shadow: 0 0 0 1px rgba(109, 114, 255, 0.45);
}

.chat-send-btn {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  border: 1px solid #5b8bfe;
  background: linear-gradient(135deg, #1d2a63, #2b3fa1);
  color: #f5f7ff;
  cursor: pointer;
}

.chat-send-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.chat-send-btn:not(:disabled):hover {
  filter: brightness(1.07);
}

.chat-hint {
  font-size: 11px;
  color: #8a8fbc;
  display: flex;
  justify-content: space-between;
}

/* Chat drawer width when drawer-expanded toggle is used */
body.chat-open:not(.drawer-expanded) .chat-drawer {
  width: 71vw;
  min-width: 600px;
}

body.chat-open.drawer-expanded .chat-drawer {
  width: 24vw;
  min-width: 496px;
}

/* Scrollbars for chat */

.chat-messages::-webkit-scrollbar,
.chat-drawer::-webkit-scrollbar {
  width: 8px;
}

.chat-messages::-webkit-scrollbar-track,
.chat-drawer::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb,
.chat-drawer::-webkit-scrollbar-thumb {
  background: rgba(86, 94, 160, 0.7);
  border-radius: 999px;
}

.chat-messages::-webkit-scrollbar-thumb:hover,
.chat-drawer::-webkit-scrollbar-thumb:hover {
  background: rgba(118, 130, 202, 0.9);
}

/* Mobile: full-width chat drawer */
@media (max-width: 900px) {
  .chat-drawer {
    width: 100vw;
    min-width: 0;
  }

  body.chat-open:not(.drawer-expanded) .chat-drawer,
  body.chat-open.drawer-expanded .chat-drawer {
    width: 100vw;
    min-width: 0;
  }
}

/* Context toggle (Ask about this email / General chat) */

.chat-context-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.chat-context-btn {
  border-radius: 999px;
  border: 1px solid rgba(91, 139, 254, 0.45);
  background: rgba(6, 9, 26, 0.9);
  color: #c7ccff;
  font-size: 10px;
  padding: 3px 8px;
  cursor: pointer;
  line-height: 1.3;
}

.chat-context-btn.is-active {
  background: linear-gradient(135deg, #1f2b66, #3345a8);
  border-color: rgba(123, 158, 255, 0.95);
  color: #ffffff;
}

/* New Chat button */

.chat-new-btn {
  border-radius: 999px;
  border: 1px solid rgba(116, 132, 192, 0.9);
  background: rgba(9, 11, 24, 0.95);
  color: #dfe3ff;
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
}

.chat-new-btn:hover {
  border-color: #8ea2ff;
  color: #ffffff;
}

/* Assistant tools (Copy answer) */

.chat-message-tools {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.chat-copy-btn {
  border-radius: 999px;
  border: 1px solid rgba(93, 120, 220, 0.75);
  background: rgba(7, 10, 28, 0.95);
  color: #cfd5ff;
  font-size: 10px;
  padding: 2px 8px;
  cursor: pointer;
}

.chat-copy-btn:hover {
  border-color: #b0c0ff;
  color: #ffffff;
}

#chat-drawer {
  background-color: #1c252e;
}

.chat-header {
    background-color: transparent;
    border: none;
}

.chat-body {
  background-color: #0e1114;
}

.chat-input-bar {
    border: none;
    background: transparent;
    
}


.chat-body {
    background: transparent;
    padding: 0;
    border: none;
    border-top: 1px solid #333;
    padding-top: 9px;
}

#help-toggle {
      width: fit-content;
    position: absolute;
    top: 13px;
    left: 188px;
}

.app-title {
  width: fit-content;
}



.width100c {
  width: 100%;
  float: left;
  position: relative;
}

.width50c {
  width: 50%;
  float: left;
  position: relative;
  margin-bottom: 10px;
}

#load-status {
  position: absolute;
    top: 2px;
    right: 66px;
}



#subject-input {
  min-width: 100%;
  margin-top: 5px;
}

@media (max-width: 1450px) {
.dimensions {
  display: none;
}
.app-subtitle {
  display: none;
}

.topbar-left {
    overflow: auto;
}


.topbar-icon-btn {
    min-width: fit-content;
}

.field-label {
    min-width: fit-content;
}
#client-profile {
    min-width: fit-content;
}

}

.link-insight {
  font-size: 11px;
  opacity: 0.78;
  margin-top: 4px;
  padding: 3px 0 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

/* ============ CENTER VIEW MODE (Multi / Single) ============ */

.center-mode-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid #161724;
}

.center-mode-tab {
  border: none;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.center-mode-tab.active {
  background: var(--accent-soft);
  color: var(--text-main);
}

.center-mode-tab:hover:not(.active) {
  background: #151627;
  color: #cfd1e8;
}

.center-view-panels {
  flex: 1;
  min-height: 0;
  display: flex;
}

.center-view-panel {
  flex: 1;
  min-height: 0;
  display: none;
  flex-direction: column;
    background-image: url(assets/myrobotdark.png);
    background-position: left;
    background-size: cover;

}

.center-view-panel.active {
  display: flex;
}

.center-view-panel[hidden] {
  display: none !important;
}

/* Single View placeholder */
.single-view-empty {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.single-view-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.single-view-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}





.single-view-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 0;
    text-align: center;
    max-width: 613px;
    margin-left: auto;
    margin-right: auto;
    min-width: 429px;
}
.single-nav-btn {
  height: 34px;
  min-width: 38px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.04);
  color: var(--text-main);
  cursor: pointer;
}

.single-nav-btn:hover {
  background: rgba(255,255,255,0.07);
}

.single-device-display {
  flex: 1;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(0,0,0,0.35);
  color: var(--text-main);
  padding: 0 12px;
  outline: none;
  text-align: center;
}

.single-view-body {
    padding: 10px;
    min-height: calc(100vh - 113px);
    overflow: auto;
}


/* ---------- Single View (centered, width-by-device, natural height) ---------- */

.single-view-body {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 18px 14px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.single-device-stage {
  width: 100%;
  display: flex;
  justify-content: center;
}

.single-device-shell {
  height: auto !important;
  max-width: 100%;
  transform-origin: top center;
}

/* kill any fixed/zoom behavior from tablet shells for single view */
.single-device-shell.tablet-portrait,
.single-device-shell.tablet-landscape {
  zoom: 1 !important;
}

.single-device-shell .device-screen {
  height: auto !important;
}

.single-device-shell .device-frame-inner {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
}

.single-device-shell .device-iframe {
  display: block;
  width: 100%;
  height: 600px; /* JS will auto-fit after load */
  border: 0;
}


.single-device-shell .device-frame-inner {
      height: calc(100vh - 171px) !important;
    margin-bottom: 0px;
    border: none;
}




#single-device-shell {
      border-radius: 0px;
    border: none;
    padding: 0px;
}

#single-device-shell .device-screen {
      border-radius: 0px;
    padding: 0px;
    border: 0px;
    padding-top: 23px;
}

.reporting-content h2, .reporting-content h3, .reporting-content h4 {
    margin: 10px 0 4px;
    font-weight: 600;
    color: #333;
    font-size: 13px;
    text-decoration: underline;
}



.aggrogote{
  flex: 1;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(46, 50, 81, 0.9);
  overflow: hidden;
  font-size: 12px;
  line-height: 1.55;
  max-height: calc(100vh - 232px);
  background: #fff;
  color: #333;
  display: flex;
  flex-direction: column;
  max-width: 46%;
}

.aggrogote-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.aggrogote-title{
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.2px;
}

.aggrogote-actions{
  display:flex;
  gap:8px;
}

.aggrogotebody{
  flex:1;
  overflow:auto;
  padding-top:10px;
      overflow: auto !important;
    max-height: calc(100vh - 177px);
}

.agg-item{
  border: 1px solid rgba(46, 50, 81, 0.25);
  border-radius: 10px;
  padding: 10px 10px 9px;
  margin-bottom: 10px;
  background: rgba(250,250,255,0.9);
}

.agg-item-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.agg-item-title{
  font-weight:700;
}

.agg-item-meta{
  opacity:0.75;
  font-size:11px;
  white-space:nowrap;
}

.agg-item-content{
  font-size:12px;
}

.agg-item-content pre{
  white-space: pre-wrap;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 980px){
  .aggrogote{ display:none; }
}






/* ===== Reporting drawer: pro layout + unified panel styling ===== */

.reporting-panels{
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 12px;
  min-height: 0; /* critical so children can scroll */
  align-items: stretch;
}

@media (max-width: 1100px){
  .reporting-panels{
    grid-template-columns: 1fr;
  }
  .aggrogote{
    max-width: none !important;
  }
}

.reporting-content,
.aggrogote{
  max-width: none; /* overrides the old max-width limits */
  max-height: none; /* let the grid handle height */
  min-height: 0;
  overflow: hidden;

  /* unified panel look */
  background: rgba(8, 10, 22, 0.92);
  color: #e9ecff;
  border: 1px solid rgba(76, 141, 255, 0.22);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.03);
}

/* Each panel scrolls internally */
#reporting-content,
.aggrogotebody{
  overflow: auto;
  min-height: 0;
  max-height: calc(100vh - 132px);
      margin-right: 17px;
}

/* Make headings and content inside the report feel “designed” */
.reporting-content h2,
.reporting-content h3,
.reporting-content h4{
  color: #f3f5ff;
  text-decoration: none; /* remove underline look */
  margin: 14px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  letter-spacing: 0.02em;
}

.reporting-content p{
  margin: 6px 0 10px;
  color: rgba(233,236,255,0.92);
}

.reporting-content ul{
  margin: 6px 0 12px 18px;
}

.reporting-content li{
  margin-bottom: 6px;
  color: rgba(233,236,255,0.92);
}

/* If injected content includes <pre> blocks, make them match */
.reporting-content pre{
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  color: #e9ecff;
  white-space: pre-wrap;
  overflow: auto;
}

/* Log panel polish */
.aggrogote-title{
  color: #f3f5ff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
}

.agg-item{
 background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #333;
}

.agg-item-title{
 color: #000000;
}

.agg-item-meta{
  color: rgba(233,236,255,0.72);
}

/* Scrollbar polish (only inside reporting panels) */
#reporting-content::-webkit-scrollbar,
.aggrogotebody::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

#reporting-content::-webkit-scrollbar-track,
.aggrogotebody::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.25);
}

#reporting-content::-webkit-scrollbar-thumb,
.aggrogotebody::-webkit-scrollbar-thumb{
  background: rgba(76, 141, 255, 0.35);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.25);
}

#reporting-content::-webkit-scrollbar-thumb:hover,
.aggrogotebody::-webkit-scrollbar-thumb:hover{
  background: rgba(76, 141, 255, 0.55);
}



  .aggrogote , .reporting-links-section  {
  max-width: 33%;
}

.reporting-panels {
    display: flex;
}

#reporting-content{
    max-width: 40%;
}

.reporting-body {
    display: flex;
}

#reporting-content {
    background-color: #fff;
    color: #333;
}


.reporting-content li {
    margin-bottom: 6px;
    color: #333;
}

@media (max-width: 768px) {


  .aggrogote , .reporting-links-section  {
  max-width: 100%;
}

.reporting-panels {
    display: flex;
}

#reporting-content{
    max-width: 10%;
}



.topbar-health-wrap {
  display: none;
}



.reporting-panels {
    display: block;
}
.center-view-panel {
      width: 100vw;
}

}



@media (min-width: 1850px) {

.device-view[data-view="phone-portrait"] .multi-phone-grid {
    grid-template-columns: repeat(auto-fit, minmax(365px, max-content)) !important;
}

}