:root {
      /* Everline dark dashboard palette */
      --lime: #C8F03E;
      --ink: #0B0B0C;
      --ink-light: #101012;
      --charcoal: #121214;
      --charcoal-light: #1A1A1D;
      --bone: #FFFFFF;
      --cream: #F4F4F5;
      --icon: #D4D4D8;
      --stone: #A1A1AA;
      --stone-dark: #71717A;
      --border: #232326;
      --border-hover: #52525B;
      --font-display: 'Plus Jakarta Sans', sans-serif;
      --font-body: 'Inter', sans-serif;
      --sidebar-width: 80px;
      --sidebar-expanded: 220px;
      --ai-chat-width: 340px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; overflow: hidden; }

    body {
      font-family: var(--font-body);
      background: var(--ink);
      color: var(--bone);
      -webkit-font-smoothing: antialiased;
      display: flex;
    }

    a { color: inherit; text-decoration: none; }
    button { font-family: var(--font-body); cursor: pointer; }
    input, select { font-family: var(--font-body); }

    /* =================== SIDEBAR =================== */
    .sidebar {
      width: var(--sidebar-width);
      height: 100vh;
      background: var(--ink-light);
      border-right: 1px solid var(--border);
      border-radius: 0 18px 18px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 0;
      flex-shrink: 0;
      z-index: 50;
      transition: width 0.25s cubic-bezier(.4,0,.2,1), padding 0.25s;
      overflow: hidden;
    }
    .sidebar.expanded {
      width: var(--sidebar-expanded);
      align-items: flex-start;
      padding: 16px 10px;
    }

    .sidebar-center-group {
      flex: 1;
      min-height: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
    }
    .sidebar.expanded .sidebar-center-group {
      align-items: stretch;
    }

    .sidebar > .sidebar-toggle {
      flex: 0 0 auto;
      margin-bottom: 8px;
    }
    .sidebar.expanded > .sidebar-toggle {
      margin-left: 4px;
    }

    .sidebar-top {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      width: 100%;
      justify-content: center;
    }
    .sidebar.expanded .sidebar-top {
      justify-content: flex-start;
      align-items: flex-start;
      padding-left: 4px;
    }

    .sidebar-logo {
      width: 34px;
      height: 34px;
      min-width: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .sidebar-logo img { height: 19px; width: auto; }

    /* Toggle button */
    .sidebar-toggle {
      width: 26px;
      height: 26px;
      min-width: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--stone);
      background: rgba(255,255,255,0.04);
      border: none;
      transition: all 0.15s;
    }
    .sidebar-toggle:hover { color: var(--bone); background: rgba(255,255,255,0.08); }
    .sidebar-toggle svg { width: 14px; height: 14px; transition: transform 0.52s cubic-bezier(.22,1,.36,1); }
    .sidebar.expanded .sidebar-toggle svg { transform: rotate(180deg); }

    .sidebar-nav {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 4px;
      flex: 0 0 auto;
      width: 100%;
    }
    .sidebar.expanded .sidebar-nav {
      padding-left: 0;
    }

    .nav-item {
      width: 42px;
      height: 42px;
      min-width: 42px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      color: var(--stone-dark);
      background: transparent;
      border: none;
      transition:
        width 0.25s cubic-bezier(.4,0,.2,1),
        padding 0.25s cubic-bezier(.4,0,.2,1),
        gap 0.25s cubic-bezier(.4,0,.2,1),
        color 0.2s,
        background 0.2s;
      position: relative;
      overflow: hidden;
      white-space: nowrap;
    }
    .nav-item:hover { color: var(--bone); background: rgba(255,255,255,0.04); }
    .nav-item.active {
      color: var(--ink);
      background: var(--lime);
    }
    .nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
    .nav-item .nav-label {
      font-size: 13px;
      font-weight: 500;
      opacity: 0;
      width: 0;
      overflow: hidden;
      transition: opacity 0.2s, width 0.2s;
    }
    .sidebar.expanded .nav-item {
      width: 100%;
      justify-content: flex-start;
      padding-left: 12px;
      gap: 12px;
    }
    .sidebar.expanded .nav-item .nav-label {
      opacity: 1;
      width: auto;
    }

    .sidebar-bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
      width: 100%;
    }
    .sidebar.expanded .sidebar-bottom { align-items: flex-start; }

    .sidebar-avatar {
      width: 30px;
      height: 30px;
      min-width: 30px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      color: var(--bone);
      overflow: hidden;
      flex-shrink: 0;
    }
    .sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .sidebar-avatar .online-dot {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--lime);
      border: 2px solid var(--ink-light);
    }

    /* User dropdown */
    .user-dropdown {
      position: fixed;
      bottom: 60px;
      left: 8px;
      background: var(--charcoal);
      border: 1px solid var(--border-hover);
      border-radius: 12px;
      padding: 8px;
      z-index: 200;
      min-width: 160px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
      display: none;
    }
    .user-dropdown.show { display: block; }
    .user-dropdown-item {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 10px 12px;
      font-size: 13px;
      color: var(--bone);
      background: transparent;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.1s;
    }
    .user-dropdown-item:hover { background: rgba(255,255,255,0.06); }
    .user-dropdown-item.danger { color: #f87171; }
    .user-dropdown-item svg { width: 16px; height: 16px; }

    /* =================== MAIN AREA =================== */
    .main-area {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
      position: relative;
      transition: none;
    }

    /* ---- Top Bar ---- */
    .top-bar {
      height: 56px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      flex-shrink: 0;
    }

    .top-bar-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .workflow-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
    }
    .workflow-title svg { width: 14px; height: 14px; color: var(--stone); }

    .save-status {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--stone);
    }
    .save-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #4ade80;
    }

    .top-bar-center {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .undo-redo-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: transparent;
      border: none;
      color: var(--stone-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }
    .undo-redo-btn:hover { color: var(--bone); background: rgba(255,255,255,0.04); }
    .undo-redo-btn svg { width: 18px; height: 18px; }

    .top-bar-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .btn-preview {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 500;
      color: var(--bone);
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--border);
      padding: 7px 16px;
      border-radius: 8px;
      transition: all 0.15s;
    }
    .btn-preview:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.08); }
    .btn-preview svg { width: 14px; height: 14px; }

    .btn-publish {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      background: var(--lime);
      padding: 7px 18px;
      border-radius: 8px;
      border: none;
      transition: all 0.15s;
    }
    .btn-publish:hover { box-shadow: 0 4px 16px rgba(200,240,62,0.3); transform: translateY(-1px); }
    .btn-publish:disabled { 
      opacity: 0.6; 
      cursor: not-allowed; 
      transform: none !important;
      box-shadow: none !important;
    }
    .btn-publish svg { width: 14px; height: 14px; }

    /* ---- Content ---- */
    .content-area {
      flex: 1;
      overflow: hidden;
      position: relative;
    }

    .tab-content {
      display: none;
      height: 100%;
      overflow-y: auto;
    }
    .tab-content.active { display: flex; }

    /* ---- Bottom Status Bar ---- */
    .status-bar {
      height: 48px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      flex-shrink: 0;
      background: var(--ink-light);
    }

    .status-left {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 12px;
      color: var(--stone);
    }
    .status-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(200,240,62,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .status-icon svg { width: 16px; height: 16px; color: var(--lime); }

    .status-dots {
      display: flex;
      gap: 4px;
    }
    .status-dots span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--lime);
      opacity: 0.4;
      animation: pulse 1.5s infinite;
    }
    .status-dots span:nth-child(2) { animation-delay: 0.3s; }
    .status-dots span:nth-child(3) { animation-delay: 0.6s; }

    @keyframes pulse {
      0%, 100% { opacity: 0.4; }
      50% { opacity: 1; }
    }

    .status-right {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .progress-section {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .progress-label {
      font-size: 12px;
      color: var(--stone);
    }
    .progress-bar {
      width: 200px;
      height: 6px;
      border-radius: 3px;
      background: rgba(255,255,255,0.06);
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      background: var(--lime);
      border-radius: 3px;
      transition: width 0.5s ease;
    }
    .progress-pct {
      font-size: 13px;
      font-weight: 600;
      color: var(--lime);
      min-width: 36px;
    }

    /* =================== WORKFLOW TAB =================== */
    #tab-workflow {
      flex-direction: row;
    }

    .workflow-canvas-area {
      flex: 1;
      position: relative;
      overflow: auto;
      background:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0);
      background-size: 16px 16px;
      background-position: center center;
      
      /* Hide scrollbars completely */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
    }
    .workflow-canvas-area::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    }

    /* Loading Screen */
    .workflow-loading {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      background: var(--ink);
      z-index: 9999;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .workflow-loading.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .loading-spinner {
      width: 48px;
      height: 48px;
      border: 3px solid rgba(255,255,255,0.1);
      border-top-color: var(--lime);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

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

    .loading-text {
      font-size: 14px;
      font-weight: 500;
      color: var(--stone);
      letter-spacing: 0.5px;
    }

    .workflow-canvas {
      position: relative;
      /* Make canvas much larger to allow free movement */
      width: 4000px;
      height: 4000px;
      padding: 2000px;
    }

    .canvas-drop-zone {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      border: 2px dashed rgba(255,255,255,0.1);
      border-radius: 12px;
      color: var(--stone-dark);
      font-size: 13px;
      transition: all 0.2s;
      z-index: 2;
      pointer-events: none;
    }
    .canvas-drop-zone.drag-over {
      border-color: var(--lime);
      color: var(--lime);
      background: rgba(200,240,62,0.05);
    }
    .canvas-drop-zone svg { width: 18px; height: 18px; }

    /* Canvas Nodes */
    .canvas-node {
      position: absolute;
      width: 150px;
      background: var(--charcoal);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px;
      cursor: grab;
      user-select: none;
      transition: box-shadow 0.2s, border-color 0.2s;
      z-index: 10;
    }
    .canvas-node:hover {
      border-color: var(--border-hover);
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }
    .canvas-node.selected {
      border-color: var(--lime);
      box-shadow: 0 0 0 3px rgba(200,240,62,0.4), 0 0 16px rgba(200,240,62,0.15);
    }

    .canvas-node.dragging {
      cursor: grabbing;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
      z-index: 100;
    }

    /* Connection ports */
    .node-port {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--ink);
      border: 2px solid var(--stone-dark);
      cursor: crosshair;
      z-index: 15;
      opacity: 0;
      transition: all 0.2s cubic-bezier(.4,0,.2,1);
    }
    .canvas-node:hover .node-port { opacity: 1; }
    .node-port:hover {
      background: var(--lime);
      border-color: var(--lime);
      transform: scale(1.5);
      box-shadow: 0 0 8px rgba(200,240,62,0.5);
    }
    .port-top { top: -4px; left: 50%; transform: translateX(-50%); }
    .port-right { right: -4px; top: 50%; transform: translateY(-50%); }
    .port-bottom { bottom: -4px; left: 50%; transform: translateX(-50%); }
    .port-left { left: -4px; top: 50%; transform: translateY(-50%); }
    .port-top:hover { transform: translateX(-50%) scale(1.5); }
    .port-right:hover { transform: translateY(-50%) scale(1.5); }
    .port-bottom:hover { transform: translateX(-50%) scale(1.5); }
    .port-left:hover { transform: translateY(-50%) scale(1.5); }

    /* Connection mode */
    .canvas-node.connecting-source {
      border-color: var(--lime);
      box-shadow: 0 0 0 3px rgba(200,240,62,0.2);
    }
    .canvas.connecting .canvas-node:not(.connecting-source):hover {
      border-color: var(--lime);
      box-shadow: 0 0 12px rgba(200,240,62,0.15);
    }

    /* Connection animations */
    @keyframes flowDash {
      from { stroke-dashoffset: 24; }
      to   { stroke-dashoffset: 0; }
    }
    @keyframes fadeInLine {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    .connection-line {
      stroke-dasharray: 8, 4;
      animation: flowDash 0.8s linear infinite;
    }

    .temp-connection {
      stroke-dasharray: 8, 4;
      opacity: 0.7;
      animation: flowDash 0.6s linear infinite;
    }

    /* Live workflow conversation — same charcoal card style as normal nodes,
       with a restrained lime edge so recent activity is easy to spot. */
    .canvas-node.message-node {
      width: 280px;
      min-height: 142px;
      padding: 13px 14px 12px;
      cursor: grab;
      background: var(--charcoal);
      border-color: var(--border);
      box-shadow: none;
    }
    .canvas-node.message-node:hover {
      border-color: var(--border-hover);
      box-shadow: 0 4px 20px rgba(0,0,0,.30);
    }
    .canvas-node.message-node.selected {
      border-color: var(--lime);
      box-shadow: 0 0 0 3px rgba(200,240,62,.18), 0 4px 20px rgba(0,0,0,.30);
    }
    .canvas-node.message-node.customer-asking-node {
      width: 230px;
      min-height: 118px;
    }
    .canvas-node.message-node.ai-reply-node { min-height: 142px; }
    /* Live message cards keep their graph connections, but their four border
       ports stay invisible so customer/AI messages read as clean cards. */
    .canvas-node.message-node .node-port {
      display: none;
    }
    .message-card-head { display:flex; align-items:center; gap:8px; min-width:0; }
    .message-card-icon {
      width:24px; height:24px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
      border-radius:8px; color:var(--lime); background:rgba(200,240,62,.09); border:1px solid rgba(200,240,62,.20);
    }
    .message-card-icon svg { width:13px; height:13px; }
    .message-card-source { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--cream); font-size:11px; font-weight:700; }
    .message-card-live { color:var(--lime); font-size:8px; line-height:1; font-weight:800; letter-spacing:.09em; padding:4px 5px; border-radius:999px; background:rgba(200,240,62,.08); border:1px solid rgba(200,240,62,.18); }
    .message-card-copy {
      display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
      margin:11px 0 10px; min-height:56px; color:var(--cream); font-size:12px; font-weight:500; line-height:1.45; word-break:break-word;
    }
    /* A slow, restrained entrance: no lime flash, bloom, or overshoot. */
    .canvas-node.message-node.activity-enter {
      pointer-events: none;
      will-change: transform, opacity;
      animation: activityCardEnter 920ms cubic-bezier(.22,.8,.28,1) both;
    }
    @keyframes activityCardEnter {
      0%   { opacity:0; transform:translateY(18px) scale(.985); }
      58%  { opacity:.96; transform:translateY(1px) scale(1); }
      78%  { opacity:1; transform:translateY(-1px) scale(1); }
      100% { opacity:1; transform:translateY(0) scale(1); }
    }
    .canvas-node.message-node.activity-exit {
      pointer-events: none;
      will-change: transform, opacity;
      animation: activityCardExit 520ms cubic-bezier(.4,0,.2,1) both;
    }
    @keyframes activityCardExit {
      0%   { opacity:1; transform:translateY(0) scale(1); }
      55%  { opacity:.62; transform:translateY(-4px) scale(.995); }
      100% { opacity:0; transform:translateY(-13px) scale(.98); }
    }
    @media (prefers-reduced-motion: reduce) {
      .canvas-node.message-node,
      .canvas-node.message-node.activity-enter,
      .canvas-node.message-node.activity-exit,
      .message-card-pulse { animation: none; }
    }
    .message-card-footer { display:flex; align-items:center; gap:6px; color:var(--stone); font-size:10px; font-weight:600; min-width:0; }
    .message-card-status { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .message-card-expiry { margin-left:auto; flex:0 0 auto; color:var(--lime); font-variant-numeric:tabular-nums; white-space:nowrap; }
    .message-card-pulse { width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:var(--lime); box-shadow:0 0 0 0 rgba(200,240,62,.48); animation:messagePulse 1.5s ease-out infinite; }
    @keyframes messagePulse { 0%{box-shadow:0 0 0 0 rgba(200,240,62,.45)} 75%,100%{box-shadow:0 0 0 7px rgba(200,240,62,0)} }
    .connection-line.message-flow-line { stroke-dasharray:5,5; animation:flowMessageDash .7s linear infinite; filter:drop-shadow(0 0 3px rgba(200,240,62,.35)); }
    @keyframes flowMessageDash { from{stroke-dashoffset:20} to{stroke-dashoffset:0} }

    /* AI Agent node */
    .canvas-node.agent-node {
      border-color: rgba(200,240,62,0.25);
      background: linear-gradient(135deg, var(--charcoal) 0%, rgba(200,240,62,0.04) 100%);
    }
    .canvas-node.agent-node:hover {
      border-color: rgba(200,240,62,0.4);
      box-shadow: 0 4px 24px rgba(200,240,62,0.12);
    }
    .canvas-node.agent-node.selected {
      border-color: var(--lime);
      box-shadow: 0 0 0 2px rgba(200,240,62,0.25), 0 4px 24px rgba(200,240,62,0.15);
    }
    .canvas-node.agent-node .node-icon {
      background: rgba(200,240,62,0.1);
      color: var(--lime);
    }
    .node-configure {
      margin-top: 10px;
      width: 100%;
      padding: 6px 0;
      font-size: 11px;
      font-weight: 600;
      color: var(--lime);
      background: rgba(200,240,62,0.08);
      border: 1px solid rgba(200,240,62,0.15);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .node-configure:hover {
      background: rgba(200,240,62,0.15);
      border-color: rgba(200,240,62,0.3);
    }

    /* Website Studio button — use the Everline lime accent */
    .node-configure-website {
      min-height: 30px;
      padding: 7px 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: var(--ink);
      background: linear-gradient(135deg, #D9FF63 0%, var(--lime) 52%, #A8D52F 100%);
      border-color: rgba(200,240,62,0.8);
      border-radius: 9px;
      box-shadow: 0 5px 14px rgba(137,170,36,0.22), inset 0 1px 0 rgba(255,255,255,0.35);
      letter-spacing: 0.01em;
      transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    }
    .node-configure-website svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      transition: transform 0.18s ease;
    }
    .node-configure-website:hover {
      color: var(--ink);
      background: linear-gradient(135deg, #E6FF86 0%, #D0F94D 52%, var(--lime) 100%);
      border-color: #E6FF86;
      box-shadow: 0 7px 18px rgba(170,205,45,0.3), inset 0 1px 0 rgba(255,255,255,0.45);
      filter: saturate(1.05);
      transform: translateY(-1px);
    }
    .node-configure-website:hover svg { transform: rotate(35deg); }
    .node-configure-website:active { transform: translateY(0) scale(.98); }
    .website-node .node-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .node-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 8px;
    }

    .node-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(255,255,255,0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--bone);
    }
    .node-icon svg { width: 20px; height: 20px; }

    .node-menu {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      background: transparent;
      border: none;
      color: var(--stone-dark);
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }
    .node-menu:hover { color: var(--bone); background: rgba(255,255,255,0.06); }

    .node-title {
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .node-status {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--stone);
    }

    .canvas-node.agent-required-missing {
      border-color: rgba(248, 113, 113, 0.55);
      box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.1);
    }

    .status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
    }

    /* Context menu */
    .node-context-menu {
      position: fixed;
      background: var(--charcoal);
      border: 1px solid var(--border-hover);
      border-radius: 10px;
      padding: 6px;
      z-index: 1000;
      min-width: 140px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    }
    .node-context-menu button {
      display: block;
      width: 100%;
      text-align: left;
      padding: 8px 12px;
      font-size: 12px;
      color: var(--bone);
      background: transparent;
      border: none;
      border-radius: 6px;
      transition: background 0.1s;
    }
    .node-context-menu button:hover { background: rgba(255,255,255,0.06); }
    .node-context-menu button[data-action="delete"] { color: #f87171; }

    /* Services Panel (right side) */
    .services-panel {
      width: 240px;
      background: var(--ink-light);
      border-left: 1px solid var(--border);
      padding: 20px;
      flex-shrink: 0;
      overflow-y: auto;
    }

    .panel-title {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .panel-sub {
      font-size: 12px;
      color: var(--stone-dark);
      margin-bottom: 16px;
    }

    .service-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      cursor: grab;
      transition: background 0.15s;
      font-size: 13px;
      color: var(--bone);
      border: 1px solid transparent;
    }
    .service-item:hover {
      background: rgba(255,255,255,0.04);
      border-color: var(--border);
    }
    .service-item:active { cursor: grabbing; }
    .service-item.agent-service {
      border-color: rgba(200,240,62,0.15);
      background: rgba(200,240,62,0.03);
    }
    .service-item.agent-service:hover {
      border-color: rgba(200,240,62,0.3);
      background: rgba(200,240,62,0.06);
    }
    .service-item.agent-service .service-icon {
      background: rgba(200,240,62,0.1);
      color: var(--lime);
    }

    .service-icon {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--bone);
    }
    .service-icon svg { width: 16px; height: 16px; }
    

    .service-name { flex: 1; }

    .agent-required-badge[hidden] {
      display: none !important;
    }
    .agent-required-badge {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      width: fit-content;
      margin-top: 8px;
      padding: 3px 7px;
      border: 1px solid rgba(200,240,62,0.35);
      border-radius: 999px;
      color: var(--lime);
      background: rgba(200,240,62,0.08);
      font-size: 8px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: 0.15px;
      text-align: center;
      text-transform: uppercase;
    }

    .service-drag-handle {
      color: var(--stone-dark);
      font-size: 12px;
      letter-spacing: -1px;
    }

    /* =================== CONNECTIONS TAB =================== */
    #tab-connections {
      flex-direction: column;
      padding: 32px;
      gap: 24px;
    }

    .section-header h2 {
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.5px;
    }
    .section-sub {
      font-size: 14px;
      color: var(--stone);
      margin-top: 4px;
    }

    .connections-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px;
    }

    .connection-card {
      background: var(--charcoal);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 20px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .connection-card:hover {
      border-color: var(--border-hover);
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }
    .connection-card.connected { border-color: rgba(74,222,128,0.15); }

    .conn-card-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 12px;
    }

    .conn-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(255,255,255,0.04);
      color: var(--bone);
    }
    .conn-icon svg { width: 22px; height: 22px; }

    .conn-status-badge {
      font-size: 10px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .conn-status-badge.online { background: rgba(74,222,128,0.1); color: #4ade80; }
    .conn-status-badge.offline { background: rgba(248,113,113,0.1); color: #f87171; }

    .conn-name {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .conn-last-sync {
      font-size: 12px;
      color: var(--stone-dark);
      margin-bottom: 14px;
    }

    .conn-btn {
      width: 100%;
      padding: 8px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid var(--border);
      transition: all 0.15s;
    }
    .conn-btn.connect {
      background: var(--lime);
      color: var(--ink);
      border-color: var(--lime);
    }
    .conn-btn.connect:hover { box-shadow: 0 4px 12px rgba(200,240,62,0.3); }
    .conn-btn.disconnect {
      background: transparent;
      color: var(--stone);
    }
    .conn-btn.disconnect:hover { color: #f87171; border-color: rgba(248,113,113,0.3); }

    /* =================== ANALYTICS TAB =================== */
    #tab-analytics {
      flex-direction: column;
      padding: 32px;
      gap: 24px;
    }

    .metrics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;
    }

    .metric-card {
      background: var(--charcoal);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 20px;
    }

    .metric-label {
      font-size: 12px;
      color: var(--stone);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .metric-value {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -1px;
      margin-bottom: 4px;
    }

    .metric-change {
      font-size: 12px;
      font-weight: 600;
    }
    .metric-change.positive { color: #4ade80; }
    .metric-change.negative { color: #f87171; }

    .analytics-charts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .chart-card {
      background: var(--charcoal);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 24px;
    }

    .chart-card h3 {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 20px;
    }

    .bar-chart { display: flex; flex-direction: column; gap: 12px; }

    .bar-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .bar-label {
      font-size: 12px;
      color: var(--stone);
      width: 80px;
      flex-shrink: 0;
    }

    .bar-track {
      flex: 1;
      height: 8px;
      border-radius: 4px;
      background: rgba(255,255,255,0.04);
      overflow: hidden;
    }

    .bar-fill {
      height: 100%;
      background: var(--lime);
      border-radius: 4px;
      transition: width 0.6s ease;
    }

    .bar-value {
      font-size: 12px;
      color: var(--stone);
      width: 50px;
      text-align: right;
      flex-shrink: 0;
    }

    .timeline-chart { height: 160px; display: flex; flex-direction: column; }

    .timeline-bars {
      flex: 1;
      display: flex;
      align-items: flex-end;
      gap: 6px;
    }

    .timeline-bar {
      flex: 1;
      background: var(--lime);
      border-radius: 4px 4px 0 0;
      opacity: 0.6;
      transition: opacity 0.2s;
      min-height: 4px;
    }
    .timeline-bar:hover { opacity: 1; }

    .timeline-labels {
      display: flex;
      gap: 6px;
      margin-top: 8px;
    }
    .timeline-labels span {
      flex: 1;
      text-align: center;
      font-size: 10px;
      color: var(--stone-dark);
    }

    /* =================== CONTACTS TAB =================== */
    #tab-contacts {
      flex-direction: column;
      padding: 32px;
      gap: 20px;
    }

    .contacts-search { max-width: 400px; }

    .search-input {
      width: 100%;
      padding: 10px 16px;
      background: var(--charcoal);
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--bone);
      font-size: 13px;
      outline: none;
      transition: border-color 0.2s;
    }
    .search-input:focus { border-color: var(--lime); }
    .search-input::placeholder { color: var(--stone-dark); }

    .contacts-table-wrapper {
      overflow-x: auto;
      border-radius: 14px;
      border: 1px solid var(--border);
    }

    .contacts-table {
      width: 100%;
      border-collapse: collapse;
    }

    .contacts-table th {
      text-align: left;
      padding: 12px 16px;
      font-size: 11px;
      font-weight: 600;
      color: var(--stone-dark);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: var(--charcoal);
      border-bottom: 1px solid var(--border);
    }

    .contacts-table td {
      padding: 14px 16px;
      font-size: 13px;
      border-bottom: 1px solid var(--border);
      background: var(--ink-light);
    }

    .contacts-table tr:last-child td { border-bottom: none; }
    .contacts-table tr:hover td { background: var(--charcoal); }

    .contact-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(200,240,62,0.1);
      color: var(--lime);
      font-size: 12px;
      font-weight: 600;
      margin-right: 8px;
      vertical-align: middle;
    }

    .contact-info { display: flex; flex-direction: column; gap: 2px; }
    .contact-phone { font-size: 11px; color: var(--stone-dark); }

    .source-badge {
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 6px;
      background: rgba(255,255,255,0.04);
      color: var(--stone);
    }

    .status-badge {
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 6px;
      font-weight: 500;
    }
    .status-badge.active { background: rgba(74,222,128,0.1); color: #4ade80; }
    .status-badge.new { background: rgba(200,240,62,0.1); color: var(--lime); }
    .status-badge.inactive { background: rgba(255,255,255,0.04); color: var(--stone-dark); }

    .last-msg {
      color: var(--stone);
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* =================== EXPLORE TAB =================== */
    #tab-explore {
      flex-direction: column;
      padding: 32px;
      gap: 24px;
    }

    .explore-search { max-width: 400px; }

    .explore-categories { display: flex; flex-direction: column; gap: 28px; }

    .category-title {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      color: var(--stone);
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .category-services {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 12px;
    }

    .explore-card {
      background: var(--charcoal);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 20px;
      transition: border-color 0.2s;
    }
    .explore-card:hover { border-color: var(--border-hover); }

    .explore-icon { font-size: 28px; display: block; margin-bottom: 10px; }

    .explore-card h4 {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .explore-card p {
      font-size: 12px;
      color: var(--stone-dark);
      margin-bottom: 14px;
      line-height: 1.5;
    }

    .explore-btn {
      width: 100%;
      padding: 8px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      background: rgba(255,255,255,0.04);
      color: var(--bone);
      border: 1px solid var(--border);
      transition: all 0.15s;
    }
    .explore-btn:hover { border-color: var(--lime); color: var(--lime); }
    .explore-btn.connected {
      background: rgba(74,222,128,0.1);
      color: #4ade80;
      border-color: rgba(74,222,128,0.2);
    }

    /* =================== SETTINGS TAB =================== */
    #tab-settings {
      flex-direction: column;
      padding: 32px;
      gap: 24px;
      max-width: 700px;
    }

    .settings-sections { display: flex; flex-direction: column; gap: 24px; }

    .settings-group {
      background: var(--charcoal);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 24px;
    }

    .settings-group h3 {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 16px;
    }

    .settings-group.danger { border-color: rgba(248,113,113,0.15); }
    .settings-group.danger h3 { color: #f87171; }

    .setting-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
      gap: 16px;
    }
    .setting-row:last-child { border-bottom: none; }

    .setting-row label {
      font-size: 13px;
      color: var(--bone);
    }

    .setting-input {
      padding: 8px 14px;
      background: var(--ink-light);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--bone);
      font-size: 13px;
      outline: none;
      width: 240px;
      transition: border-color 0.2s;
    }
    .setting-input:focus { border-color: var(--lime); }
    .setting-input:disabled { opacity: 0.5; cursor: not-allowed; }

    .setting-hint {
      font-size: 11px;
      color: var(--stone-dark);
      margin-top: 2px;
    }

    .toggle-row { gap: 24px; }

    .toggle {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      flex-shrink: 0;
    }
    .toggle input { opacity: 0; width: 0; height: 0; }
    .toggle-slider {
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0.08);
      border-radius: 12px;
      transition: background 0.2s;
      cursor: pointer;
    }
    .toggle-slider::before {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--bone);
      top: 3px;
      left: 3px;
      transition: transform 0.2s;
    }
    .toggle input:checked + .toggle-slider { background: var(--lime); }
    .toggle input:checked + .toggle-slider::before { transform: translateX(20px); background: var(--ink); }

    .btn-danger {
      padding: 8px 16px;
      background: rgba(248,113,113,0.1);
      color: #f87171;
      border: 1px solid rgba(248,113,113,0.2);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      transition: all 0.15s;
    }
    .btn-danger:hover { background: rgba(248,113,113,0.2); }

    .settings-save { padding-top: 8px; }

    .btn-save {
      padding: 10px 28px;
      background: var(--lime);
      color: var(--ink);
      border: none;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      transition: all 0.15s;
    }
    .btn-save:hover { box-shadow: 0 4px 16px rgba(200,240,62,0.3); }
    .btn-save.saved { background: #4ade80; }

    /* =================== PROFILE TAB =================== */
    #tab-profile {
      flex-direction: column;
      padding: 32px;
      gap: 24px;
      max-width: 600px;
    }

    .profile-card {
      background: var(--charcoal);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }

    .profile-avatar-large {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(200,240,62,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      font-weight: 700;
      color: var(--lime);
    }

    .btn-change-avatar {
      font-size: 12px;
      color: var(--lime);
      background: transparent;
      border: none;
      font-weight: 500;
    }
    .btn-change-avatar:hover { text-decoration: underline; }

    .profile-fields {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .profile-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .profile-field label {
      font-size: 11px;
      color: var(--stone-dark);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .profile-section {
      background: var(--charcoal);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 24px;
    }

    .profile-section h3 {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 16px;
    }

    .connected-accounts { display: flex; flex-direction: column; gap: 10px; }

    .account-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }
    .account-row:last-child { border-bottom: none; }

    .account-icon { font-size: 20px; }
    .account-name { flex: 1; font-size: 13px; }
    .account-status { font-size: 12px; color: var(--stone-dark); }
    .account-status.connected { color: #4ade80; }

    /* =================== RESPONSIVE =================== */
    @media (max-width: 768px) {
      .sidebar { width: 48px; }
      .services-panel { display: none; }
      .analytics-charts { grid-template-columns: 1fr; }
      .setting-input { width: 160px; }
    }
  

    /* ============================================
       AI CHAT — flex sibling (reflows dashboard)
       Not overlay / fixed. Slight shrink only.
       ============================================ */

    .btn-ai-agent {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: var(--bone);
      background: rgba(200,240,62,0.08);
      border: 1px solid rgba(200,240,62,0.22);
      padding: 7px 14px;
      border-radius: 8px;
      transition: all 0.15s;
      cursor: pointer;
    }
    .btn-ai-agent:hover {
      border-color: rgba(200,240,62,0.4);
      background: rgba(200,240,62,0.14);
    }
    .btn-ai-agent.active {
      background: rgba(200,240,62,0.18);
      border-color: rgba(200,240,62,0.45);
      color: var(--lime);
    }
    .btn-ai-agent svg { width: 15px; height: 15px; flex-shrink: 0; }

    /* Always-available Ask when workflow top-bar is hidden */
    .ask-ai-float {
      position: absolute;
      top: 14px;
      right: 18px;
      z-index: 40;
      display: none;
    }
    body:not(.ai-chat-open) .main-area.ask-float-visible .ask-ai-float {
      display: block;
    }

    /* Flex child of body — sits beside .main-area */
    .ai-chat-sidebar {
      width: 0;
      max-width: var(--ai-chat-width);
      height: 100vh;
      flex-shrink: 0;
      overflow: hidden;
      background: var(--ink-light);
      border-left: 0 solid transparent;
      display: flex;
      flex-direction: column;
      opacity: 0;
      transition:
        width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.22s ease,
        border-color 0.22s ease;
      pointer-events: none;
    }

    body.ai-chat-open .ai-chat-sidebar,
    .ai-chat-sidebar.open {
      width: var(--ai-chat-width);
      border-left: 1px solid var(--border);
      opacity: 1;
      pointer-events: auto;
    }

    /* Keep canvas usable: tuck services rail while Ask is open */
    body.ai-chat-open .services-panel {
      width: 0;
      padding: 0;
      overflow: hidden;
      border-left-width: 0;
      opacity: 0;
      transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    }
    .services-panel {
      transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    }

    .ai-chat-inner {
      width: var(--ai-chat-width);
      height: 100%;
      display: flex;
      flex-direction: column;
      min-width: var(--ai-chat-width);
    }

    .ai-chat-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .ai-chat-header-left,
    .ai-chat-header-right {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .ai-chat-new {
      display: flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      border: none;
      color: var(--bone);
      font-size: 13px;
      font-weight: 600;
      padding: 6px 8px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s;
    }
    .ai-chat-new:hover { background: rgba(255,255,255,0.06); }
    .ai-chat-new svg { width: 16px; height: 16px; color: var(--stone); }

    .ai-chat-icon-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: transparent;
      border: none;
      color: var(--stone);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s;
    }
    .ai-chat-icon-btn:hover {
      background: rgba(255,255,255,0.06);
      color: var(--bone);
    }
    .ai-chat-icon-btn svg { width: 16px; height: 16px; }

    .ai-chat-feedback {
      background: transparent;
      border: none;
      color: var(--stone);
      font-size: 12px;
      font-weight: 500;
      padding: 6px 8px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .ai-chat-feedback:hover {
      color: var(--bone);
      background: rgba(255,255,255,0.06);
    }

    .ai-chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.1) transparent;
    }

    .ai-chat-messages::-webkit-scrollbar { width: 5px; }
    .ai-chat-messages::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.1);
      border-radius: 10px;
    }

    .ai-chat-welcome {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 8px 4px 4px;
      gap: 6px;
    }
    .ai-chat-welcome h4 {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 700;
      color: var(--bone);
      letter-spacing: -0.02em;
    }
    .ai-chat-welcome p {
      font-size: 13px;
      color: var(--stone);
      line-height: 1.5;
    }

    .ai-chat-quick {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }
    .ai-chat-quick button {
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      color: var(--bone);
      font-size: 12px;
      font-weight: 500;
      padding: 8px 12px;
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .ai-chat-quick button:hover {
      border-color: rgba(200,240,62,0.35);
      background: rgba(200,240,62,0.08);
    }

    .ai-msg {
      display: flex;
      gap: 10px;
      animation: aiMsgIn 0.25s ease;
      max-width: 100%;
    }
    .ai-msg.user { flex-direction: row-reverse; }

    @keyframes aiMsgIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .ai-msg-avatar {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(200,240,62,0.12);
      border: 1px solid rgba(200,240,62,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
    }
    .ai-msg.user .ai-msg-avatar {
      background: rgba(255,255,255,0.08);
      border-color: var(--border);
    }
    .ai-msg-avatar img { width: 16px; height: 16px; object-fit: contain; }
    .ai-msg-avatar svg { width: 14px; height: 14px; color: var(--stone); }

    .ai-msg-bubble {
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
      color: var(--bone);
      font-size: 13px;
      line-height: 1.55;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .ai-msg.user .ai-msg-bubble {
      background: rgba(200,240,62,0.1);
      border-color: rgba(200,240,62,0.22);
    }

    .ai-stream-cursor {
      display: inline-block;
      width: 2px;
      height: 0.9em;
      background: var(--lime);
      margin-left: 2px;
      vertical-align: text-bottom;
      animation: aiBlink 0.8s step-end infinite;
    }
    @keyframes aiBlink {
      50% { opacity: 0; }
    }

    .ai-chat-input-area {
      padding: 12px 14px 16px;
      flex-shrink: 0;
      border-top: 1px solid var(--border);
    }

    .ai-chat-input-box {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border-hover);
      border-radius: 16px;
      padding: 10px 10px 10px 14px;
      transition: border-color 0.15s;
    }
    .ai-chat-input-box:focus-within {
      border-color: rgba(200,240,62,0.35);
    }

    .ai-chat-input {
      flex: 1;
      background: transparent;
      border: none;
      color: var(--bone);
      font-size: 13px;
      font-family: var(--font-body);
      resize: none;
      max-height: 100px;
      min-height: 22px;
      outline: none;
      line-height: 1.45;
      padding: 2px 0;
    }
    .ai-chat-input::placeholder { color: var(--stone-dark); }

    .ai-chat-send {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--lime);
      border: none;
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s;
      flex-shrink: 0;
    }
    .ai-chat-send:hover {
      box-shadow: 0 2px 12px rgba(200,240,62,0.35);
    }
    .ai-chat-send:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      box-shadow: none;
    }
    .ai-chat-send svg { width: 15px; height: 15px; }

    /* Narrow screens: overlay panel so dashboard stays usable */
    @media (max-width: 1100px) {
      :root { --ai-chat-width: 300px; }
    }

    @media (max-width: 900px) {
      .ai-chat-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 200;
        height: 100vh;
        box-shadow: -12px 0 40px rgba(0,0,0,0.45);
      }
      body.ai-chat-open .ai-chat-sidebar,
      .ai-chat-sidebar.open {
        width: min(var(--ai-chat-width), 100vw);
      }
    }

    /* ── Marquee / rubber-band selection ──────────────────────────────── */
    .marquee-rect {
      position: absolute;
      pointer-events: none;
      border: 1.5px solid var(--lime);
      background: rgba(200, 240, 62, 0.08);
      border-radius: 4px;
      z-index: 9999;
      box-shadow: 0 0 0 1px rgba(200,240,62,0.15);
    }

    /* Connection line selected state */
    .connection-line.conn-selected {
      stroke: #ffffff !important;
      stroke-width: 3.5 !important;
      filter: drop-shadow(0 0 6px rgba(200,240,62,0.7));
      animation: none !important;
      stroke-dasharray: none !important;
    }

    /* Suppress pointer cursor on canvas while marquee is active */
    .workflow-canvas-area.marquee-active {
      cursor: crosshair !important;
    }


    .status-dots.hidden { display: none; }

    .node-status.status-connected {
      color: #4ade80;
    }
    .status-dot-connected {
      box-shadow: 0 0 0 3px rgba(74,222,128,0.12), 0 0 8px rgba(74,222,128,0.45);
    }
    .node-configure-whatsapp.whatsapp-settings-button {
      color: #4ade80;
      background: rgba(74,222,128,0.08);
      border-color: rgba(74,222,128,0.22);
    }
    .node-configure-whatsapp.whatsapp-settings-button:hover {
      background: rgba(74,222,128,0.14);
      border-color: rgba(74,222,128,0.38);
    }
    .whatsapp-settings-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 4px 0 12px;
      color: #4ade80;
      font-size: 13px;
      font-weight: 700;
    }
    .whatsapp-settings-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #4ade80;
      box-shadow: 0 0 0 4px rgba(74,222,128,0.12), 0 0 10px rgba(74,222,128,0.45);
    }
    .whatsapp-settings-help {
      margin: 0 auto 18px;
      max-width: 300px;
      color: var(--stone);
      font-size: 12px;
      line-height: 1.55;
    }
    .whatsapp-settings-ai-row {
      text-align: left;
      margin: 4px 0 18px;
      padding: 12px 14px;
      background: var(--ink-light);
      border: 1px solid var(--border);
      border-radius: 10px;
    }
    .whatsapp-settings-ai-row label { font-size: 13px; font-weight: 600; }
    .whatsapp-settings-ai-row .setting-hint { max-width: 210px; }
    .whatsapp-settings-actions {
      display: grid;
      gap: 8px;
    }
    .whatsapp-settings-disconnect {
      width: 100%;
      padding: 8px;
      color: #f87171;
      font-size: 12px;
      font-weight: 600;
      background: transparent;
      border: 1px solid rgba(248,113,113,0.22);
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .whatsapp-settings-disconnect:hover {
      background: rgba(248,113,113,0.08);
      border-color: rgba(248,113,113,0.4);
    }


    /* Interactive AI Chat workflow service */
    /* AI Chat — full-card voice surface */
    .canvas-node.ai-chat-node {
      width: 430px;
      min-height: 610px;
      padding: 0;
      overflow: hidden;
      background: #03060e;
      border: 1px solid rgba(176, 198, 255, .20);
      border-radius: 22px;
      box-shadow: 0 20px 70px rgba(0, 0, 0, .48), inset 0 1px rgba(255,255,255,.06);
    }
    .canvas-node.ai-chat-node:hover,
    .canvas-node.ai-chat-node.ai-chat-node-connected { border-color: rgba(180, 199, 255, .46); }
    .ai-chat-node-menu {
      position: absolute;
      z-index: 8;
      top: 13px;
      right: 12px;
      width: 29px;
      height: 29px;
      color: rgba(238, 243, 255, .72);
      background: rgba(11, 17, 34, .64);
      border: 1px solid rgba(222, 230, 255, .14);
      border-radius: 9px;
      opacity: .58;
    }
    .ai-chat-node-menu:hover { opacity: 1; background: rgba(35, 46, 80, .78); }
    .ai-chat-service {
      position: relative;
      display: flex;
      min-height: 608px;
      padding: 18px 20px 17px;
      isolation: isolate;
      flex-direction: column;
      overflow: hidden;
      cursor: default;
      background: radial-gradient(ellipse 78% 52% at 50% 39%, rgba(46, 81, 184, .20), transparent 65%), #03060e;
    }
    .ai-chat-service-background,
    .ai-chat-service-background i { position: absolute; inset: 0; pointer-events: none; }
    .ai-chat-service-background { z-index: -1; overflow: hidden; }
    .ai-chat-service-background::before,
    .ai-chat-service-background::after {
      position: absolute;
      width: 260px;
      height: 260px;
      content: '';
      filter: blur(55px);
      opacity: .26;
      border-radius: 50%;
      background: #3868ff;
    }
    .ai-chat-service-background::before { top: 26%; left: -31%; }
    .ai-chat-service-background::after { top: -34%; right: -36%; background: #bf9dff; }
    .ai-chat-service-background i:nth-child(1) { background-image: radial-gradient(rgba(255,255,255,.48) .6px, transparent .8px); background-size: 34px 34px; opacity: .12; }
    .ai-chat-service-background i:nth-child(2) { top: auto; height: 38%; background: linear-gradient(transparent, rgba(5, 10, 25, .94)); }
    .ai-chat-service-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 28px; color: rgba(232, 237, 255, .72); font-size: 10px; font-weight: 650; letter-spacing: .04em; }
    .ai-chat-service-identity { display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 70px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .ai-chat-service-status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #757b91; box-shadow: 0 0 0 3px rgba(117,123,145,.10); }
    .ai-chat-service-status-dot.status-dot-connected { background: #8da5ff; box-shadow: 0 0 12px rgba(141,165,255,.9); }
    .ai-chat-service-mode { padding: 4px 8px; color: #d8d3ff; letter-spacing: .1em; text-transform: uppercase; border: 1px solid rgba(203, 211, 255, .13); border-radius: 999px; background: rgba(201, 191, 255, .08); }
    .ai-chat-service-orb-stage { position: relative; display: grid; width: 100%; height: 310px; margin: 7px 0 -1px; place-items: center; }
    .ai-chat-service-orb-halo { position: absolute; width: 238px; height: 238px; border-radius: 50%; background: radial-gradient(circle, rgba(138, 165, 255, .32), rgba(94, 130, 255, .10) 45%, transparent 70%); filter: blur(8px); transform: scale(.92); transition: transform .6s ease, opacity .5s ease; }
    .ai-chat-service-orb { position: relative; z-index: 2; width: 188px; height: 188px; overflow: hidden; border: 1px solid rgba(221, 230, 255, .48); border-radius: 50%; background: radial-gradient(circle at 34% 24%, #eff4ff 0 2%, #abb9ff 13%, #6176e9 30%, #4360cd 50%, #3048a1 70%, #1d2864 100%); box-shadow: inset -22px -28px 48px rgba(13, 20, 74, .62), inset 18px 15px 34px rgba(224, 234, 255, .38), 0 0 36px rgba(108, 137, 255, .65), 0 0 115px rgba(81, 100, 230, .32); transform: translateZ(0); transition: transform .65s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease; }
    .ai-chat-service-orb-light { position: absolute; inset: 0; background: radial-gradient(ellipse 65% 42% at 48% 73%, rgba(255,255,255,.98), rgba(243,246,255,.82) 33%, rgba(189,197,255,.18) 69%, transparent 76%); mix-blend-mode: screen; }
    .ai-chat-service-orb-cloud { position: absolute; width: 160%; height: 66%; right: -28%; bottom: -21%; border-radius: 48% 50% 0 0; background: radial-gradient(ellipse at 17% 48%, rgba(255,255,255,.97) 0 16%, transparent 33%), radial-gradient(ellipse at 50% 20%, rgba(247,249,255,.96) 0 18%, transparent 37%), radial-gradient(ellipse at 83% 47%, rgba(223,228,255,.92) 0 21%, transparent 42%), linear-gradient(180deg, rgba(226,233,255,.7), #fff 70%); filter: blur(5px); transform: rotate(-6deg); }
    .ai-chat-service-orb-sheen { position: absolute; inset: 8% 16% 43% 13%; border-radius: 50%; background: linear-gradient(140deg, rgba(255,255,255,.9), transparent 56%); filter: blur(8px); opacity: .68; }
    .ai-chat-service-orbit { position: absolute; width: 238px; height: 107px; border: 1px solid rgba(159, 182, 255, .23); border-radius: 50%; transform: rotate(-18deg); }
    .ai-chat-service-orbit-one { width: 285px; height: 128px; border-color: rgba(188, 168, 255, .16); transform: rotate(37deg); }
    .ai-chat-service-orbit-two { width: 224px; height: 224px; border-style: dashed; border-color: rgba(126, 164, 255, .14); transform: rotate(24deg); }
    .ai-chat-service-wave { position: static; z-index: 3; display: block; width: 100%; height: 17px; opacity: 0; transition: opacity .2s; }
    .ai-chat-service-wave i { width: 3px; height: 5px; border-radius: 999px; background: #eef1ff; box-shadow: 0 0 8px #aec2ff; }
    .ai-chat-service-voice-copy { min-height: 68px; padding: 0 15px; text-align: center; }
    .ai-chat-service-state { color: #f5f7ff; font: 650 16px/1.25 var(--font-display); letter-spacing: -.025em; }
    .ai-chat-service-transcript { display: -webkit-box; max-width: 340px; min-height: 32px; margin: 7px auto 0; overflow: hidden; color: rgba(207, 217, 250, .67); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .ai-chat-service-voice { display: inline-flex; align-items: center; justify-content: center; align-self: center; gap: 7px; width: 102px; height: 42px; margin: 2px 0 13px; padding: 0; color: #071125; font-weight: 750; font-size: 12px; background: linear-gradient(135deg, #f7f8ff, #b7c6ff); border: 1px solid rgba(255,255,255,.85); border-radius: 999px; box-shadow: 0 7px 25px rgba(120,145,255,.30); transition: transform .2s, box-shadow .2s, opacity .2s, background .25s; }
    .ai-chat-service-voice svg { width: 17px; height: 17px; }
    .ai-chat-service-voice:hover:not(:disabled) { transform: translateY(-2px) scale(1.02); box-shadow: 0 11px 29px rgba(150,170,255,.48); }
    .ai-chat-service-voice:disabled { cursor: not-allowed; opacity: .42; }
    .ai-chat-service-composer { display: flex; align-items: flex-end; gap: 7px; margin-top: auto; padding: 8px 8px 8px 13px; background: rgba(8, 14, 30, .73); border: 1px solid rgba(218, 227, 255, .15); border-radius: 13px; transition: border-color .2s, box-shadow .2s; }
    .ai-chat-service-composer:focus-within { border-color: rgba(174, 194, 255, .65); box-shadow: 0 0 0 3px rgba(119, 145, 255, .12); }
    .ai-chat-service-input { width: 100%; min-height: 21px; max-height: 92px; padding: 3px 0; resize: none; color: #f6f8ff; font: 500 11px/1.45 var(--font-body); user-select: text; background: transparent; border: 0; outline: 0; }
    .ai-chat-service-input::placeholder { color: rgba(200, 211, 247, .42); }
    .ai-chat-service-input:disabled { cursor: not-allowed; }
    .ai-chat-service-actions { display: flex; align-items: center; }
    .ai-chat-service-send { display: grid; width: 29px; height: 29px; padding: 0; color: #071125; place-items: center; background: #d8e0ff; border: 1px solid #d8e0ff; border-radius: 9px; transition: filter .15s, transform .15s, opacity .15s; }
    .ai-chat-service-send svg { width: 14px; height: 14px; }
    .ai-chat-service-send:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
    .ai-chat-service-send:disabled { cursor: not-allowed; opacity: .35; }
    .ai-chat-service-history { margin-top: 9px; color: rgba(207, 217, 250, .57); font-size: 10px; }
    .ai-chat-service-history summary { width: max-content; max-width: 100%; cursor: pointer; list-style: none; }
    .ai-chat-service-history summary::-webkit-details-marker { display: none; }
    .ai-chat-service-history summary::before { margin-right: 5px; content: '⌄'; }
    .ai-chat-service-history[open] summary::before { content: '⌃'; }
    .ai-chat-service-messages { display: flex; flex-direction: column; gap: 8px; max-height: 130px; margin-top: 8px; padding: 4px 3px 3px 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(191,203,255,.35) transparent; }
    .ai-chat-service-empty { margin: 9px 0; color: rgba(207,217,250,.42); font-size: 10px; line-height: 1.45; text-align: center; }
    .ai-chat-service-message { display: flex; align-items: flex-start; gap: 6px; max-width: 94%; }
    .ai-chat-service-message.user { align-self: flex-end; flex-direction: row-reverse; }
    .ai-chat-service-avatar { display: grid; width: 21px; height: 21px; flex: 0 0 auto; color: #cbd8ff; place-items: center; background: rgba(160,180,255,.12); border: 1px solid rgba(184,202,255,.20); border-radius: 7px; }
    .ai-chat-service-message.user .ai-chat-service-avatar { color: #f6f8ff; background: rgba(246,248,255,.09); border-color: rgba(246,248,255,.13); }
    .ai-chat-service-avatar svg { width: 12px; height: 12px; }
    .ai-chat-service-bubble { margin: 0; padding: 7px 9px; color: #eef2ff; font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; background: rgba(197,210,255,.08); border: 1px solid rgba(209,220,255,.12); border-radius: 9px 9px 9px 3px; }
    .ai-chat-service-message.user .ai-chat-service-bubble { background: rgba(159,179,255,.18); border-color: rgba(189,204,255,.19); border-radius: 9px 9px 3px 9px; }
    .ai-chat-service-bubble.is-streaming::after { margin-left: 2px; color: #cbd8ff; content: '▋'; animation: aiChatCursor .8s steps(2, start) infinite; }
    @keyframes aiChatCursor { 50% { opacity: 0; } }
    .ai-chat-service-play { display: grid; width: 22px; height: 22px; flex: 0 0 auto; align-self: flex-end; padding: 0; color: #d7e1ff; place-items: center; background: rgba(183,202,255,.10); border: 1px solid rgba(189,207,255,.18); border-radius: 7px; }
    .ai-chat-service-play:hover, .ai-chat-service-play.is-playing { color: #071125; background: #d8e0ff; border-color: #d8e0ff; }
    .ai-chat-service-play svg { width: 11px; height: 11px; }
    .ai-chat-service[data-ai-chat-state="recording"] .ai-chat-service-orb { animation: aiChatOrbRecord 1.05s ease-in-out infinite; box-shadow: inset -22px -28px 48px rgba(13, 20, 74, .62), inset 18px 15px 34px rgba(224, 234, 255, .42), 0 0 55px rgba(124, 163, 255, .93), 0 0 148px rgba(100,120,255,.48); }
    .ai-chat-service[data-ai-chat-state="recording"] .ai-chat-service-orb-halo { opacity: .95; transform: scale(1.22); animation: aiChatHalo 1.05s ease-in-out infinite; }
    .ai-chat-service[data-ai-chat-state="recording"] .ai-chat-service-voice { background: linear-gradient(135deg, #f4f6ff, #c1a8ff); animation: aiChatMic 1.05s ease-in-out infinite; }
    .ai-chat-service[data-ai-chat-state="recording"] .ai-chat-service-wave,
    .ai-chat-service[data-ai-chat-state="speaking"] .ai-chat-service-wave { opacity: 1; }
    .ai-chat-service[data-ai-chat-state="recording"] .ai-chat-service-wave i,
    .ai-chat-service[data-ai-chat-state="speaking"] .ai-chat-service-wave i { animation: aiChatWave .62s ease-in-out infinite alternate; }
    .ai-chat-service[data-ai-chat-state="recording"] .ai-chat-service-wave i:nth-child(2), .ai-chat-service[data-ai-chat-state="speaking"] .ai-chat-service-wave i:nth-child(4) { animation-delay: .18s; }
    .ai-chat-service[data-ai-chat-state="recording"] .ai-chat-service-wave i:nth-child(3), .ai-chat-service[data-ai-chat-state="speaking"] .ai-chat-service-wave i:nth-child(3) { animation-delay: .32s; }
    .ai-chat-service[data-ai-chat-state="thinking"] .ai-chat-service-orbit-one, .ai-chat-service[data-ai-chat-state="transcribing"] .ai-chat-service-orbit-one { animation: aiChatOrbit 2.8s linear infinite; }
    .ai-chat-service[data-ai-chat-state="thinking"] .ai-chat-service-orbit-two, .ai-chat-service[data-ai-chat-state="transcribing"] .ai-chat-service-orbit-two { animation: aiChatOrbitReverse 3.7s linear infinite; }
    .ai-chat-service[data-ai-chat-state="thinking"] .ai-chat-service-orb, .ai-chat-service[data-ai-chat-state="transcribing"] .ai-chat-service-orb { animation: aiChatOrbThink 2.1s ease-in-out infinite; }
    .ai-chat-service[data-ai-chat-state="speaking"] .ai-chat-service-orb { animation: aiChatOrbSpeak .72s ease-in-out infinite alternate; box-shadow: inset -22px -28px 48px rgba(13,20,74,.55), inset 18px 15px 34px rgba(232,239,255,.48), 0 0 56px rgba(145,172,255,.92), 0 0 160px rgba(111,132,255,.47); }
    .ai-chat-service[data-ai-chat-state="speaking"] .ai-chat-service-orb-halo { opacity: .95; transform: scale(1.19); }
    @keyframes aiChatOrbRecord { 50% { transform: scale(1.075); } }
    @keyframes aiChatHalo { 50% { transform: scale(1.33); opacity: .64; } }
    @keyframes aiChatMic { 50% { transform: scale(1.055); box-shadow: 0 8px 32px rgba(183,151,255,.62); } }
    @keyframes aiChatWave { to { height: 17px; } }
    @keyframes aiChatOrbit { to { transform: rotate(397deg); } }
    @keyframes aiChatOrbitReverse { to { transform: rotate(-336deg); } }
    @keyframes aiChatOrbThink { 50% { transform: translateY(-6px) scale(1.026); } }
    @keyframes aiChatOrbSpeak { to { transform: scale(1.055) translateY(-2px); } }
    @media (max-width: 600px) { .canvas-node.ai-chat-node { width: min(430px, calc(100vw - 36px)); } }
    @media (prefers-reduced-motion: reduce) {
      .ai-chat-service *, .ai-chat-service *::before, .ai-chat-service *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }


/* ========================================================================
   AI CHAT — Everline voice card
   The card intentionally uses the same lime accent as workflow connections.
   Its waveform is drawn by node.js and receives live analyser data from the
   microphone or the AI audio element when either one is active.
   ======================================================================== */
.canvas-node.ai-chat-node {
  width: 430px;
  min-height: 590px;
  padding: 0;
  overflow: hidden;
  background: var(--charcoal);
  border: 1px solid rgba(200, 240, 62, .24);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .045);
}
.canvas-node.ai-chat-node:hover,
.canvas-node.ai-chat-node.ai-chat-node-connected {
  border-color: rgba(200, 240, 62, .55);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .46), 0 0 34px rgba(200, 240, 62, .09), inset 0 1px rgba(255, 255, 255, .06);
}
.ai-chat-node-menu {
  top: 14px;
  right: 13px;
  z-index: 8;
  width: 30px;
  height: 30px;
  color: rgba(255, 255, 255, .68);
  background: rgba(7, 17, 13, .58);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
}
.ai-chat-node-menu:hover { color: var(--bone); background: rgba(200, 240, 62, .12); border-color: rgba(200, 240, 62, .35); }

.ai-chat-service {
  position: relative;
  display: flex;
  min-height: 588px;
  padding: 20px 20px 16px;
  isolation: isolate;
  flex-direction: column;
  overflow: hidden;
  cursor: default;
  background:
    radial-gradient(ellipse 100% 45% at 50% 100%, rgba(200, 240, 62, .15), transparent 68%),
    radial-gradient(ellipse 72% 58% at 52% 43%, rgba(95, 142, 42, .10), transparent 72%),
    var(--charcoal);
}
.ai-chat-service-background,
.ai-chat-service-background i { position: absolute; inset: 0; pointer-events: none; }
.ai-chat-service-background { z-index: -1; overflow: hidden; }
.ai-chat-service-background::before,
.ai-chat-service-background::after {
  position: absolute;
  width: 250px;
  height: 250px;
  content: '';
  filter: blur(62px);
  opacity: .17;
  border-radius: 50%;
  background: #c8f03e;
}
.ai-chat-service-background::before { top: 67%; left: -42%; }
.ai-chat-service-background::after { top: -35%; right: -38%; background: #6e9e35; }
.ai-chat-service-background i:nth-child(1) {
  background-image: radial-gradient(rgba(200, 240, 62, .46) .65px, transparent .85px);
  background-size: 28px 28px;
  opacity: .08;
}
.ai-chat-service-background i:nth-child(2) {
  top: auto;
  height: 47%;
  background: linear-gradient(transparent, rgba(11, 11, 12, .92));
}
.ai-chat-service-background i:nth-child(3) {
  inset: auto -18% -18%;
  width: 420px;
  height: 170px;
  border-radius: 50%;
  background: rgba(200, 240, 62, .08);
  filter: blur(34px);
}
.ai-chat-service-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  color: rgba(255, 255, 255, .64);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .04em;
}
.ai-chat-service-identity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 70px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ai-chat-service-status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #656d61;
  box-shadow: 0 0 0 3px rgba(101, 109, 97, .10);
}
.ai-chat-service-status-dot.status-dot-connected {
  background: var(--lime);
  box-shadow: 0 0 12px rgba(200, 240, 62, .82);
}
.ai-chat-service-mode {
  padding: 4px 8px;
  color: var(--lime);
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid rgba(200, 240, 62, .19);
  border-radius: 999px;
  background: rgba(200, 240, 62, .08);
}
.ai-chat-service-voice-copy {
  min-height: 136px;
  padding: 55px 14px 0;
  text-align: left;
}
.ai-chat-service-state {
  color: rgba(255, 255, 255, .58);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.ai-chat-service-transcript {
  display: -webkit-box;
  max-width: 360px;
  min-height: 74px;
  margin: 11px 0 0;
  overflow: hidden;
  color: var(--bone);
  font: 650 21px/1.28 var(--font-display);
  letter-spacing: -.035em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-wrap: balance;
}
.ai-chat-service-wave-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  margin: 6px -4px 0;
  overflow: hidden;
  border-radius: 16px;
}
.ai-chat-service-wave-grid {
  position: absolute;
  inset: 18px 0;
  opacity: .32;
  background-image: radial-gradient(rgba(200, 240, 62, .35) .7px, transparent .8px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.ai-chat-service-wave {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 116px;
  overflow: visible;
  filter: drop-shadow(0 0 7px rgba(200, 240, 62, .32));
}
.ai-chat-service-wave path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ai-chat-service-wave path[data-ai-chat-wave-line="back"] { stroke: rgba(174, 214, 86, .42); stroke-width: 1.25; }
.ai-chat-service-wave path[data-ai-chat-wave-line="middle"] { stroke: rgba(211, 244, 116, .75); stroke-width: 1.6; }
.ai-chat-service-wave path[data-ai-chat-wave-line="front"] { stroke: #f1ffc7; stroke-width: 2; }
.ai-chat-service-voice {
  display: grid;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 70px;
  height: 70px;
  margin: 2px 0 22px;
  padding: 0;
  color: var(--ink);
  background: linear-gradient(145deg, #f4ffbd 0%, var(--lime) 55%, #9fc92b 100%);
  border: 1px solid rgba(241, 255, 199, .9);
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(200, 240, 62, .24), inset 0 1px rgba(255, 255, 255, .75);
  transition: transform .2s, box-shadow .2s, opacity .2s, background .25s;
}
.ai-chat-service-voice svg { width: 24px; height: 24px; }
.ai-chat-service-voice span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ai-chat-service-voice:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 13px 34px rgba(200, 240, 62, .38), inset 0 1px rgba(255, 255, 255, .8);
}
.ai-chat-service-voice:disabled { cursor: not-allowed; opacity: .38; }
.ai-chat-service-voice.is-recording {
  color: var(--bone);
  background: #24361b;
  border-color: var(--lime);
  box-shadow: 0 0 0 8px rgba(200, 240, 62, .10), 0 12px 34px rgba(200, 240, 62, .30);
}
.ai-chat-service-composer {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  margin-top: auto;
  padding: 8px 8px 8px 13px;
  background: rgba(11, 11, 12, .74);
  border: 1px solid rgba(200, 240, 62, .14);
  border-radius: 13px;
  transition: border-color .2s, box-shadow .2s;
}
.ai-chat-service-composer:focus-within {
  border-color: rgba(200, 240, 62, .54);
  box-shadow: 0 0 0 3px rgba(200, 240, 62, .09);
}
.ai-chat-service-input {
  width: 100%;
  min-height: 21px;
  max-height: 92px;
  padding: 3px 0;
  resize: none;
  color: var(--bone);
  font: 500 11px/1.45 var(--font-body);
  user-select: text;
  background: transparent;
  border: 0;
  outline: 0;
}
.ai-chat-service-input::placeholder { color: rgba(244, 244, 245, .38); }
.ai-chat-service-send {
  display: grid;
  width: 29px;
  height: 29px;
  padding: 0;
  color: var(--ink);
  place-items: center;
  background: var(--lime);
  border: 1px solid var(--lime);
  border-radius: 9px;
  transition: filter .15s, transform .15s, opacity .15s;
}
.ai-chat-service-send:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.ai-chat-service-send:disabled { cursor: not-allowed; opacity: .3; }
.ai-chat-service-history { margin-top: 9px; color: rgba(244, 244, 245, .52); font-size: 10px; }
.ai-chat-service-messages { scrollbar-color: rgba(200, 240, 62, .35) transparent; }
.ai-chat-service-empty { color: rgba(244, 244, 245, .38); }
.ai-chat-service-avatar { color: var(--lime); background: rgba(200, 240, 62, .09); border-color: rgba(200, 240, 62, .18); }
.ai-chat-service-message.user .ai-chat-service-avatar { color: var(--bone); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .13); }
.ai-chat-service-bubble { color: var(--bone); background: rgba(244, 244, 245, .08); border-color: rgba(200, 240, 62, .13); }
.ai-chat-service-message.user .ai-chat-service-bubble { background: rgba(200, 240, 62, .14); border-color: rgba(200, 240, 62, .24); }
.ai-chat-service-bubble.is-streaming::after { color: var(--lime); }
.ai-chat-service-play { color: var(--lime); background: rgba(200, 240, 62, .08); border-color: rgba(200, 240, 62, .20); }
.ai-chat-service-play:hover, .ai-chat-service-play.is-playing { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.ai-chat-service[data-ai-chat-state="recording"] .ai-chat-service-wave,
.ai-chat-service[data-ai-chat-state="speaking"] .ai-chat-service-wave { filter: drop-shadow(0 0 11px rgba(200, 240, 62, .62)); }
.ai-chat-service[data-ai-chat-state="recording"] .ai-chat-service-wave-stage,
.ai-chat-service[data-ai-chat-state="speaking"] .ai-chat-service-wave-stage { background: rgba(200, 240, 62, .035); }
.ai-chat-service[data-ai-chat-state="recording"] .ai-chat-service-voice { animation: aiChatMicPulse 1.05s ease-in-out infinite; }
@keyframes aiChatMicPulse { 50% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(200, 240, 62, .06), 0 12px 34px rgba(200, 240, 62, .42); } }
@media (max-width: 600px) {
  .canvas-node.ai-chat-node { width: min(430px, calc(100vw - 36px)); }
  .ai-chat-service-transcript { font-size: 18px; }
}


/* Voice-call surface refinement: the card itself is the control. */
.ai-chat-service {
  cursor: pointer;
  user-select: none;
}
.ai-chat-service.is-disabled {
  cursor: not-allowed;
  opacity: .72;
}
.ai-chat-service-composer,
.ai-chat-service-history {
  display: none;
}
.ai-chat-service-voice-copy {
  min-height: 188px;
  padding: 58px 14px 0;
}
.ai-chat-service-transcript {
  display: block;
  max-width: none;
  height: 112px;
  min-height: 0;
  margin: 11px 0 0;
  overflow-y: auto;
  padding-right: 7px;
  color: var(--bone);
  font-size: 21px;
  line-height: 1.3;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 240, 62, .45) transparent;
}
.ai-chat-service-transcript::-webkit-scrollbar { width: 4px; }
.ai-chat-service-transcript::-webkit-scrollbar-thumb {
  background: rgba(200, 240, 62, .42);
  border-radius: 999px;
}
.ai-chat-service-wave-stage {
  height: 190px;
  margin-top: 0;
}
.ai-chat-service-wave {
  height: 138px;
  filter: drop-shadow(0 0 8px rgba(200, 240, 62, .38));
}
.ai-chat-service-call-control {
  display: grid;
  align-self: center;
  width: 68px;
  height: 68px;
  margin: 6px 0 22px;
  color: var(--ink);
  place-items: center;
  background: linear-gradient(145deg, #f4ffbd 0%, var(--lime) 58%, #9fc92b 100%);
  border: 1px solid rgba(241, 255, 199, .94);
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(200, 240, 62, .27), inset 0 1px rgba(255, 255, 255, .78);
  pointer-events: none;
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.ai-chat-service-call-control svg { width: 25px; height: 25px; }
.ai-chat-service:hover:not(.is-disabled) .ai-chat-service-call-control {
  transform: translateY(-2px) scale(1.035);
  box-shadow: 0 14px 34px rgba(200, 240, 62, .40), inset 0 1px rgba(255, 255, 255, .82);
}
.ai-chat-service[data-ai-chat-state="recording"] .ai-chat-service-call-control {
  color: var(--bone);
  background: #24361b;
  border-color: var(--lime);
  box-shadow: 0 0 0 9px rgba(200, 240, 62, .10), 0 12px 34px rgba(200, 240, 62, .32);
  animation: aiChatCallPulse 1.1s ease-in-out infinite;
}
.ai-chat-service[data-ai-chat-state="speaking"] .ai-chat-service-call-control {
  animation: aiChatCallSpeaking 1.05s ease-in-out infinite alternate;
}
.ai-chat-service[data-ai-chat-state="transcribing"] .ai-chat-service-call-control,
.ai-chat-service[data-ai-chat-state="thinking"] .ai-chat-service-call-control {
  opacity: .68;
  animation: aiChatCallThinking 1.2s ease-in-out infinite;
}
@keyframes aiChatCallPulse {
  50% { transform: scale(1.06); box-shadow: 0 0 0 13px rgba(200, 240, 62, .05), 0 14px 36px rgba(200, 240, 62, .42); }
}
@keyframes aiChatCallSpeaking {
  to { transform: scale(1.055); box-shadow: 0 0 0 10px rgba(200, 240, 62, .08), 0 14px 36px rgba(200, 240, 62, .42); }
}
@keyframes aiChatCallThinking {
  50% { transform: scale(.94); opacity: .42; }
}
@media (max-width: 600px) {
  .ai-chat-service-transcript { font-size: 18px; }
}


/* Draggable voice node + rolling transcript motion. */
.canvas-node.ai-chat-node {
  border-radius: 18px;
  cursor: grab;
}
.canvas-node.ai-chat-node.dragging {
  cursor: grabbing;
  border-color: rgba(200, 240, 62, .72);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .54), 0 0 0 3px rgba(200, 240, 62, .12), 0 0 34px rgba(200, 240, 62, .14);
}
.ai-chat-service { cursor: grab; }
.ai-chat-service:active { cursor: grabbing; }
.ai-chat-service-transcript-viewport {
  position: relative;
  height: 112px;
  min-height: 0;
  overflow: hidden;
}
.ai-chat-service-transcript-stack {
  position: relative;
  width: 100%;
  height: 100%;
}
.ai-chat-service-transcript-stack .ai-chat-service-transcript {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 112px;
  min-height: 0;
  max-height: none;
  margin: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.ai-chat-service-transcript.is-entering {
  animation: aiChatTranscriptEnter .42s cubic-bezier(.22, .8, .22, 1) both;
}
.ai-chat-service-transcript.is-leaving {
  animation: aiChatTranscriptLeave .46s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes aiChatTranscriptEnter {
  from { opacity: 0; transform: translateY(32px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes aiChatTranscriptLeave {
  from { opacity: 1; transform: translateY(0); filter: blur(0); }
  to { opacity: 0; transform: translateY(-42px); filter: blur(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-chat-service-transcript.is-entering,
  .ai-chat-service-transcript.is-leaving { animation: none; }
}


/* AI Chat final compact workflow-card treatment. Keep the voice surface compact and calm. */
.canvas-node.ai-chat-node {
  width: 320px;
  min-height: 410px;
  padding: 0;
  overflow: hidden;
  background: var(--charcoal);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
}
.canvas-node.ai-chat-node:hover,
.canvas-node.ai-chat-node.ai-chat-node-connected {
  border-color: var(--border-hover);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .34);
}
.canvas-node.ai-chat-node.selected {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(200, 240, 62, .18), 0 6px 24px rgba(0, 0, 0, .34);
}
.canvas-node.ai-chat-node.dragging {
  border-color: var(--lime);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}
.ai-chat-node-menu {
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  color: var(--stone);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.ai-chat-node-menu:hover {
  color: var(--bone);
  background: rgba(255, 255, 255, .08);
  border-color: var(--border-hover);
}
.ai-chat-service {
  min-height: 408px;
  padding: 14px;
  background: var(--charcoal);
  cursor: grab;
}
.ai-chat-service:active { cursor: grabbing; }
.ai-chat-service-background { opacity: .18; }
.ai-chat-service-background::before,
.ai-chat-service-background::after,
.ai-chat-service-background i:nth-child(3) { display: none; }
.ai-chat-service-background i:nth-child(1) { opacity: .04; }
.ai-chat-service-background i:nth-child(2) { opacity: .38; }
.ai-chat-service-topbar {
  min-height: 24px;
  color: var(--stone);
  font-size: 9px;
}
.ai-chat-service-status-dot { width: 6px; height: 6px; }
.ai-chat-service-status-dot.status-dot-connected {
  box-shadow: 0 0 0 3px rgba(200, 240, 62, .10);
}
.ai-chat-service-mode {
  padding: 3px 7px;
  color: var(--stone);
  border-color: var(--border);
  background: rgba(255, 255, 255, .04);
}
.ai-chat-service-voice-copy {
  min-height: 112px;
  padding: 22px 0 0;
}
.ai-chat-service-state {
  color: var(--stone);
  font-size: 9px;
  letter-spacing: .08em;
}
.ai-chat-service-transcript-viewport {
  height: 82px;
  margin-top: 8px;
}
.ai-chat-service-transcript-stack .ai-chat-service-transcript {
  height: 82px;
  padding-right: 5px;
  color: var(--bone);
  font: 600 16px/1.35 var(--font-display);
  letter-spacing: -.025em;
  scrollbar-color: rgba(200, 240, 62, .28) transparent;
}
.ai-chat-service-wave-stage {
  height: 98px;
  margin: 2px 0 0;
  border-radius: 10px;
  background: transparent;
}
.ai-chat-service-wave-grid { inset: 14px 0; opacity: .14; }
.ai-chat-service-wave {
  height: 82px;
  filter: none;
  opacity: .34;
  transition: opacity .28s ease, filter .28s ease;
}
.ai-chat-service-call-control {
  width: 52px;
  height: 52px;
  margin: 5px 0 15px;
  background: var(--lime);
  border: 1px solid var(--lime);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .24);
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease, opacity .28s ease;
}
.ai-chat-service-call-control svg { width: 20px; height: 20px; }
.ai-chat-service:hover:not(.is-disabled) .ai-chat-service-call-control {
  transform: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
/* Recording remains visually calm; its analyser still runs for silence detection. */
.ai-chat-service[data-ai-chat-state="recording"] .ai-chat-service-wave {
  opacity: .34;
  filter: none;
}
.ai-chat-service[data-ai-chat-state="recording"] .ai-chat-service-wave-stage {
  background: transparent;
}
.ai-chat-service[data-ai-chat-state="recording"] .ai-chat-service-call-control {
  color: var(--bone);
  background: var(--charcoal-light);
  border-color: var(--lime);
  box-shadow: 0 0 0 5px rgba(200, 240, 62, .08), 0 6px 18px rgba(0, 0, 0, .3);
  animation: none;
}
/* Only AI playback gets an active waveform and microphone pulse. */
.ai-chat-service[data-ai-chat-state="speaking"] .ai-chat-service-wave {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(200, 240, 62, .34));
}
.ai-chat-service[data-ai-chat-state="speaking"] .ai-chat-service-wave-stage {
  background: rgba(200, 240, 62, .025);
}
.ai-chat-service[data-ai-chat-state="speaking"] .ai-chat-service-call-control {
  box-shadow: 0 0 0 7px rgba(200, 240, 62, .07), 0 8px 22px rgba(0, 0, 0, .32);
  animation: aiChatCompactSpeaking 1.05s ease-in-out infinite alternate;
}
.ai-chat-service[data-ai-chat-state="thinking"] .ai-chat-service-call-control,
.ai-chat-service[data-ai-chat-state="transcribing"] .ai-chat-service-call-control {
  opacity: .62;
  animation: none;
}
@keyframes aiChatCompactSpeaking {
  to {
    transform: scale(1.045);
    box-shadow: 0 0 0 10px rgba(200, 240, 62, .045), 0 9px 24px rgba(0, 0, 0, .34);
  }
}
.ai-chat-service-composer,
.ai-chat-service-history { display: none; }
.ai-chat-service-transcript.is-entering,
.ai-chat-service-transcript.is-leaving {
  will-change: transform, opacity, filter;
}
.ai-chat-service-transcript.is-entering {
  animation: aiChatTranscriptEnter .48s cubic-bezier(.22, .8, .22, 1) both;
}
.ai-chat-service-transcript.is-leaving {
  animation: aiChatTranscriptLeave .48s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes aiChatTranscriptEnter {
  from { opacity: 0; transform: translateY(24px); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes aiChatTranscriptLeave {
  from { opacity: 1; transform: translateY(0); filter: blur(0); }
  to { opacity: 0; transform: translateY(-30px); filter: blur(2px); }
}
@media (max-width: 600px) {
  .canvas-node.ai-chat-node { width: min(320px, calc(100vw - 36px)); }
  .ai-chat-service-transcript-stack .ai-chat-service-transcript { font-size: 15px; }
}


/* Voice card positioning and speech-following transcript. */
.ai-chat-service-wave-stage {
  margin-top: 14px;
}
.ai-chat-service-call-control {
  margin-top: 14px;
  margin-bottom: 20px;
}
.ai-chat-service-transcript-word {
  color: inherit;
  transition: color .18s ease, opacity .18s ease, text-shadow .18s ease;
}
.ai-chat-service-transcript-word.is-active {
  color: var(--lime);
  text-shadow: 0 0 12px rgba(200, 240, 62, .22);
}
@media (prefers-reduced-motion: reduce) {
  .ai-chat-service-transcript-word { transition: none; }
}

/* Lower the animated line inside its stage without shifting the card layout. */
.ai-chat-service-wave {
  transform: translateY(9px);
}

/* Explicitly override the legacy absolute waveform placement. */
.ai-chat-service-wave {
  position: relative;
  top: 10px;
  bottom: auto;
  transform: translateY(32px);
}


/* Keep the SVG inside its single waveform stage; legacy absolute placement created a duplicate-looking line. */
.ai-chat-service-wave-stage {
  overflow: hidden;
}
.ai-chat-service-wave {
  position: static !important;
  inset: auto !important;
  transform: translateY(-8px) !important;
}
/* User speech also drives the line, but stays quieter than AI playback. */
.ai-chat-service[data-ai-chat-state="recording"] .ai-chat-service-wave {
  opacity: .72;
  filter: drop-shadow(0 0 4px rgba(200, 240, 62, .18));
}
/* A slim scrollbar with no Windows arrow buttons. */
.ai-chat-service-transcript-stack .ai-chat-service-transcript {
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 240, 62, .30) transparent;
}
.ai-chat-service-transcript-stack .ai-chat-service-transcript::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.ai-chat-service-transcript-stack .ai-chat-service-transcript::-webkit-scrollbar-track {
  background: transparent;
}
.ai-chat-service-transcript-stack .ai-chat-service-transcript::-webkit-scrollbar-thumb {
  background: rgba(200, 240, 62, .34);
  border-radius: 999px;
}
.ai-chat-service-transcript-stack .ai-chat-service-transcript::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}


/* AI voice playback control: pause/resume uses the same call button. */
.ai-chat-service[data-ai-chat-audio="paused"] .ai-chat-service-wave {
  opacity: .34;
  filter: none;
}
.ai-chat-service[data-ai-chat-audio="paused"] .ai-chat-service-call-control {
  animation: none;
  box-shadow: 0 0 0 5px rgba(200, 240, 62, .06), 0 6px 18px rgba(0, 0, 0, .3);
}


/* Final card order: AI text first, then one waveform, then the pause/mic control. */
.ai-chat-service {
  display: flex !important;
  flex-direction: column !important;
}
.ai-chat-service-voice-copy {
  order: 1;
  flex: 0 0 auto;
  min-height: 112px;
  padding-top: 16px;
}
.ai-chat-service-wave-stage {
  order: 2;
  flex: 0 0 92px;
  height: 92px;
  margin-top: auto;
}
.ai-chat-service-wave {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-8px) !important;
}
.ai-chat-service-call-control {
  order: 3;
  flex: 0 0 52px;
  margin: 10px auto 14px;
}


/* ========================================================================
   WORKFLOW EDITOR — n8n-inspired canvas
   Scoped to the workflow tab so the rest of the Everline dashboard remains
   on its dark visual system.
   ======================================================================== */
#tab-workflow {
  position: relative;
  overflow: hidden;
  color: #34313f;
  background: #f7f7fb;
  isolation: isolate;
}

#tab-workflow .workflow-canvas-area {
  --workflow-zoom: 1;
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
  background-color: #f7f7fb;
  background-image: radial-gradient(circle, #c8c9d1 1.15px, transparent 1.3px);
  background-size: calc(20px * var(--workflow-zoom)) calc(20px * var(--workflow-zoom));
  background-position: 0 0;
  cursor: default;
  overscroll-behavior: none;
}

#tab-workflow .workflow-canvas {
  width: 4000px;
  height: 4000px;
  min-width: 4000px;
  min-height: 4000px;
  padding: 2000px;
  transform: scale(var(--workflow-zoom));
  transform-origin: 0 0;
  will-change: transform;
}

#tab-workflow .workflow-loading {
  color: #34313f;
  background: rgba(247, 247, 251, .96);
  backdrop-filter: blur(8px);
}
#tab-workflow .loading-spinner {
  width: 38px;
  height: 38px;
  border-color: #dedfe5;
  border-top-color: #ff6d5a;
}
#tab-workflow .loading-text { color: #72717d; }

#tab-workflow .canvas-drop-zone {
  display: flex;
  min-width: 230px;
  padding: 18px 20px;
  gap: 13px;
  color: #4f4d58;
  cursor: pointer;
  pointer-events: auto;
  background: #fff;
  border: 1px solid #d9dae1;
  border-radius: 12px;
  box-shadow: 0 5px 18px rgba(37, 35, 48, .08);
}
#tab-workflow .canvas-drop-zone:hover,
#tab-workflow .canvas-drop-zone:focus-visible,
#tab-workflow .canvas-drop-zone.drag-over {
  color: #292733;
  outline: none;
  border-color: #ff6d5a;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 109, 90, .13), 0 8px 24px rgba(37, 35, 48, .1);
}
#tab-workflow .canvas-drop-zone-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  color: #fff;
  place-items: center;
  background: #ff6d5a;
  border-radius: 9px;
}
#tab-workflow .canvas-drop-zone-icon svg { width: 19px; height: 19px; }
#tab-workflow .canvas-drop-zone > span:last-child { display: flex; flex-direction: column; gap: 4px; text-align: left; }
#tab-workflow .canvas-drop-zone strong { font-size: 13px; line-height: 1.2; }
#tab-workflow .canvas-drop-zone small { color: #898793; font-size: 11px; }

#tab-workflow .canvas-node:not(.ai-chat-node) {
  width: 184px;
  min-height: 76px;
  padding: 11px 12px;
  color: #34313f;
  background: #fff;
  border: 1px solid #d7d8df;
  border-radius: 10px;
  box-shadow: 0 2px 7px rgba(37, 35, 48, .08);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
#tab-workflow .canvas-node:not(.ai-chat-node):hover {
  border-color: #aaaab4;
  box-shadow: 0 5px 16px rgba(37, 35, 48, .12);
}
#tab-workflow .canvas-node:not(.ai-chat-node).selected,
#tab-workflow .canvas-node:not(.ai-chat-node).connecting-source {
  border-color: #ff6d5a;
  box-shadow: 0 0 0 2px rgba(255, 109, 90, .18), 0 6px 18px rgba(37, 35, 48, .12);
}
#tab-workflow .canvas-node:not(.ai-chat-node).dragging {
  transform: scale(1.015);
  box-shadow: 0 12px 28px rgba(37, 35, 48, .17);
}
#tab-workflow .canvas-node.agent-node:not(.ai-chat-node) {
  color: #34313f;
  background: #fff;
  border-color: #cfd0d8;
}
#tab-workflow .canvas-node.agent-node:not(.ai-chat-node)::before {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 4px;
  content: '';
  background: #ff6d5a;
  border-radius: 10px 0 0 10px;
}
#tab-workflow .node-main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
}
#tab-workflow .node-copy { min-width: 0; }
#tab-workflow .node-header { display: contents; }
#tab-workflow .node-icon,
#tab-workflow .canvas-node.agent-node .node-icon {
  grid-column: 1;
  grid-row: 1;
  width: 38px;
  height: 38px;
  color: #4a4854;
  background: #f1f1f5;
  border: 1px solid #e4e4e9;
  border-radius: 9px;
}
#tab-workflow .canvas-node.agent-node .node-icon {
  color: #fff;
  background: #ff6d5a;
  border-color: #ff6d5a;
}
#tab-workflow .node-icon svg { width: 20px; height: 20px; }
#tab-workflow .node-menu {
  grid-column: 3;
  grid-row: 1;
  width: 22px;
  height: 28px;
  color: #9997a2;
  border-radius: 6px;
}
#tab-workflow .node-menu:hover { color: #34313f; background: #f1f1f4; }
#tab-workflow .node-title {
  margin: 0 0 4px;
  overflow: hidden;
  color: #34313f;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tab-workflow .node-status {
  gap: 5px;
  overflow: hidden;
  color: #84828d;
  font-size: 9px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tab-workflow .status-dot { width: 6px; height: 6px; flex: 0 0 auto; }
#tab-workflow .node-status.status-connected { color: #5d7e69; }
#tab-workflow .status-dot-connected { box-shadow: none; }
#tab-workflow .agent-required-badge {
  margin-top: 8px;
  color: #b74839;
  background: #fff3f0;
  border-color: #ffd0c9;
}
#tab-workflow .canvas-node.agent-required-missing { border-color: #e5a49b; box-shadow: 0 0 0 2px rgba(229, 93, 75, .08); }

#tab-workflow .node-configure,
#tab-workflow .node-configure-website,
#tab-workflow .node-configure-whatsapp {
  min-height: 27px;
  margin-top: 9px;
  padding: 5px 8px;
  color: #4d4b56;
  font-size: 9px;
  background: #f5f5f7;
  border: 1px solid #dedfe5;
  border-radius: 7px;
  box-shadow: none;
}
#tab-workflow .node-configure:hover,
#tab-workflow .node-configure-website:hover,
#tab-workflow .node-configure-whatsapp:hover {
  color: #292733;
  background: #ececf1;
  border-color: #c9cad2;
  box-shadow: none;
  filter: none;
  transform: none;
}
/* Connection dots sit on all four sides of a node. They rest quietly and grow
   with a soft lift on hover so any edge is an obvious place to connect. */
#tab-workflow .node-port {
  width: 11px;
  height: 11px;
  opacity: 1;
  background: #fff;
  border: 2px solid #9b9aa5;
  box-shadow: 0 1px 3px rgba(37, 35, 48, .18), 0 0 0 2px #fff;
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), background .16s ease,
              border-color .16s ease, box-shadow .16s ease;
}
#tab-workflow .node-port:hover {
  background: #ff6d5a;
  border-color: #ff6d5a;
  box-shadow: 0 2px 8px rgba(255, 109, 90, .4), 0 0 0 3px rgba(255, 109, 90, .18);
}
#tab-workflow .port-left { left: -6px; }
#tab-workflow .port-right { right: -6px; }
#tab-workflow .port-top { top: -6px; }
#tab-workflow .port-bottom { bottom: -6px; }
#tab-workflow .port-left:hover { transform: translateY(-50%) scale(1.35); }
#tab-workflow .port-right:hover { transform: translateY(-50%) scale(1.35); }
#tab-workflow .port-top:hover { transform: translateX(-50%) scale(1.35); }
#tab-workflow .port-bottom:hover { transform: translateX(-50%) scale(1.35); }

#tab-workflow .connections-svg {
  overflow: visible !important;
  pointer-events: none;
}
#tab-workflow .connection-line {
  stroke-dasharray: none !important;
  animation: none !important;
  filter: none;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
#tab-workflow .connection-hit-area {
  cursor: pointer;
  pointer-events: stroke;
  vector-effect: non-scaling-stroke;
}
#tab-workflow .temp-connection { stroke-dasharray: 5 4; animation: none; pointer-events: none; }
#tab-workflow .connection-line.conn-selected { stroke: #ff6d5a !important; filter: drop-shadow(0 0 3px rgba(255,109,90,.3)); }
#tab-workflow .canvas-node.ai-chat-node.selected {
  border-color: #ff6d5a;
  box-shadow: 0 0 0 2px rgba(255,109,90,.18), 0 8px 24px rgba(37,35,48,.16);
}

#tab-workflow .canvas-node.message-node {
  color: #34313f;
  background: #fff;
  border-color: #d7d8df;
  box-shadow: 0 3px 10px rgba(37,35,48,.08);
}
#tab-workflow .canvas-node.message-node:hover { border-color: #aaaab4; box-shadow: 0 5px 16px rgba(37,35,48,.12); }
#tab-workflow .message-card-icon { color: #ff6d5a; background: #fff0ed; border-color: #ffd3cc; }
#tab-workflow .message-card-source,
#tab-workflow .message-card-copy { color: #34313f; }
#tab-workflow .message-card-live,
#tab-workflow .message-card-expiry { color: #d95543; }
#tab-workflow .message-card-live { background: #fff2ef; border-color: #ffd4cd; }
#tab-workflow .message-card-footer { color: #85838e; }
#tab-workflow .message-card-pulse { background: #ff6d5a; box-shadow: none; animation: none; }

#tab-workflow .marquee-rect {
  background: rgba(255, 109, 90, .08);
  border-color: #ff6d5a;
  box-shadow: none;
}

/* Floating canvas controls */
#tab-workflow .workflow-canvas-toolbar {
  position: absolute;
  bottom: 18px;
  left: 18px;
  z-index: 35;
  display: flex;
  align-items: center;
  height: 38px;
  padding: 4px;
  background: #fff;
  border: 1px solid #d9dae1;
  border-radius: 9px;
  box-shadow: 0 5px 18px rgba(37, 35, 48, .1);
}
#tab-workflow .workflow-canvas-toolbar button {
  display: grid;
  min-width: 29px;
  height: 28px;
  padding: 0 7px;
  color: #5e5c67;
  font-size: 18px;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
}
#tab-workflow .workflow-canvas-toolbar button:hover:not(:disabled) { color: #292733; background: #f1f1f4; }
#tab-workflow .workflow-canvas-toolbar button:disabled { color: #c4c3ca; cursor: not-allowed; }
#tab-workflow .workflow-canvas-toolbar .workflow-zoom-level { min-width: 52px; font-size: 10px; font-weight: 650; }
#tab-workflow .workflow-canvas-toolbar svg { width: 15px; height: 15px; }
#tab-workflow .workflow-toolbar-divider { width: 1px; height: 20px; margin: 0 3px; background: #e2e2e7; }
#tab-workflow .workflow-add-button {
  position: absolute;
  right: 20px;
  bottom: 18px;
  z-index: 35;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #fff;
  place-items: center;
  background: #ff6d5a;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(225, 78, 59, .28);
  transition: transform .16s ease, box-shadow .16s ease, right .25s ease;
}
#tab-workflow .workflow-add-button:hover { transform: translateY(-2px); box-shadow: 0 11px 26px rgba(225, 78, 59, .34); }
#tab-workflow .workflow-add-button svg { width: 20px; height: 20px; }
#tab-workflow .workflow-canvas-hint {
  position: absolute;
  bottom: 27px;
  left: 250px;
  z-index: 30;
  color: #8a8893;
  font-size: 9px;
  pointer-events: none;
}
#tab-workflow .workflow-canvas-hint kbd {
  padding: 2px 5px;
  color: #65636e;
  font: 600 9px var(--font-body);
  background: #fff;
  border: 1px solid #d9dae1;
  border-radius: 4px;
  box-shadow: 0 1px 0 #cacbd2;
}

/* Searchable n8n-style node picker */
#tab-workflow .services-panel {
  position: relative;
  z-index: 45;
  width: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: #34313f;
  background: #fff;
  border-left: 0 solid #dedfe5;
  opacity: 0;
  transform: translateX(18px);
  transition: width .25s cubic-bezier(.2,.8,.2,1), min-width .25s cubic-bezier(.2,.8,.2,1), padding .25s ease, opacity .18s ease, transform .25s ease, border-width .25s ease;
  pointer-events: none;
}
#tab-workflow .services-panel.is-open {
  width: 350px;
  min-width: 350px;
  padding: 22px 18px;
  overflow-y: auto;
  border-left-width: 1px;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
#tab-workflow:has(.services-panel.is-open) .workflow-add-button { right: 370px; }
#tab-workflow .node-picker-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#tab-workflow .node-picker-eyebrow { display: block; margin-bottom: 5px; color: #9a98a3; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
#tab-workflow .panel-title { color: #292733; font-size: 17px; letter-spacing: -.02em; }
#tab-workflow .panel-sub { margin: 5px 0 16px; color: #85838e; font-size: 11px; }
#tab-workflow .node-picker-close {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #85838e;
  font-size: 21px;
  line-height: 1;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 7px;
}
#tab-workflow .node-picker-close:hover { color: #34313f; background: #f1f1f4; }
#tab-workflow .node-picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin-bottom: 16px;
  padding: 0 11px;
  color: #92909a;
  background: #f7f7f9;
  border: 1px solid #dddde3;
  border-radius: 9px;
}
#tab-workflow .node-picker-search:focus-within { border-color: #ff6d5a; box-shadow: 0 0 0 3px rgba(255,109,90,.1); }
#tab-workflow .node-picker-search svg { width: 15px; height: 15px; flex: 0 0 auto; }
#tab-workflow .node-picker-search input { width: 100%; color: #34313f; font-size: 12px; background: transparent; border: 0; outline: 0; }
#tab-workflow .node-picker-search input::placeholder { color: #aaa8b1; }
#tab-workflow #services-list { display: flex; flex-direction: column; gap: 5px; }
#tab-workflow .service-item {
  min-height: 54px;
  padding: 8px 9px;
  gap: 11px;
  color: #3e3c47;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
}
#tab-workflow .service-item:hover,
#tab-workflow .service-item.agent-service:hover {
  color: #292733;
  background: #f5f5f8;
  border-color: #e5e5e9;
}
#tab-workflow .service-item.agent-service { background: #fff7f5; border-color: #ffe0db; }
#tab-workflow .service-icon,
#tab-workflow .service-item.agent-service .service-icon {
  width: 36px;
  height: 36px;
  color: #4b4954;
  background: #eeeef2;
  border: 1px solid #e1e1e6;
  border-radius: 9px;
}
#tab-workflow .service-item.agent-service .service-icon { color: #fff; background: #ff6d5a; border-color: #ff6d5a; }
#tab-workflow .service-icon svg { width: 19px; height: 19px; }
#tab-workflow .service-name { font-size: 12px; font-weight: 600; }
#tab-workflow .service-drag-handle { margin-left: auto; color: #aaa8b1; }
#tab-workflow .service-group-label { padding: 13px 6px 5px; color: #9997a2; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
#tab-workflow .node-picker-empty { padding: 28px 10px; color: #94929c; font-size: 11px; text-align: center; }

#tab-workflow .node-context-menu {
  color: #34313f;
  background: #fff;
  border-color: #d9dae1;
  box-shadow: 0 10px 30px rgba(37,35,48,.16);
}
#tab-workflow .node-context-menu button { color: #4c4a55; }
#tab-workflow .node-context-menu button:hover { color: #292733; background: #f2f2f5; }

@media (max-width: 900px) {
  #tab-workflow .services-panel.is-open { position: absolute; inset: 0 0 0 auto; width: min(350px, 90vw); min-width: min(350px, 90vw); box-shadow: -12px 0 30px rgba(37,35,48,.14); }
  #tab-workflow:has(.services-panel.is-open) .workflow-add-button { right: 20px; opacity: 0; pointer-events: none; }
  #tab-workflow .workflow-canvas-hint { display: none; }
}

/* Workflow color refinement — retain the current card layout, restore Everline's dark palette. */
#tab-workflow {
  color: var(--cream);
  background: var(--ink);
}

#tab-workflow .workflow-canvas-area {
  background-color: #0d0d0f;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .11) 1.05px, transparent 1.2px);
}

#tab-workflow .workflow-loading {
  color: var(--cream);
  background: rgba(11, 11, 12, .96);
}
#tab-workflow .loading-spinner { border-color: #29292d; border-top-color: var(--lime); }
#tab-workflow .loading-text { color: var(--stone); }

#tab-workflow .canvas-drop-zone {
  color: var(--stone);
  background: #151517;
  border-color: #303034;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
#tab-workflow .canvas-drop-zone:hover,
#tab-workflow .canvas-drop-zone:focus-visible,
#tab-workflow .canvas-drop-zone.drag-over {
  color: var(--cream);
  border-color: var(--lime);
  background: #18181b;
  box-shadow: 0 0 0 3px rgba(200, 240, 62, .12), 0 10px 28px rgba(0, 0, 0, .34);
}
#tab-workflow .canvas-drop-zone-icon { color: #0b0b0c; background: var(--lime); }
#tab-workflow .canvas-drop-zone small { color: var(--stone-dark); }

/* Keep the current compact card shape; only update its surfaces and states. */
#tab-workflow .canvas-node:not(.ai-chat-node) {
  color: var(--cream);
  background: #171719;
  border-color: #303034;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
#tab-workflow .canvas-node:not(.ai-chat-node):hover {
  border-color: #52525b;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
}
#tab-workflow .canvas-node:not(.ai-chat-node).selected,
#tab-workflow .canvas-node:not(.ai-chat-node).connecting-source {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px rgba(200, 240, 62, .20), 0 8px 24px rgba(0, 0, 0, .4);
}
#tab-workflow .canvas-node:not(.ai-chat-node).dragging { box-shadow: 0 14px 32px rgba(0, 0, 0, .5); }
#tab-workflow .canvas-node.agent-node:not(.ai-chat-node) {
  color: var(--cream);
  background: linear-gradient(135deg, #19191b 0%, rgba(200, 240, 62, .055) 100%);
  border-color: rgba(200, 240, 62, .28);
}
#tab-workflow .canvas-node.agent-node:not(.ai-chat-node)::before { background: var(--lime); }

#tab-workflow .node-icon,
#tab-workflow .canvas-node.agent-node .node-icon {
  color: var(--icon);
  background: #232326;
  border-color: #343439;
}
#tab-workflow .canvas-node.agent-node .node-icon {
  color: var(--lime);
  background: rgba(200, 240, 62, .10);
  border-color: rgba(200, 240, 62, .24);
}
#tab-workflow .node-menu { color: var(--stone-dark); }
#tab-workflow .node-menu:hover { color: var(--cream); background: #29292d; }
#tab-workflow .node-title { color: var(--cream); }
#tab-workflow .node-status { color: var(--stone); }
#tab-workflow .node-status.status-connected { color: #a8d72e; }
#tab-workflow .agent-required-badge { color: #fca5a5; background: rgba(239, 68, 68, .10); border-color: rgba(248, 113, 113, .24); }
#tab-workflow .canvas-node.agent-required-missing { border-color: rgba(248, 113, 113, .55); box-shadow: 0 0 0 2px rgba(248, 113, 113, .08); }

#tab-workflow .node-configure,
#tab-workflow .node-configure-website,
#tab-workflow .node-configure-whatsapp {
  color: var(--icon);
  background: #222225;
  border-color: #35353a;
}
#tab-workflow .node-configure:hover,
#tab-workflow .node-configure-website:hover,
#tab-workflow .node-configure-whatsapp:hover {
  color: var(--lime);
  background: rgba(200, 240, 62, .08);
  border-color: rgba(200, 240, 62, .26);
}
#tab-workflow .node-quick-add {
  color: var(--stone);
  background: #1a1a1d;
  border-color: #52525b;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
}
#tab-workflow .node-quick-add:hover { color: #0b0b0c; background: var(--lime); border-color: var(--lime); }

#tab-workflow .node-port {
  background: #171719;
  border-color: var(--lime);
  box-shadow: 0 0 0 2px #171719;
}
#tab-workflow .node-port:hover {
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: 0 0 0 4px rgba(200, 240, 62, .18);
}

/* Thin, smooth Everline wires with a generous invisible click target. */
#tab-workflow .connection-line {
  opacity: .94;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgba(200, 240, 62, .28));
  transition: opacity .15s ease, filter .15s ease;
}
#tab-workflow .connection-line.conn-selected {
  stroke: #dfff72 !important;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(200, 240, 62, .65));
}
#tab-workflow .temp-connection {
  stroke: var(--lime);
  opacity: .9;
  filter: drop-shadow(0 0 3px rgba(200, 240, 62, .4));
}
#tab-workflow .canvas-node.ai-chat-node.selected {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px rgba(200, 240, 62, .2), 0 10px 28px rgba(0, 0, 0, .4);
}

#tab-workflow .canvas-node.message-node {
  color: var(--cream);
  background: #171719;
  border-color: #303034;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .3);
}
#tab-workflow .canvas-node.message-node:hover { border-color: #52525b; box-shadow: 0 9px 24px rgba(0, 0, 0, .4); }
#tab-workflow .message-card-icon { color: var(--lime); background: rgba(200, 240, 62, .09); border-color: rgba(200, 240, 62, .22); }
#tab-workflow .message-card-source,
#tab-workflow .message-card-copy { color: var(--cream); }
#tab-workflow .message-card-live,
#tab-workflow .message-card-expiry { color: var(--lime); }
#tab-workflow .message-card-live { background: rgba(200, 240, 62, .08); border-color: rgba(200, 240, 62, .2); }
#tab-workflow .message-card-footer { color: var(--stone); }
#tab-workflow .message-card-pulse { background: var(--lime); }
#tab-workflow .marquee-rect { background: rgba(200, 240, 62, .08); border-color: var(--lime); }

#tab-workflow .workflow-canvas-toolbar {
  background: #171719;
  border-color: #303034;
  box-shadow: 0 7px 22px rgba(0, 0, 0, .38);
}
#tab-workflow .workflow-canvas-toolbar button { color: var(--stone); }
#tab-workflow .workflow-canvas-toolbar button:hover:not(:disabled) { color: var(--cream); background: #29292d; }
#tab-workflow .workflow-canvas-toolbar button:disabled { color: #4a4a50; }
#tab-workflow .workflow-toolbar-divider { background: #343439; }
#tab-workflow .workflow-add-button {
  color: #0b0b0c;
  background: var(--lime);
  box-shadow: 0 8px 24px rgba(200, 240, 62, .2);
}
#tab-workflow .workflow-add-button:hover { box-shadow: 0 11px 28px rgba(200, 240, 62, .3); }
#tab-workflow .workflow-canvas-hint { color: var(--stone-dark); }
#tab-workflow .workflow-canvas-hint kbd { color: var(--icon); background: #1a1a1d; border-color: #3f3f46; box-shadow: 0 1px 0 #050505; }

#tab-workflow .services-panel {
  color: var(--cream);
  background: #121214;
  border-left-color: #2d2d31;
}
#tab-workflow .node-picker-eyebrow,
#tab-workflow .service-group-label { color: var(--stone-dark); }
#tab-workflow .panel-title { color: var(--cream); }
#tab-workflow .panel-sub { color: var(--stone); }
#tab-workflow .node-picker-close { color: var(--stone); }
#tab-workflow .node-picker-close:hover { color: var(--cream); background: #29292d; }
#tab-workflow .node-picker-search { color: var(--stone); background: #1a1a1d; border-color: #343439; }
#tab-workflow .node-picker-search:focus-within { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(200, 240, 62, .1); }
#tab-workflow .node-picker-search input { color: var(--cream); }
#tab-workflow .node-picker-search input::placeholder { color: var(--stone-dark); }
#tab-workflow .service-item { color: var(--icon); }
#tab-workflow .service-item:hover,
#tab-workflow .service-item.agent-service:hover { color: var(--cream); background: #202024; border-color: #343439; }
#tab-workflow .service-item.agent-service { background: rgba(200, 240, 62, .06); border-color: rgba(200, 240, 62, .16); }
#tab-workflow .service-icon,
#tab-workflow .service-item.agent-service .service-icon { color: var(--icon); background: #232326; border-color: #343439; }
#tab-workflow .service-item.agent-service .service-icon { color: var(--lime); background: rgba(200, 240, 62, .1); border-color: rgba(200, 240, 62, .22); }
#tab-workflow .service-drag-handle,
#tab-workflow .node-picker-empty { color: var(--stone-dark); }

#tab-workflow .node-context-menu { color: var(--cream); background: #1a1a1d; border-color: #343439; box-shadow: 0 12px 34px rgba(0, 0, 0, .5); }
#tab-workflow .node-context-menu button { color: var(--icon); }
#tab-workflow .node-context-menu button:hover { color: var(--cream); background: #29292d; }

/* Final workflow card and wire treatment requested: light cards, original Everline wires. */
#tab-workflow .canvas-node:not(.ai-chat-node),
#tab-workflow .canvas-node.agent-node:not(.ai-chat-node),
#tab-workflow .canvas-node.message-node {
  color: #171719;
  background: #F5F8F1;
  border-color: #d8ddd3;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .24);
}
#tab-workflow .canvas-node.agent-node:not(.ai-chat-node) {
  background: #F5F8F1;
  border-color: rgba(200, 240, 62, .62);
}
#tab-workflow .canvas-node:not(.ai-chat-node):hover,
#tab-workflow .canvas-node.message-node:hover {
  border-color: #b8c0b2;
  box-shadow: 0 9px 24px rgba(0, 0, 0, .3);
}
#tab-workflow .canvas-node:not(.ai-chat-node).selected,
#tab-workflow .canvas-node:not(.ai-chat-node).connecting-source {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px rgba(200, 240, 62, .24), 0 9px 24px rgba(0, 0, 0, .3);
}
#tab-workflow .node-title,
#tab-workflow .message-card-source,
#tab-workflow .message-card-copy { color: #171719; }
#tab-workflow .node-status,
#tab-workflow .message-card-footer { color: #71776d; }
#tab-workflow .node-status.status-connected { color: #59720d; }
#tab-workflow .node-menu { color: #777d73; }
#tab-workflow .node-menu:hover { color: #171719; background: #e5e9e1; }
#tab-workflow .node-icon,
#tab-workflow .canvas-node.agent-node .node-icon {
  color: #343832;
  background: #e7ebe3;
  border-color: #d5dad0;
}
#tab-workflow .canvas-node.agent-node .node-icon {
  color: #4f6800;
  background: rgba(200, 240, 62, .24);
  border-color: rgba(130, 164, 22, .35);
}
#tab-workflow .node-configure,
#tab-workflow .node-configure-website,
#tab-workflow .node-configure-whatsapp {
  color: #343832;
  background: #e9ede5;
  border-color: #d2d8cc;
}
#tab-workflow .node-configure:hover,
#tab-workflow .node-configure-website:hover,
#tab-workflow .node-configure-whatsapp:hover {
  color: #354700;
  background: rgba(200, 240, 62, .26);
  border-color: rgba(111, 142, 15, .38);
}
#tab-workflow .node-quick-add {
  color: #555b52;
  background: #F5F8F1;
  border-color: #aeb6a8;
}
#tab-workflow .node-port {
  background: #F5F8F1;
  border-color: var(--lime);
  box-shadow: 0 0 0 2px #F5F8F1;
}
#tab-workflow .message-card-icon {
  color: #4f6800;
  background: rgba(200, 240, 62, .24);
  border-color: rgba(130, 164, 22, .32);
}
#tab-workflow .message-card-live,
#tab-workflow .message-card-expiry { color: #587000; }
#tab-workflow .message-card-live { background: rgba(200, 240, 62, .2); border-color: rgba(130, 164, 22, .3); }

/* Original animated workflow connection style. */
#tab-workflow .connection-line {
  opacity: 1;
  stroke-linecap: round;
  stroke-dasharray: 8 4 !important;
  animation: flowDash .8s linear infinite !important;
  filter: none;
}
#tab-workflow .connection-line.message-flow-line {
  stroke-dasharray: 5 5 !important;
  animation: flowMessageDash .7s linear infinite !important;
}
#tab-workflow .connection-line.conn-selected {
  stroke: #ffffff !important;
  stroke-dasharray: none !important;
  animation: none !important;
  filter: drop-shadow(0 0 6px rgba(200, 240, 62, .8));
}
#tab-workflow .temp-connection {
  stroke: var(--lime);
  stroke-dasharray: 8 4 !important;
  animation: flowDash .6s linear infinite !important;
  opacity: .8;
  filter: none;
}

/* Neutral translucent workflow cards — green is reserved for connection wires only. */
#tab-workflow .canvas-node:not(.ai-chat-node),
#tab-workflow .canvas-node.agent-node:not(.ai-chat-node),
#tab-workflow .canvas-node.message-node {
  color: #232326;
  background: rgba(245, 248, 241, .88);
  border-color: rgba(35, 35, 38, .22);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#tab-workflow .canvas-node.agent-node:not(.ai-chat-node) {
  background: rgba(245, 248, 241, .88);
  border-color: rgba(35, 35, 38, .28);
}
#tab-workflow .canvas-node.agent-node:not(.ai-chat-node)::before { background: #232326; }
#tab-workflow .canvas-node:not(.ai-chat-node):hover,
#tab-workflow .canvas-node.message-node:hover {
  background: rgba(245, 248, 241, .95);
  border-color: #71717A;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
#tab-workflow .canvas-node:not(.ai-chat-node).selected,
#tab-workflow .canvas-node:not(.ai-chat-node).connecting-source {
  border-color: #52525B;
  box-shadow: 0 0 0 2px rgba(82, 82, 91, .24), 0 10px 26px rgba(0, 0, 0, .3);
}
#tab-workflow .canvas-node.ai-chat-node.selected {
  border-color: #71717A;
  box-shadow: 0 0 0 2px rgba(113, 113, 122, .22), 0 10px 28px rgba(0, 0, 0, .4);
}

#tab-workflow .node-title,
#tab-workflow .message-card-source,
#tab-workflow .message-card-copy { color: #232326; }
#tab-workflow .node-status,
#tab-workflow .message-card-footer { color: #71717A; }
#tab-workflow .node-status.status-connected { color: #52525B; }
#tab-workflow .node-menu { color: #71717A; }
#tab-workflow .node-menu:hover { color: #232326; background: rgba(35, 35, 38, .09); }

#tab-workflow .node-icon,
#tab-workflow .canvas-node.agent-node .node-icon {
  color: #232326;
  background: rgba(35, 35, 38, .08);
  border-color: rgba(35, 35, 38, .14);
}
#tab-workflow .canvas-node.agent-node .node-icon {
  color: #232326;
  background: rgba(35, 35, 38, .1);
  border-color: rgba(35, 35, 38, .18);
}

#tab-workflow .node-configure,
#tab-workflow .node-configure-website,
#tab-workflow .node-configure-whatsapp {
  color: #232326;
  background: rgba(35, 35, 38, .07);
  border-color: rgba(35, 35, 38, .16);
}
#tab-workflow .node-configure:hover,
#tab-workflow .node-configure-website:hover,
#tab-workflow .node-configure-whatsapp:hover {
  color: #0B0B0C;
  background: rgba(35, 35, 38, .13);
  border-color: rgba(35, 35, 38, .28);
}

#tab-workflow .node-quick-add,
#tab-workflow .node-quick-add:hover {
  color: #232326;
  background: rgba(245, 248, 241, .92);
  border-color: #71717A;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
}
#tab-workflow .node-quick-add:hover { background: #D4D4D8; border-color: #52525B; }

#tab-workflow .node-port {
  background: #F5F8F1;
  border-color: #71717A;
  box-shadow: 0 0 0 2px rgba(245, 248, 241, .9);
}
#tab-workflow .node-port:hover {
  background: #232326;
  border-color: #232326;
  box-shadow: 0 0 0 4px rgba(35, 35, 38, .16);
}

#tab-workflow .message-card-icon {
  color: #232326;
  background: rgba(35, 35, 38, .08);
  border-color: rgba(35, 35, 38, .16);
}
#tab-workflow .message-card-live,
#tab-workflow .message-card-expiry { color: #52525B; }
#tab-workflow .message-card-live { background: rgba(35, 35, 38, .07); border-color: rgba(35, 35, 38, .15); }
#tab-workflow .message-card-pulse { background: #71717A; box-shadow: none; }

/* Every plus control follows the neutral palette from the supplied reference. */
#tab-workflow .workflow-add-button {
  color: #232326;
  background: rgba(245, 248, 241, .9);
  border: 1px solid rgba(35, 35, 38, .22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#tab-workflow .workflow-add-button:hover {
  color: #0B0B0C;
  background: #D4D4D8;
  border-color: #71717A;
  box-shadow: 0 11px 28px rgba(0, 0, 0, .36);
}
#tab-workflow .canvas-drop-zone-icon {
  color: #232326;
  background: #F5F8F1;
  border: 1px solid rgba(35, 35, 38, .2);
}

/* The agent entry in the picker is neutral as well. */
#tab-workflow .service-item.agent-service {
  color: var(--icon);
  background: rgba(255, 255, 255, .035);
  border-color: #232326;
}
#tab-workflow .service-item.agent-service:hover { background: #1A1A1D; border-color: #52525B; }
#tab-workflow .service-item.agent-service .service-icon {
  color: #D4D4D8;
  background: #232326;
  border-color: #52525B;
}

#tab-workflow .canvas-node:not(.ai-chat-node) .status-dot {
  background: #71717A !important;
  box-shadow: none;
}

#tab-workflow .canvas-drop-zone:hover,
#tab-workflow .canvas-drop-zone:focus-visible,
#tab-workflow .canvas-drop-zone.drag-over {
  color: var(--cream);
  border-color: #71717A;
  box-shadow: 0 0 0 3px rgba(113, 113, 122, .14), 0 10px 28px rgba(0, 0, 0, .34);
}

/* High-contrast 80/15/5 balance from the supplied palette reference. */
#tab-workflow .canvas-node:not(.ai-chat-node),
#tab-workflow .canvas-node.agent-node:not(.ai-chat-node),
#tab-workflow .canvas-node.message-node {
  background: rgba(245, 248, 241, .94);
  border-color: rgba(35, 35, 38, .42);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
#tab-workflow .canvas-node:not(.ai-chat-node):hover,
#tab-workflow .canvas-node.message-node:hover {
  background: rgba(255, 255, 255, .98);
  border-color: #52525B;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4), inset 0 1px #fff;
}

/* Lime is now reserved for primary state cues, not every card control. */
#tab-workflow .canvas-node.agent-node:not(.ai-chat-node)::before { background: var(--lime); }
#tab-workflow .canvas-node:not(.ai-chat-node).selected,
#tab-workflow .canvas-node:not(.ai-chat-node).connecting-source {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px rgba(200, 240, 62, .22), 0 12px 30px rgba(0, 0, 0, .36);
}
#tab-workflow .canvas-node.ai-chat-node.selected {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px rgba(200, 240, 62, .2), 0 12px 30px rgba(0, 0, 0, .42);
}

#tab-workflow .node-title,
#tab-workflow .message-card-source { color: #0B0B0C; }
#tab-workflow .node-status,
#tab-workflow .message-card-footer { color: #52525B; }
#tab-workflow .node-menu { color: #52525B; }
#tab-workflow .node-menu:hover { color: #FFFFFF; background: #232326; }

/* Dark icon tiles give each light card a clear visual anchor. */
#tab-workflow .node-icon,
#tab-workflow .canvas-node.agent-node .node-icon,
#tab-workflow .message-card-icon {
  color: #F4F4F5;
  background: #232326;
  border-color: #101012;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}
#tab-workflow .canvas-node.agent-node .node-icon { color: #FFFFFF; }

#tab-workflow .node-configure,
#tab-workflow .node-configure-website,
#tab-workflow .node-configure-whatsapp {
  color: #F4F4F5;
  background: #232326;
  border-color: #101012;
}
#tab-workflow .node-configure:hover,
#tab-workflow .node-configure-website:hover,
#tab-workflow .node-configure-whatsapp:hover {
  color: #FFFFFF;
  background: #1A1A1D;
  border-color: #52525B;
}

/* Connected and live states consume the small 5% accent budget. */
#tab-workflow .canvas-node:not(.ai-chat-node) .status-dot {
  background: #71717A !important;
  box-shadow: none;
}
#tab-workflow .canvas-node:not(.ai-chat-node) .status-dot.status-dot-connected {
  background: var(--lime) !important;
  box-shadow: 0 0 0 3px rgba(200, 240, 62, .14);
}
#tab-workflow .message-card-pulse {
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(200, 240, 62, .13);
}
#tab-workflow .message-card-live,
#tab-workflow .message-card-expiry { color: #52525B; }
#tab-workflow .message-card-live {
  background: rgba(35, 35, 38, .08);
  border-color: rgba(35, 35, 38, .2);
}

/* Plus controls stay neutral, as requested. */
#tab-workflow .node-quick-add,
#tab-workflow .node-quick-add:hover {
  color: #F4F4F5;
  background: #232326;
  border-color: #52525B;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .34);
}
#tab-workflow .node-quick-add:hover { color: #FFFFFF; background: #1A1A1D; border-color: #71717A; }
#tab-workflow .workflow-add-button,
#tab-workflow .workflow-add-button:hover {
  color: #F4F4F5;
  background: #232326;
  border-color: #52525B;
  box-shadow: 0 9px 26px rgba(0, 0, 0, .4);
}
#tab-workflow .workflow-add-button:hover { color: #FFFFFF; background: #1A1A1D; border-color: #71717A; }
#tab-workflow .canvas-drop-zone-icon {
  color: #F4F4F5;
  background: #232326;
  border-color: #52525B;
}

/* Ports remain neutral so the animated connection is the only green route. */
#tab-workflow .node-port {
  background: #F5F8F1;
  border-color: #52525B;
  box-shadow: 0 0 0 2px rgba(245, 248, 241, .94);
}
#tab-workflow .node-port:hover {
  background: #232326;
  border-color: #232326;
  box-shadow: 0 0 0 4px rgba(35, 35, 38, .18);
}

/* Centered workflow tool dock with persistent hand-pan mode. */
#tab-workflow .workflow-canvas-toolbar {
  right: auto;
  left: 50%;
  gap: 1px;
  transform: translateX(-50%);
}
#tab-workflow:has(.services-panel.is-open) .workflow-canvas-toolbar {
  left: 50%;
}
#tab-workflow .workflow-canvas-toolbar #workflow-pan-tool.is-active,
#tab-workflow .workflow-canvas-toolbar #workflow-pan-tool[aria-pressed="true"] {
  color: #0B0B0C;
  background: var(--lime);
  box-shadow: 0 0 0 1px rgba(200, 240, 62, .3), 0 0 12px rgba(200, 240, 62, .16);
}
#tab-workflow .workflow-canvas-toolbar #workflow-pan-tool.is-active:hover {
  color: #0B0B0C;
  background: #D9FF63;
}
#tab-workflow .workflow-canvas-area.pan-tool-active { cursor: grab; }
#tab-workflow .workflow-canvas-area.pan-tool-active:active { cursor: grabbing; }
#tab-workflow .workflow-canvas-hint {
  bottom: 66px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
@media (max-width: 900px) {
  #tab-workflow:has(.services-panel.is-open) .workflow-canvas-toolbar { left: 50%; }
}

/* Keep the workflow status row directly below the top bar instead of at the bottom. */
.main-area > .top-bar { order: 0; }
.main-area > .status-bar {
  order: 1;
  border-top: 0;
  border-bottom: 1px solid var(--border);
}
.main-area > .content-area { order: 2; }
.main-area > .ask-ai-float { order: 3; }

/* Keep the empty workflow prompt on the dotted canvas, not as a button. */
#tab-workflow .canvas-drop-zone {
  min-width: 0;
  padding: 9px 12px;
  gap: 9px;
  color: #71717A;
  cursor: default;
  pointer-events: auto;
  background: #0d0d0f;
  border: 1px solid rgba(113, 113, 122, .65);
  border-radius: 8px;
  box-shadow: none;
  transition: none;
}
#tab-workflow .canvas-drop-zone:hover,
#tab-workflow .canvas-drop-zone:focus-visible {
  color: #71717A;
  background: #0d0d0f;
  border-color: rgba(113, 113, 122, .65);
  box-shadow: none;
  outline: none;
}
#tab-workflow .canvas-drop-zone.drag-over {
  color: var(--lime);
  background: #0d0d0f;
  border-color: var(--lime);
  box-shadow: none;
}
#tab-workflow .canvas-drop-zone-icon {
  width: 26px;
  height: 26px;
  color: #71717A;
  background: transparent;
  border: 0;
  border-radius: 0;
}
#tab-workflow .canvas-drop-zone-icon svg { width: 18px; height: 18px; }
#tab-workflow .canvas-drop-zone > span:last-child { gap: 2px; }
#tab-workflow .canvas-drop-zone strong {
  color: #52525B;
  font-size: 12px;
  font-weight: 650;
}
#tab-workflow .canvas-drop-zone small {
  color: #71717A;
  font-size: 10px;
}
#tab-workflow .canvas-drop-zone.drag-over .canvas-drop-zone-icon,
#tab-workflow .canvas-drop-zone.drag-over strong,
#tab-workflow .canvas-drop-zone.drag-over small { color: var(--lime); }

/* Keep canvas controls still; animate the Workflow step panel only. */
#tab-workflow .workflow-add-button,
#tab-workflow .workflow-canvas-toolbar {
  transition: none !important;
  animation: none !important;
}
#tab-workflow .services-panel {
  border: 1px solid #2d2d31;
  border-radius: 18px;
  transition:
    width .28s cubic-bezier(.22, .8, .22, 1),
    min-width .28s cubic-bezier(.22, .8, .22, 1),
    padding .28s ease,
    opacity .22s ease,
    transform .28s cubic-bezier(.22, .8, .22, 1),
    border-color .2s ease !important;
  animation: none !important;
}
/* Hide the add-step control while the Workflow step picker is open. */
#tab-workflow:has(.services-panel.is-open) .workflow-add-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Refined dashboard sidebar */
:root {
  --sidebar-width: 68px;
  --sidebar-expanded: 228px;
}

.sidebar {
  position: relative;
  padding: 14px 10px 12px;
  background: linear-gradient(180deg, #111214 0%, #0c0d0f 100%);
  border-right: 1px solid rgba(255, 255, 255, .08);
  border-radius: 0 20px 20px 0;
  box-shadow: 12px 0 34px rgba(0, 0, 0, .18);
  align-items: center;
}
.sidebar.expanded { padding: 14px 10px 12px; }
.sidebar-center-group,
.sidebar.expanded .sidebar-center-group {
  transform: none;
  opacity: 1;
  align-items: center;
}
.sidebar.expanded .sidebar-center-group { align-items: stretch; }
.sidebar > .sidebar-toggle {
  position: absolute;
  top: 16px;
  right: -12px;
  z-index: 4;
  margin: 0;
  width: 25px;
  height: 25px;
  min-width: 25px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: #202225;
  box-shadow: 0 5px 14px rgba(0,0,0,.35);
}
.sidebar.expanded > .sidebar-toggle { margin-left: 0; }
.sidebar-top,
.sidebar.expanded .sidebar-top {
  height: 46px;
  margin: 0 0 18px;
  padding: 0;
  justify-content: center;
  align-items: center;
}
.sidebar.expanded .sidebar-top { justify-content: flex-start; }
.sidebar-logo {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: visible;
}
.sidebar.expanded .sidebar-logo {
  width: 100%;
  justify-content: flex-start;
  padding: 0 10px;
}
.sidebar-logo-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200,240,62,.16);
  border-radius: 12px;
  background: rgba(200,240,62,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.everline-glyph {
  position: relative;
  width: 26px;
  height: 25px;
  display: block;
  transform: rotate(0deg);
}
.everline-glyph i {
  position: absolute;
  top: 2px;
  width: 6px;
  height: 20px;
  border-radius: 99px;
  background: linear-gradient(180deg, #dcff64, var(--lime));
  transform: skewX(-26deg);
  box-shadow: 0 0 10px rgba(200,240,62,.16);
}
.everline-glyph i:first-child { left: 4px; }
.everline-glyph i:nth-child(2) { left: 13px; }
.everline-glyph b {
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px rgba(200,240,62,.2);
}
.sidebar-brand-name {
  display: none;
  color: #f6f7f2;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.5px;
}
.sidebar.expanded .sidebar-brand-name { display: inline; }
.sidebar-nav { gap: 7px; }
.nav-item {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #7f858c;
  transform: none !important;
  overflow: visible;
}
.nav-item:hover {
  color: #f5f6ef;
  border-color: rgba(255,255,255,.06);
  background: rgba(255,255,255,.055);
  transform: translateY(-1px) !important;
}
.nav-item.active {
  color: #10120d;
  border-color: rgba(200,240,62,.85);
  background: linear-gradient(135deg, #d6fa54, #bce92f);
  box-shadow: none;
}
.sidebar.expanded .nav-item {
  height: 46px;
  padding: 0 12px;
  border-radius: 12px;
}
.sidebar.expanded .nav-item .nav-label {
  font-size: 13px;
  font-weight: 600;
}
.sidebar-bottom {
  padding-top: 11px;
  border-top-color: rgba(255,255,255,.08);
}
.sidebar.expanded .sidebar-bottom { align-items: stretch; }
.sidebar-avatar {
  border: 1px solid rgba(255,255,255,.15);
  background: linear-gradient(135deg, #34383d, #1d2024);
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.user-dropdown {
  bottom: 14px;
  left: 76px;
  border-color: rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(22,23,26,.98);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  backdrop-filter: blur(16px);
}
.sidebar.expanded .user-dropdown { left: 236px; }


/* ========================================================================
   Sidebar redesign — calm, professional workspace navigation
   ======================================================================== */
:root {
  --sidebar-width: 76px;
  --sidebar-expanded: 252px;
  --sidebar-surface: #101215;
  --sidebar-surface-raised: #17191d;
  --sidebar-line: rgba(255, 255, 255, .085);
  --sidebar-muted: #858a93;
  --sidebar-muted-strong: #aeb3bb;
}

.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  position: relative;
  padding: 16px 10px 14px;
  background: linear-gradient(180deg, #15171a 0%, var(--sidebar-surface) 42%, #0d0f11 100%);
  border-right: 1px solid var(--sidebar-line);
  border-radius: 0 22px 22px 0;
  box-shadow: 18px 0 42px rgba(0, 0, 0, .20);
  transition: width .28s cubic-bezier(.22, 1, .36, 1), min-width .28s cubic-bezier(.22, 1, .36, 1), padding .28s ease;
}
.sidebar.expanded {
  width: var(--sidebar-expanded);
  min-width: var(--sidebar-expanded);
  padding: 16px 12px 14px;
}
.sidebar-center-group,
.sidebar.expanded .sidebar-center-group {
  transform: none;
  opacity: 1;
  align-items: center;
}
.sidebar.expanded .sidebar-center-group { align-items: stretch; }

.sidebar > .sidebar-toggle {
  position: absolute;
  top: 18px;
  right: -13px;
  z-index: 4;
  width: 27px;
  height: 27px;
  min-width: 27px;
  margin: 0;
  color: #aeb3bb;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 9px;
  background: #25282d;
  box-shadow: 0 7px 17px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.06);
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .28s ease;
}
.sidebar > .sidebar-toggle:hover {
  color: #f5f6ef;
  border-color: rgba(200, 240, 62, .35);
  background: #30343a;
}
.sidebar > .sidebar-toggle:focus-visible,
.nav-item:focus-visible,
.sidebar-account:focus-visible,
.user-dropdown-item:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
.sidebar > .sidebar-toggle svg { width: 15px; height: 15px; transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.sidebar.expanded > .sidebar-toggle svg { transform: rotate(180deg); }

.sidebar-top,
.sidebar.expanded .sidebar-top {
  width: 100%;
  height: 48px;
  margin: 0 0 25px;
  padding: 0 4px;
  justify-content: center;
  align-items: center;
}
.sidebar.expanded .sidebar-top { justify-content: flex-start; }
.sidebar-logo {
  width: 46px;
  height: 46px;
  min-width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  overflow: visible;
}
.sidebar.expanded .sidebar-logo {
  width: 100%;
  justify-content: flex-start;
  padding: 0 5px;
}
.sidebar-logo-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid rgba(200, 240, 62, .20);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(200, 240, 62, .18), rgba(200, 240, 62, .045));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 7px 18px rgba(0, 0, 0, .18);
}
.sidebar-brand-copy {
  display: none;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.sidebar.expanded .sidebar-brand-copy { display: flex; }
.sidebar-brand-name {
  display: block;
  color: #f4f6ef;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.65px;
  line-height: 1.05;
}
.sidebar-brand-subtitle {
  color: #777d86;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .055em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sidebar-nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sidebar-nav-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
.sidebar-nav-section-label {
  display: none;
  padding: 0 13px 5px;
  color: #626872;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sidebar.expanded .sidebar-nav-section-label { display: block; }
.nav-item {
  width: 46px;
  height: 45px;
  min-width: 46px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--sidebar-muted);
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  overflow: visible;
  transform: none !important;
  transition: width .28s cubic-bezier(.22, 1, .36, 1), padding .24s ease, gap .24s ease,
              color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.sidebar.expanded .nav-item {
  width: 100%;
  height: 45px;
  min-width: 0;
  margin: 0;
  padding: 0 12px;
  justify-content: flex-start;
}
.nav-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  display: grid;
  place-items: center;
}
.nav-icon svg { width: 19px; height: 19px; }
.nav-item:hover {
  color: #f1f3ec;
  border-color: rgba(255, 255, 255, .065);
  background: rgba(255, 255, 255, .055);
  transform: translateX(2px) !important;
}
.nav-item.active {
  color: #11140d;
  border-color: rgba(215, 255, 75, .80);
  background: linear-gradient(135deg, #d8fb54 0%, #bdf033 100%);
  box-shadow: none !important;
  filter: none !important;
}
.nav-item.active:hover { color: #11140d; background: linear-gradient(135deg, #e0ff68, #c6f43c); }
.nav-item .nav-label {
  display: block;
  width: 0;
  flex: 1;
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.01em;
  opacity: 0;
  text-align: left;
  transition: width .25s ease, opacity .18s ease;
}
.sidebar.expanded .nav-item .nav-label { width: auto; opacity: 1; }
.nav-item-arrow {
  display: none;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity .18s ease, transform .18s ease;
}
.sidebar.expanded .nav-item-arrow { display: grid; place-items: center; }
.nav-item-arrow svg { width: 14px; height: 14px; }
.nav-item:hover .nav-item-arrow,
.nav-item.active .nav-item-arrow { opacity: .72; transform: translateX(0); }

.sidebar-bottom {
  width: 100%;
  align-items: center;
  gap: 8px;
  padding-top: 13px;
  border-top: 1px solid var(--sidebar-line);
}
.sidebar.expanded .sidebar-bottom { align-items: stretch; }
.sidebar-account {
  position: relative;
  width: 46px;
  height: 48px;
  min-width: 46px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--sidebar-muted-strong);
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  text-align: left;
  transition: width .28s cubic-bezier(.22, 1, .36, 1), padding .24s ease, background .18s ease, border-color .18s ease;
}
.sidebar.expanded .sidebar-account {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 10px;
  justify-content: flex-start;
}
.sidebar-account:hover {
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.055);
}
.sidebar-account .sidebar-avatar { width: 32px; height: 32px; min-width: 32px; }
.sidebar-account-copy {
  display: none;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}
.sidebar.expanded .sidebar-account-copy { display: flex; }
.sidebar-account-copy strong {
  overflow: hidden;
  color: #eef0ea;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-account-copy small {
  overflow: hidden;
  color: #777d86;
  font-size: 10px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-account-chevron {
  display: none;
  width: 15px;
  height: 15px;
  color: #7f858d;
}
.sidebar.expanded .sidebar-account-chevron { display: block; }

.user-dropdown {
  bottom: 15px;
  left: calc(100% + 9px);
  min-width: 176px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  background: rgba(24, 26, 30, .98);
  box-shadow: 0 20px 48px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
}
.sidebar.expanded .user-dropdown { left: calc(100% + 9px); }
.user-dropdown-item { min-height: 38px; border-radius: 9px; }

@media (max-width: 768px) {
  .sidebar {
    width: 68px;
    min-width: 68px;
    padding: 14px 8px 12px;
  }
  .sidebar.expanded {
    width: min(252px, calc(100vw - 16px));
    min-width: min(252px, calc(100vw - 16px));
  }
  .sidebar-nav { gap: 15px; }
  .sidebar-top { margin-bottom: 18px; }
  .sidebar.expanded .sidebar-top { margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .nav-item, .sidebar-account, .sidebar > .sidebar-toggle,
  .sidebar > .sidebar-toggle svg, .nav-item-arrow { transition: none; }
}


/* Legacy service cards are no longer part of the ai-call-only workflow. */
#tab-workflow .canvas-node.agent-node,
#tab-workflow .canvas-node.website-node,
#tab-workflow .node-configure,
#tab-workflow .node-configure-website,
#tab-workflow .node-configure-whatsapp {
  display: none !important;
}


/* ========================================================================
   SALES OVERVIEW — light dashboard inspired by the supplied reference
   ======================================================================== */
body.dashboard-home {
  background: #000;
  color: #0a0a0b;
  gap: 0;
}
body.dashboard-home .sidebar {
  width: 64px;
  min-width: 64px;
  height: calc(100vh - 64px);
  margin: 32px 0 32px 28px;
  padding: 18px 9px 14px;
  color: #111214;
  background: #fff;
  border: 0;
  border-radius: 24px 0 0 24px;
  box-shadow: none;
  z-index: 20;
}
body.dashboard-home .sidebar > .sidebar-toggle,
body.dashboard-home .sidebar-brand-copy,
body.dashboard-home .sidebar-nav-section-label,
body.dashboard-home .nav-item-arrow,
body.dashboard-home .sidebar-account-copy,
body.dashboard-home .sidebar-account-chevron {
  display: none;
}
body.dashboard-home .sidebar-center-group { align-items: center; }
body.dashboard-home .sidebar-top {
  height: 37px;
  margin: 0 0 22px;
  padding: 0;
}
body.dashboard-home .sidebar-logo,
body.dashboard-home .sidebar.expanded .sidebar-logo {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
}
body.dashboard-home .sidebar-logo-mark {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.dashboard-home .everline-glyph { transform: scale(.8); }
body.dashboard-home .everline-glyph i { background: #111214; box-shadow: none; }
body.dashboard-home .everline-glyph b { background: #111214; box-shadow: none; }
body.dashboard-home .sidebar-nav,
body.dashboard-home .sidebar-nav-section,
body.dashboard-home .sidebar.expanded .sidebar-nav-section {
  width: 100%;
  align-items: center;
  gap: 8px;
}
body.dashboard-home .sidebar-nav { gap: 8px; }
body.dashboard-home .nav-item,
body.dashboard-home .sidebar.expanded .nav-item {
  width: 30px;
  height: 30px;
  min-width: 30px;
  margin: 0;
  padding: 0;
  color: #b8b9bb;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
body.dashboard-home .nav-item:hover { color: #111214; background: #f0f0f0; transform: none !important; }
body.dashboard-home .nav-item.active,
body.dashboard-home .nav-item.active:hover {
  color: #fff;
  background: #050505;
  box-shadow: none !important;
}
body.dashboard-home .nav-icon,
body.dashboard-home .nav-icon svg { width: 16px; height: 16px; }
body.dashboard-home .sidebar-bottom {
  padding-top: 12px;
  border-top: 0;
  gap: 8px;
}
body.dashboard-home .sidebar-account,
body.dashboard-home .sidebar.expanded .sidebar-account {
  width: 30px;
  height: 30px;
  min-width: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  justify-content: center;
}
body.dashboard-home .sidebar-account:hover { background: #f0f0f0; }
body.dashboard-home .sidebar-avatar,
body.dashboard-home .sidebar-account .sidebar-avatar {
  width: 22px;
  height: 22px;
  min-width: 22px;
  color: #fff;
  font-size: 9px;
  border: 0;
  background: #b8b9bb;
  box-shadow: none;
}
body.dashboard-home .user-dropdown { left: 42px; bottom: 12px; }
body.dashboard-home .sidebar.expanded {
  width: 252px;
  min-width: 252px;
}
body.dashboard-home .sidebar.expanded .sidebar-nav-section,
body.dashboard-home .sidebar.expanded .sidebar-nav { align-items: stretch; }
body.dashboard-home .sidebar.expanded .nav-item { width: 100%; justify-content: flex-start; padding: 0 12px; border-radius: 10px; }
body.dashboard-home .sidebar.expanded .nav-item .nav-label,
body.dashboard-home .sidebar.expanded .sidebar-brand-copy,
body.dashboard-home .sidebar.expanded .sidebar-account-copy,
body.dashboard-home .sidebar.expanded .nav-item-arrow { display: block; }

body.dashboard-home .main-area {
  height: calc(100vh - 64px);
  margin: 32px 14px 32px 0;
  overflow: hidden;
  border-radius: 0 24px 24px 0;
  background: #fff;
  color: #0a0a0b;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 14px 36px rgba(255,255,255,.13);
}
body.dashboard-home .content-area { overflow: hidden; background: #fff; }
body.dashboard-home .status-bar,
body.dashboard-home .top-bar { display: none !important; }
body.dashboard-home .tab-content { height: 100%; }
body.dashboard-home #tab-dashboard { display: flex; background: #fff; overflow-y: auto; }
body.dashboard-home.tool-module-open .content-area > .tab-content {
  display: none !important;
}
body.dashboard-home.tool-module-open .tool-module-host {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block !important;
  overflow: auto;
}
body.dashboard-home #tab-dashboard::-webkit-scrollbar { width: 5px; }
body.dashboard-home #tab-dashboard::-webkit-scrollbar-thumb { background: #dedede; border-radius: 999px; }

.dashboard-page { width: 100%; min-height: 100%; background: #fff; }
.dashboard-header {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 22px 0 14px;
  border-bottom: 1px solid #f0f0f0;
}
.dashboard-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 190px;
  color: #9b9ca0;
}
.dashboard-search svg { width: 16px; height: 16px; flex: 0 0 auto; }
.dashboard-search input { width: 100%; padding: 5px 0; color: #161719; font-size: 10px; border: 0; outline: 0; background: transparent; }
.dashboard-search input::placeholder { color: #b5b5b7; }
.dashboard-header-actions { display: flex; align-items: center; gap: 14px; }
.dashboard-icon-button,
.dashboard-profile { display: flex; align-items: center; border: 0; background: transparent; }
.dashboard-icon-button { position: relative; padding: 3px; color: #a4a5a8; }
.dashboard-icon-button svg { width: 15px; height: 15px; }
.notification-dot { position: absolute; top: 1px; right: 1px; width: 4px; height: 4px; border-radius: 50%; background: #5ee16a; }
.dashboard-profile { gap: 6px; padding: 0; color: #97989a; }
.dashboard-profile svg { width: 12px; height: 12px; }
.dashboard-profile-avatar { display: grid; width: 26px; height: 26px; place-items: center; color: #fff; font-size: 11px; font-weight: 700; background: #e6a06c; border-radius: 50%; }
.dashboard-overview { padding: 20px 16px 28px; }
.dashboard-welcome-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  padding: 14px 16px;
  color: #111214;
  border: 1px solid #ededed;
  border-radius: 16px;
  background: #fafafa;
}
.dashboard-welcome-copy,
.dashboard-welcome-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.dashboard-welcome-copy { flex: 1; }
.dashboard-welcome-item {
  padding-left: 18px;
  border-left: 1px solid #e4e4e4;
}
.dashboard-welcome-label {
  color: #a0a1a4;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.dashboard-welcome-header strong {
  color: #171719;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.dashboard-welcome-copy strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.04em;
}
.dashboard-last-updated strong { color: #6e7073; }
.dashboard-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.dashboard-eyebrow { margin-bottom: 5px; color: #b0b1b4; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.dashboard-heading-row h1 { color: #09090a; font-family: var(--font-display); font-size: clamp(24px, 3vw, 31px); font-weight: 500; letter-spacing: -.07em; line-height: .96; }
.dashboard-heading-row h1 span { color: #c8f03e; }
.dashboard-heading-actions { display: flex; align-items: center; gap: 6px; }
.dashboard-select,
.dashboard-export {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  color: #171719;
  font-family: var(--font-body);
  font-size: 9px;
  border: 0;
  border-radius: 18px;
  background: #f4f4f4;
}
.dashboard-select { text-align: left; }
.dashboard-select-icon { display: grid; place-items: center; width: 18px; height: 18px; color: #8f9093; background: #fff; border-radius: 50%; }
.dashboard-select-icon svg { width: 11px; height: 11px; }
.dashboard-select small { display: block; color: #aaa; font-size: 7px; line-height: 1; }
.dashboard-select strong { display: block; font-size: 8px; font-weight: 500; white-space: nowrap; }
.dashboard-chevron { width: 11px; height: 11px; color: #999; }
.dashboard-filter { padding-right: 10px; }
.dashboard-export { color: #fff; background: #050505; cursor: pointer; }
.dashboard-export span { font-size: 13px; line-height: 1; }
.dashboard-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 6px; }
.dashboard-kpi { min-height: 96px; padding: 12px 13px 10px; color: #070708; background: #f2f2f2; border-radius: 16px; }
.dashboard-kpi-primary { color: #fff; background: #030303; }
.dashboard-kpi-top { display: flex; align-items: center; justify-content: space-between; color: #19191a; font-size: 9px; font-weight: 600; }
.dashboard-kpi-primary .dashboard-kpi-top { color: #fff; }
.dashboard-kpi-arrow { display: grid; width: 21px; height: 21px; place-items: center; color: #96979a; font-size: 14px; background: #e9e9e9; border-radius: 50%; }
.dashboard-kpi-primary .dashboard-kpi-arrow { color: #111; background: #fff; }
.dashboard-kpi > strong { display: block; margin: 10px 0 4px; font-family: var(--font-display); font-size: 27px; font-weight: 400; letter-spacing: -.06em; line-height: 1; }
.dashboard-kpi > small { color: #8d8e91; font-size: 7px; }
.dashboard-kpi-primary > small { color: #c3c3c3; }
.dashboard-usage-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(190px, 1fr); gap: 6px; margin-bottom: 6px; }
.usage-card,
.cost-card { min-height: 142px; }
.usage-list { display: grid; gap: 7px; margin-top: 14px; }
.usage-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid #e5e5e5; }
.usage-row:last-child { padding-bottom: 0; border-bottom: 0; }
.usage-provider { color: #55565a; font-size: 8px; font-weight: 600; }
.usage-row strong { color: #171718; font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: -.04em; }
.usage-row small { color: #999a9d; font-family: var(--font-body); font-size: 7px; font-weight: 500; letter-spacing: 0; }
.cost-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 22px; }
.cost-summary > div { display: flex; min-height: 63px; flex-direction: column; justify-content: space-between; padding: 9px; background: #fff; border-radius: 10px; }
.cost-summary span { color: #999a9d; font-size: 7px; }
.cost-summary strong { color: #171718; font-family: var(--font-display); font-size: 21px; font-weight: 500; letter-spacing: -.06em; }
.dashboard-visual-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(190px, 1fr); gap: 6px; margin-bottom: 6px; }
.dashboard-card { min-width: 0; padding: 12px; background: #f3f3f3; border-radius: 15px; }
.dashboard-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dashboard-card-header h2 { color: #121213; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: -.03em; }
.dashboard-card-header p { margin-top: 2px; color: #999a9d; font-size: 7px; }
.dashboard-card-header p strong { color: #6f7073; font-weight: 600; }
.dashboard-card-tools { display: flex; align-items: center; gap: 4px; }
.dashboard-period,
.dashboard-card-icon { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; color: #7d7e81; font-size: 7px; border: 0; border-radius: 10px; background: #fff; }
.dashboard-period svg { width: 8px; height: 8px; }
.dashboard-card-icon { width: 21px; height: 21px; padding: 0; justify-content: center; font-size: 12px; color: #a1a2a4; }
.conversations-card { min-height: 204px; }
.conversations-chart { display: flex; align-items: flex-end; justify-content: space-around; gap: 7px; height: 147px; margin: 10px 3px 0; padding-top: 12px; }
.conversation-column { position: relative; display: flex; flex: 1; height: 100%; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; }
.conversation-value { position: absolute; top: 0; min-width: 31px; padding: 3px 5px; color: #fff; font-size: 7px; text-align: center; background: #030303; border-radius: 10px; opacity: 0; }
.conversation-value.is-active { opacity: 1; }
.conversation-bar { width: 100%; max-width: 37px; min-height: 15px; border-radius: 9px 9px 7px 7px; background: #dedfe0; }
.conversation-bar.is-active { background: #54df5d; }
.conversation-label { color: #8d8e91; font-size: 7px; }
.conversation-label.is-active { color: #51c85a; }
.orders-card { min-height: 204px; }
.orders-heatmap { display: grid; gap: 8px; margin-top: 25px; }
.heatmap-row { display: grid; grid-template-columns: 47px 1fr; align-items: center; gap: 6px; }
.heatmap-label { color: #78797c; font-size: 7px; }
.heatmap-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.heatmap-cell { height: 29px; border-radius: 8px; background: #e1e2e3; }
.heatmap-cell.green { background: #55df5e; }
.heatmap-cell.black { background: #050505; }
.heatmap-cell.gray { background: #aeb0b1; }
.heatmap-cell.dark-gray { background: #6f7072; }
.transactions-card { padding-bottom: 3px; }
.transactions-table-wrap { margin: 12px -12px 0; overflow-x: auto; }
.transactions-table { width: 100%; border-collapse: collapse; color: #737477; font-size: 8px; }
.transactions-table th { padding: 7px 12px; color: #9b9c9f; font-size: 7px; font-weight: 500; text-align: left; border-bottom: 1px solid #e3e3e3; }
.transactions-table td { padding: 8px 12px; border-bottom: 1px solid #e7e7e7; white-space: nowrap; }
.transactions-table tbody tr:last-child td { border-bottom: 0; }
.transactions-table td strong { color: #171718; font-weight: 600; }
.transaction-avatar { display: inline-grid; width: 24px; height: 24px; margin-right: 7px; place-items: center; color: #111; font-size: 9px; font-weight: 700; line-height: 1; vertical-align: middle; background: #fff; border: 1px solid #d9d9d9; border-radius: 50%; box-shadow: 0 2px 6px rgb(30 32 37 / 10%); }
.transactions-table td:first-child { display: flex; align-items: center; min-height: 42px; }
.transactions-table td:first-child strong { overflow: hidden; max-width: 180px; text-overflow: ellipsis; }
.transaction-status { padding: 3px 6px; color: #479650; font-size: 7px; background: #e0f4e3; border-radius: 8px; }
.transaction-status.pending { color: #9d7a32; background: #fff1cf; }

@media (max-width: 900px) {
  body.dashboard-home .sidebar { margin-left: 12px; }
  body.dashboard-home .main-area { margin-right: 10px; }
  .dashboard-heading-row { align-items: flex-start; flex-direction: column; }
  .dashboard-heading-actions { width: 100%; justify-content: flex-end; }
}
@media (max-width: 650px) {
  body.dashboard-home .sidebar { width: 52px; min-width: 52px; margin-left: 0; border-radius: 0; }
  body.dashboard-home .main-area { margin: 0; border-radius: 0; }
  .dashboard-overview { padding: 16px 10px 24px; }
  .dashboard-header { padding: 0 12px; }
  .dashboard-welcome-header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }
  .dashboard-welcome-item {
    padding: 10px 0 0;
    border-top: 1px solid #e4e4e4;
    border-left: 0;
  }
  .dashboard-welcome-header strong { white-space: normal; }
  .dashboard-heading-actions { justify-content: flex-start; flex-wrap: wrap; }
  .dashboard-select { flex: 1; }
  .dashboard-filter { flex: 0 0 auto; }
  .dashboard-export { flex: 0 0 auto; }
  .dashboard-kpis { grid-template-columns: 1fr; }
  .dashboard-kpi { min-height: 82px; }
  .dashboard-visual-grid { grid-template-columns: 1fr; }
}


/* Full-screen dashboard mode: no framed margins, all available viewport space is used. */
body.dashboard-home {
  min-width: 0;
  min-height: 100vh;
  overflow: hidden;
  background: #000;
}
body.dashboard-home .sidebar {
  width: 76px;
  min-width: 76px;
  height: 100vh;
  margin: 0;
  padding: 24px 15px 18px;
  border-right: 1px solid #ededed;
  border-radius: 0;
  box-shadow: none;
}
body.dashboard-home .sidebar-top { margin-bottom: 30px; }
body.dashboard-home .sidebar-nav,
body.dashboard-home .sidebar-nav-section { gap: 12px; }
body.dashboard-home .nav-item,
body.dashboard-home .sidebar.expanded .nav-item {
  width: 38px;
  height: 38px;
  min-width: 38px;
}
body.dashboard-home .nav-icon,
body.dashboard-home .nav-icon svg { width: 18px; height: 18px; }
body.dashboard-home .sidebar-bottom { padding-top: 18px; }
body.dashboard-home .sidebar-account,
body.dashboard-home .sidebar.expanded .sidebar-account {
  width: 38px;
  height: 38px;
  min-width: 38px;
}
body.dashboard-home .sidebar-avatar,
body.dashboard-home .sidebar-account .sidebar-avatar { width: 27px; height: 27px; min-width: 27px; }
body.dashboard-home .main-area {
  width: calc(100vw - 76px);
  height: 100vh;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
body.dashboard-home .content-area { min-height: 0; }
.dashboard-header { height: 76px; padding: 0 clamp(24px, 4vw, 64px); }
.dashboard-search { width: clamp(220px, 24vw, 340px); }
.dashboard-search input { font-size: 12px; }
.dashboard-header-actions { gap: 18px; }
.dashboard-icon-button svg { width: 18px; height: 18px; }
.dashboard-profile-avatar { width: 34px; height: 34px; font-size: 13px; }
.dashboard-overview { padding: clamp(28px, 4vw, 58px) clamp(24px, 4vw, 64px) 56px; }
.dashboard-heading-row { margin-bottom: clamp(24px, 3vw, 38px); }
.dashboard-eyebrow { margin-bottom: 10px; font-size: 11px; }
.dashboard-heading-row h1 { font-size: clamp(36px, 4vw, 58px); }
.dashboard-heading-actions { gap: 9px; }
.dashboard-select,
.dashboard-export { min-height: 46px; padding: 8px 14px; font-size: 11px; }
.dashboard-select-icon { width: 25px; height: 25px; }
.dashboard-select-icon svg { width: 14px; height: 14px; }
.dashboard-select small { font-size: 9px; }
.dashboard-select strong { font-size: 11px; }
.dashboard-chevron { width: 14px; height: 14px; }
.dashboard-kpis { gap: 9px; margin-bottom: 9px; }
.dashboard-kpi { min-height: clamp(125px, 15vh, 170px); padding: 20px 21px 16px; border-radius: 22px; }
.dashboard-kpi-top { font-size: 12px; }
.dashboard-usage-grid { grid-template-columns: minmax(0, 1.65fr) minmax(190px, 1fr); gap: 9px; margin-bottom: 9px; }
.usage-card,
.cost-card { min-height: clamp(190px, 23vh, 270px); }
.usage-list { gap: 11px; margin-top: 21px; }
.usage-row { padding-bottom: 9px; }
.usage-provider { font-size: 10px; }
.usage-row strong { font-size: 18px; }
.usage-row small { font-size: 9px; }
.cost-summary { gap: 9px; margin-top: 32px; }
.cost-summary > div { min-height: 90px; padding: 13px; border-radius: 14px; }
.cost-summary span { font-size: 9px; }
.cost-summary strong { font-size: 31px; }
.dashboard-visual-grid { gap: 9px; margin-bottom: 9px; }
.dashboard-kpi-arrow { width: 29px; height: 29px; font-size: 17px; }
.dashboard-kpi > strong { margin: 22px 0 7px; font-size: clamp(32px, 3.4vw, 48px); }
.dashboard-kpi > small { font-size: 10px; }
.dashboard-visual-grid { gap: 9px; margin-bottom: 9px; }
.dashboard-card { padding: 20px; border-radius: 22px; }
.dashboard-card-header h2 { font-size: 15px; }
.dashboard-card-header p { margin-top: 4px; font-size: 10px; }
.dashboard-period,
.dashboard-card-icon { padding: 6px 10px; font-size: 10px; border-radius: 14px; }
.dashboard-card-icon { width: 29px; height: 29px; padding: 0; font-size: 15px; }
.conversations-card,
.orders-card { min-height: clamp(260px, 32vh, 390px); }
.conversations-chart { height: clamp(190px, 25vh, 290px); margin-top: 18px; gap: 14px; }
.conversation-bar { max-width: 64px; min-height: 25px; border-radius: 14px 14px 10px 10px; }
.conversation-value { min-width: 44px; padding: 5px 8px; font-size: 10px; }
.conversation-label { font-size: 10px; }
.orders-heatmap { gap: 12px; margin-top: clamp(32px, 5vh, 55px); }
.heatmap-row { grid-template-columns: 72px 1fr; gap: 10px; }
.heatmap-label { font-size: 10px; }
.heatmap-cells { gap: 5px; }
.heatmap-cell { height: clamp(35px, 5vh, 56px); border-radius: 12px; }
.transactions-card { padding-bottom: 8px; }
.transactions-table-wrap { margin-top: 18px; }
.transactions-table { font-size: 11px; }
.transactions-table th { padding: 10px 20px; font-size: 9px; }
.transactions-table td { padding: 13px 20px; }
.transaction-avatar { width: 24px; height: 24px; margin-right: 8px; font-size: 10px; }
.transaction-status { padding: 5px 9px; font-size: 9px; }

@media (max-width: 900px) {
  body.dashboard-home .sidebar { width: 64px; min-width: 64px; padding-inline: 13px; }
  body.dashboard-home .main-area { width: calc(100vw - 64px); }
  .dashboard-heading-row { align-items: flex-start; }
  .dashboard-overview { padding: 28px 24px 42px; }
}
@media (max-width: 650px) {
  body.dashboard-home .sidebar { width: 54px; min-width: 54px; padding: 18px 8px; }
  body.dashboard-home .main-area { width: calc(100vw - 54px); }
  .dashboard-header { height: 64px; padding: 0 14px; }
  .dashboard-search { width: 150px; }
  .dashboard-overview { padding: 24px 14px 32px; }
  .dashboard-heading-actions { justify-content: flex-start; }
  .dashboard-select,
  .dashboard-export { min-height: 38px; padding: 6px 9px; }
  .dashboard-kpis { grid-template-columns: 1fr; }
  .dashboard-kpi { min-height: 108px; }
  .dashboard-usage-grid { grid-template-columns: 1fr; }
  .dashboard-visual-grid { grid-template-columns: 1fr; }
  .conversations-card,
  .orders-card { min-height: 245px; }
}


/* Account menu lives beside the top-right profile button. */
body.dashboard-home .dashboard-header-actions { position: relative; }
body.dashboard-home .dashboard-header-actions .user-dropdown {
  top: calc(100% + 12px);
  right: 0;
  bottom: auto;
  left: auto;
  z-index: 100;
}

/* Keep the header profile image compact and fully contained in its circle. */
body.dashboard-home .dashboard-profile-avatar {
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 50%;
  flex: 0 0 26px;
}

body.dashboard-home .dashboard-profile-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Ask AI belongs in the dashboard header and opens the existing chat panel. */
body.dashboard-home .dashboard-ai-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 7px 12px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  border: 0;
  border-radius: 16px;
  background: #050505;
  transition: transform .15s ease, background .15s ease;
}
body.dashboard-home .dashboard-ai-button:hover,
body.dashboard-home .dashboard-ai-button.active {
  background: #252525;
  transform: translateY(-1px);
}
body.dashboard-home .dashboard-ai-button svg { width: 14px; height: 14px; }

body.dashboard-home .ai-chat-sidebar {
  color: #151516;
  background: #fff;
  border-left-color: #ededed;
}
body.dashboard-home .ai-chat-header { border-bottom-color: #ededed; }
body.dashboard-home .ai-chat-new,
body.dashboard-home .ai-chat-feedback,
body.dashboard-home .ai-chat-icon-btn { color: #56575a; }
body.dashboard-home .ai-chat-new:hover,
body.dashboard-home .ai-chat-feedback:hover,
body.dashboard-home .ai-chat-icon-btn:hover { color: #111; background: #f2f2f2; }
body.dashboard-home .ai-chat-new svg,
body.dashboard-home .ai-chat-icon-btn svg { color: #8d8e91; }
body.dashboard-home .ai-chat-welcome h4,
body.dashboard-home .ai-chat-input { color: #151516; }
body.dashboard-home .ai-chat-welcome p,
body.dashboard-home .ai-chat-input::placeholder { color: #8d8e91; }
body.dashboard-home .ai-chat-quick button {
  color: #333436;
  border-color: #e1e1e1;
  background: #f7f7f7;
}
body.dashboard-home .ai-chat-quick button:hover { color: #111; border-color: #bfcfc0; background: #effaf0; }
body.dashboard-home .ai-msg-bubble { color: #333436; border-color: #e1e1e1; background: #f7f7f7; }
body.dashboard-home .ai-msg.user .ai-msg-bubble { color: #215d2a; border-color: #c8e7cc; background: #effaf0; }
body.dashboard-home .ai-chat-input-area { border-top-color: #ededed; }
body.dashboard-home .ai-chat-input-box { border-color: #dedede; background: #fafafa; }
body.dashboard-home .ai-chat-input-box:focus-within { border-color: #9dcc9f; }
body.dashboard-home .ai-chat-messages { scrollbar-color: #d6d6d6 transparent; }
body.dashboard-home .ai-chat-messages::-webkit-scrollbar-thumb { background: #d6d6d6; }
body.dashboard-home .ai-stream-cursor { background: #42bb4c; }

@media (min-width: 651px) {
  body.dashboard-home.ai-chat-open .main-area { width: calc(100vw - 76px - var(--ai-chat-width)); }
}
@media (max-width: 650px) {
  body.dashboard-home .dashboard-ai-button { min-height: 30px; padding: 6px 9px; font-size: 9px; }
  body.dashboard-home .dashboard-ai-button span { display: none; }
  body.dashboard-home.ai-chat-open .main-area { width: calc(100vw - 54px - var(--ai-chat-width)); }
}

/* Apps page: integrations are presented as ready-to-connect cards while APIs are staged. */
body.dashboard-home #tab-dashboard:not(.active) { display: none; }
body.dashboard-home #tab-apps { display: none; background: #fff; overflow-y: auto; }
body.dashboard-home #tab-apps.active { display: flex; }
body.dashboard-home #tab-apps::-webkit-scrollbar { width: 5px; }
body.dashboard-home #tab-apps::-webkit-scrollbar-thumb { background: #dedede; border-radius: 999px; }

.apps-page {
  position: relative;
  width: 100%;
  min-height: 100%;
  padding: clamp(28px, 4vw, 58px) clamp(24px, 4vw, 64px) 56px;
  color: #0a0a0b;
  background: #fff;
}
.apps-page-header { max-width: 680px; margin-bottom: 28px; }
.apps-page-header h1 {
  color: #09090a;
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 500;
  letter-spacing: -.07em;
  line-height: .96;
}
.apps-page-header h1 span { color: #c8f03e; }
.apps-page-subtitle { max-width: 520px; margin-top: 14px; color: #85868a; font-size: 13px; line-height: 1.6; }
.apps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.apps-card {
  display: flex;
  height: 240px;
  min-height: 240px;
  flex-direction: column;
  padding: 22px;
  border: 1px solid #e4e4e4;
  border-radius: 18px;
  background: #f7f7f7;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.apps-card:hover { border-color: #cfcfcf; box-shadow: 0 12px 28px rgba(0,0,0,.06); transform: translateY(-2px); }
#appsGrid.apps-layout { display: block; }
.apps-featured-section,
.apps-secondary-section { width: 100%; }
.apps-featured-section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 42px;
}
.apps-featured-section > .apps-section-heading,
.apps-secondary-section > .apps-section-heading { grid-column: 1 / -1; }
.apps-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 4px; }
.apps-section-kicker { margin: 0 0 5px; color: #9a9b9f; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.apps-section-heading h2 { color: #111112; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.05em; }
.apps-available-count,
.apps-secondary-note { color: #898a8e; font-size: 10px; font-weight: 600; }
.apps-available-count { padding: 7px 10px; color: #3d691e; border: 1px solid #d8efb2; border-radius: 999px; background: #f4fbe9; }
.apps-featured-section .apps-card-featured { min-height: 0; border-color: #e4e4e4; background: #f7f7f7; }
.apps-card-featured:hover { border-color: #b9dc7c; }
.apps-card-featured .apps-icon { width: 48px; height: 48px; border: 0; }
.apps-card-featured .apps-icon svg { width: 25px; height: 25px; }
.apps-card-featured h2 { font-size: 18px; }
.apps-secondary-section { padding-top: 2px; }
.apps-secondary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.apps-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.apps-icon { display: grid; width: 48px; height: 48px; place-items: center; color: #151516; border-radius: 15px; background: #fff; }
.apps-icon svg { width: 25px; height: 25px; }
.apps-icon.instagram { color: #c13584; }
.apps-icon.facebook { color: #1877f2; }
.apps-icon.whatsapp { color: #20b857; }
.apps-status { padding: 6px 9px; color: #8a8b8e; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; background: #ebebeb; }
.apps-status.is-available { color: #3d691e; background: #e5f6c8; }
.apps-card h2 { margin-top: 28px; color: #111112; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -.04em; }
.apps-card p { min-height: 45px; margin-top: 7px; color: #85868a; font-size: 11px; line-height: 1.55; }
.apps-connect-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding: 11px 13px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border: 0;
  border-radius: 13px;
  background: #050505;
  transition: background .15s ease, transform .15s ease;
}
.apps-connect-button:hover { background: #282828; transform: translateY(-1px); }
.apps-connect-button.is-available { color: #111112; background: #c8f03e; }
.apps-connect-button.is-available:hover { background: #d5f767; }
.apps-button-arrow { font-size: 15px; line-height: 1; }
.apps-empty-note { margin-top: 22px; color: #a1a2a5; font-size: 11px; text-align: center; }
.apps-toast {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 100;
  max-width: min(340px, calc(100vw - 40px));
  padding: 12px 16px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 13px;
  background: #050505;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
}
.apps-toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 800px) {
  .apps-grid,
  .apps-featured-section,
  .apps-secondary-grid { grid-template-columns: 1fr; }
  .apps-card { min-height: 0; }
}
@media (max-width: 520px) {
  .apps-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .apps-secondary-note { display: none; }
}
@media (max-width: 650px) {
  .apps-page { padding: 24px 14px 32px; }
  .apps-page-header h1 { font-size: 36px; }
  .apps-page-subtitle { font-size: 11px; }
}

.apps-icon.website { color: #7657f5; }
.apps-icon.discord { color: #5865f2; }

/* Bottom sidebar shortcuts for settings and the account profile. */
body.dashboard-home .sidebar-bottom {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 18px 0 0;
  border-top: 0;
}
body.dashboard-home .sidebar-bottom-button {
  display: grid;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  place-items: center;
  color: #b8b9bb;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transition: color .15s ease, background .15s ease;
}
body.dashboard-home .sidebar-bottom-button:hover {
  color: #111214;
  background: #f0f0f0;
}
body.dashboard-home .sidebar-bottom-button svg { width: 18px; height: 18px; }
body.dashboard-home .sidebar-profile-button { overflow: hidden; }
body.dashboard-home .sidebar-profile-avatar {
  display: grid;
  width: 27px;
  height: 27px;
  min-width: 27px;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  background: #e6a06c;
}
body.dashboard-home .sidebar-profile-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
@media (max-width: 650px) {
  body.dashboard-home .sidebar-bottom { gap: 8px; padding-top: 12px; }
  body.dashboard-home .sidebar-bottom-button { width: 34px; height: 34px; min-width: 34px; }
  body.dashboard-home .sidebar-bottom-button svg { width: 16px; height: 16px; }
  body.dashboard-home .sidebar-profile-avatar { width: 24px; height: 24px; min-width: 24px; }
}

/* Stable page transitions: a short fade and directional slide without filters or overlays. */
body.dashboard-home .content-area.page-transitioning {
  isolation: isolate;
  overflow: hidden;
}
body.dashboard-home .content-area.page-transitioning > .tab-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body.dashboard-home .content-area > .tab-content.page-transition-leave {
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity;
}
body.dashboard-home .content-area > .tab-content.page-transition-leave.page-transition-forward {
  animation: dashboardPageLeaveForward 240ms ease-out both;
}
body.dashboard-home .content-area > .tab-content.page-transition-leave.page-transition-backward {
  animation: dashboardPageLeaveBackward 240ms ease-out both;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter {
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter.page-transition-forward {
  animation: dashboardPageEnterForward 240ms ease-out both;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter.page-transition-backward {
  animation: dashboardPageEnterBackward 240ms ease-out both;
}
@keyframes dashboardPageLeaveForward {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(-12px, 0, 0); }
}
@keyframes dashboardPageLeaveBackward {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(12px, 0, 0); }
}
@keyframes dashboardPageEnterForward {
  from { opacity: 0; transform: translate3d(12px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes dashboardPageEnterBackward {
  from { opacity: 0; transform: translate3d(-12px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body.dashboard-home .content-area > .tab-content.page-transition-leave,
  body.dashboard-home .content-area > .tab-content.page-transition-enter {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Settings page: a calm, focused workspace preferences surface. */
body.dashboard-home #tab-settings { display: none; background: #fff; overflow-y: auto; }
body.dashboard-home #tab-settings.active { display: flex; }
body.dashboard-home #tab-settings::-webkit-scrollbar { width: 5px; }
body.dashboard-home #tab-settings::-webkit-scrollbar-thumb { background: #dedede; border-radius: 999px; }

.settings-page {
  width: 100%;
  min-height: 100%;
  padding: clamp(28px, 4vw, 58px) clamp(24px, 4vw, 64px) 56px;
  color: #0a0a0b;
  background: #fff;
}
.settings-page-header { max-width: 680px; margin-bottom: 30px; }
.settings-page-header h1 {
  color: #09090a;
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 500;
  letter-spacing: -.07em;
  line-height: .96;
}
.settings-page-header h1 span { color: #b0b1b4; }
.settings-page-subtitle { max-width: 520px; margin-top: 14px; color: #85868a; font-size: 13px; line-height: 1.6; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 10px; max-width: 1080px; }
.settings-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid #e9e9e9;
  border-radius: 22px;
  background: #f7f7f7;
}
.settings-card-wide { grid-column: 1 / -1; }
.settings-card-heading { display: flex; align-items: flex-start; gap: 12px; }
.settings-card-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; color: #fff; border-radius: 13px; background: #050505; }
.settings-card-icon svg { width: 21px; height: 21px; }
.settings-icon-soft { color: #111; background: #e5f4d3; }
.settings-icon-dark { background: #dedee0; color: #55565a; }
.settings-card h2 { color: #111112; font-family: var(--font-display); font-size: 16px; font-weight: 650; letter-spacing: -.04em; }
.settings-card-heading p { margin-top: 4px; color: #929397; font-size: 10px; line-height: 1.4; }
.settings-options { display: grid; gap: 3px; margin-top: 20px; }
.settings-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  padding: 10px 0;
  border-top: 1px solid #e7e7e7;
  cursor: pointer;
}
.settings-option > span:first-child { display: grid; gap: 4px; }
.settings-option strong { color: #303033; font-size: 11px; font-weight: 650; }
.settings-option small { color: #999a9d; font-size: 9px; line-height: 1.4; }
.settings-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.settings-switch { position: relative; width: 37px; height: 22px; flex: 0 0 37px; border-radius: 999px; background: #dedee0; transition: background .18s ease, box-shadow .18s ease; }
.settings-switch::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; content: ''; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.15); transition: transform .2s cubic-bezier(.22,1,.36,1); }
.settings-option input:checked + .settings-switch { background: #111; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.settings-option input:checked + .settings-switch::after { transform: translateX(15px); }
.settings-option:focus-within .settings-switch { outline: 2px solid #b5d95f; outline-offset: 3px; }
.settings-account-row { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 13px; border-radius: 14px; background: #fff; }
.settings-account-avatar { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; overflow: hidden; color: #fff; font-size: 11px; font-weight: 700; border-radius: 50%; background: #e6a06c; }
.settings-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.settings-account-row div { display: grid; gap: 3px; min-width: 0; }
.settings-account-row strong { overflow: hidden; color: #252527; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.settings-account-row small { overflow: hidden; color: #96979a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.settings-outline-button { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 12px; padding: 10px 12px; color: #333437; font-size: 10px; font-weight: 650; border: 1px solid #dedee0; border-radius: 11px; background: transparent; transition: color .15s ease, background .15s ease, border-color .15s ease; }
.settings-outline-button:hover { color: #111; border-color: #bdbec1; background: #fff; }
.settings-outline-button span { font-size: 14px; line-height: 1; }
.settings-save-state { max-width: 1080px; margin-top: 16px; color: #a1a2a5; font-size: 10px; transition: color .2s ease; }
.settings-save-state.is-saved { color: #4b9b55; }
body.dashboard-home.compact-dashboard .dashboard-overview { padding-top: 24px; padding-bottom: 30px; }
body.dashboard-home.motion-disabled *,
body.dashboard-home.motion-disabled *::before,
body.dashboard-home.motion-disabled *::after { animation: none !important; transition: none !important; }
body.dashboard-home .sidebar-bottom-button.nav-item.active { color: #fff; background: #050505; }

@media (max-width: 760px) {
  .settings-grid { grid-template-columns: 1fr; }
  .settings-card-wide { grid-column: auto; }
}
@media (max-width: 650px) {
  .settings-page { padding: 24px 14px 32px; }
  .settings-page-header h1 { font-size: 36px; }
  .settings-page-subtitle { font-size: 11px; }
  .settings-card { padding: 18px; border-radius: 18px; }
}


/* Dashboard mode switch — Easy is live; Workflow is staged for a future release. */
body.dashboard-home .dashboard-header {
  position: relative;
  z-index: 20;
}
body.dashboard-home .dashboard-header-left {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 14px;
}
body.dashboard-home .dashboard-tool-menu {
  position: relative;
  left: -46px;
  z-index: 5;
  width: 188px;
  flex: 0 0 auto;
}
body.dashboard-home .dashboard-tool-trigger {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 38px;
  align-items: center;
  padding: 0 10px 0 7px;
  color: #252628;
  text-align: left;
  border: 1px solid #e2e2e4;
  border-radius: 999px;
  background: #f8f8f9;
  box-shadow: inset 0 1px rgba(255, 255, 255, .95), 0 1px 2px rgba(0, 0, 0, .04);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
body.dashboard-home .dashboard-tool-trigger:hover { border-color: #ceced1; background: #fff; box-shadow: 0 3px 8px rgba(18, 19, 20, .07); }
body.dashboard-home .dashboard-tool-menu.is-open .dashboard-tool-trigger { border-color: transparent; background: transparent; box-shadow: none; }
body.dashboard-home .dashboard-tool-trigger:focus-visible { outline: 0; border-color: #a8a9ad; box-shadow: 0 0 0 3px rgba(22, 23, 24, .1); }
body.dashboard-home .dashboard-tool-current-icon { display: grid; width: 22px; height: 22px; margin-right: 8px; flex: 0 0 22px; place-items: center; color: #fff; border-radius: 50%; background: #18191a; }
body.dashboard-home .dashboard-tool-current-icon svg { width: 12px; height: 12px; }
body.dashboard-home .dashboard-tool-current-icon.is-switching svg { animation: dashboardToolIconSwap .42s cubic-bezier(.22, 1, .36, 1); }
@keyframes dashboardToolIconSwap {
  0% { opacity: .35; transform: translateY(-4px) scale(.82) rotate(-12deg); filter: blur(1px); }
  55% { opacity: 1; transform: translateY(1px) scale(1.04) rotate(3deg); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); filter: blur(0); }
}
body.dashboard-home .nav-icon,
body.dashboard-home .sidebar-bottom-button svg {
  transform-origin: center;
}
body.dashboard-home .nav-icon.is-switching svg {
  animation: sidebarIconSwap .34s cubic-bezier(.22, 1, .36, 1);
}
body.dashboard-home .sidebar-bottom-button.is-switching svg {
  animation: sidebarIconSwap .34s cubic-bezier(.22, 1, .36, 1);
}
@keyframes sidebarIconSwap {
  0% { opacity: 0; transform: translateY(3px) scale(.95); filter: blur(1px); }
  55% { opacity: 1; transform: translateY(-1px) scale(1.03); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); filter: blur(0); }
}
body.dashboard-home .dashboard-tool-current { display: block; min-width: 0; }
body.dashboard-home .dashboard-tool-current small { display: none; }
body.dashboard-home .dashboard-tool-current strong { overflow: hidden; color: #292a2c; font-family: var(--font-body); font-size: 10px; font-weight: 700; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
body.dashboard-home .dashboard-tool-chevron { width: 14px; height: 14px; margin-left: auto; color: #77787b; transition: transform .18s ease; }
body.dashboard-home .dashboard-tool-menu.is-open .dashboard-tool-chevron { transform: rotate(180deg); }
body.dashboard-home .dashboard-tool-dropdown {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  width: 100%;
  padding: 43px 4px 5px;
  border: 1px solid #dedee1;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(20, 21, 23, .13), 0 2px 6px rgba(20, 21, 23, .05);
  transform-origin: top center;
  animation: dashboardToolMenuIn .16s ease both;
}
body.dashboard-home .dashboard-tool-dropdown[hidden] { display: none; }
body.dashboard-home .dashboard-tool-menu.is-closing .dashboard-tool-dropdown {
  pointer-events: none;
  animation: dashboardToolMenuOut .18s cubic-bezier(.4, 0, .2, 1) both;
}
body.dashboard-home .dashboard-tool-menu.is-closing .dashboard-tool-chevron { transform: rotate(0); }
@keyframes dashboardToolMenuOut {
  from { opacity: 1; transform: scaleY(1); }
  to { opacity: 0; transform: scaleY(.82); }
}
body.dashboard-home .dashboard-tool-option {
  position: relative;
  display: block;
  width: 100%;
  min-height: 31px;
  padding: 8px 29px 8px 12px;
  color: #3f4043;
  text-align: left;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}
body.dashboard-home .dashboard-tool-option:hover,
body.dashboard-home .dashboard-tool-option:focus-visible { outline: 0; background: #f3f3f4; }
body.dashboard-home .dashboard-tool-option.active { color: #fff; background: #191a1b; }
body.dashboard-home .dashboard-tool-option-icon { display: none; }
body.dashboard-home .dashboard-tool-option > span:nth-child(2) { display: block; }
body.dashboard-home .dashboard-tool-option strong { color: inherit; font-family: var(--font-body); font-size: 10px; font-weight: 700; line-height: 1.2; }
body.dashboard-home .dashboard-tool-option small { display: none; }
body.dashboard-home .dashboard-tool-check { position: absolute; top: 50%; right: 11px; color: currentColor; font-size: 11px; font-weight: 800; opacity: 0; transform: translateY(-50%); }
body.dashboard-home .dashboard-tool-option.active .dashboard-tool-check { opacity: 1; }
@keyframes dashboardToolMenuIn { from { opacity: 0; transform: scaleY(.82); } to { opacity: 1; transform: scaleY(1); } }
@media (max-width: 650px) {
  body.dashboard-home .dashboard-header-left { gap: 8px; }
  body.dashboard-home .dashboard-tool-menu { left: -10px; width: 164px; }
}
body.dashboard-home .dashboard-overview[hidden] { display: none !important; }


/* Refined page opening motion — stronger depth without blur or overlay sweeps. */
body.dashboard-home .content-area > .tab-content.page-transition-leave.page-transition-forward {
  animation: dashboardPageLeaveForward 360ms cubic-bezier(.32,.08,.24,1) both;
}
body.dashboard-home .content-area > .tab-content.page-transition-leave.page-transition-backward {
  animation: dashboardPageLeaveBackward 360ms cubic-bezier(.32,.08,.24,1) both;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter.page-transition-forward {
  animation: dashboardPageEnterForward 360ms cubic-bezier(.22,1,.36,1) both;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter.page-transition-backward {
  animation: dashboardPageEnterBackward 360ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes dashboardPageLeaveForward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(-20px, -4px, 0) scale(.985); }
}
@keyframes dashboardPageLeaveBackward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(20px, -4px, 0) scale(.985); }
}
@keyframes dashboardPageEnterForward {
  from { opacity: 0; transform: translate3d(24px, 10px, 0) scale(.982); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes dashboardPageEnterBackward {
  from { opacity: 0; transform: translate3d(-24px, 10px, 0) scale(.982); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

body.dashboard-home .dashboard-page {
  position: relative;
}

/* Title reveal — lift headings from below the mask for a polished page entrance. */
body.dashboard-home .content-area > .tab-content.page-transition-enter .dashboard-heading-row h1,
body.dashboard-home .content-area > .tab-content.page-transition-enter .apps-page-header h1,
body.dashboard-home .content-area > .tab-content.page-transition-enter .settings-page-header h1 {
  animation: dashboardTitleRise 720ms cubic-bezier(.22,1,.36,1) 110ms both;
  will-change: transform, opacity;
}
@keyframes dashboardTitleRise {
  0% { opacity: 0; transform: translate3d(0, 38px, 0); }
  72% { opacity: 1; transform: translate3d(0, -3px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body.dashboard-home .content-area > .tab-content.page-transition-enter .dashboard-heading-row h1,
  body.dashboard-home .content-area > .tab-content.page-transition-enter .apps-page-header h1,
  body.dashboard-home .content-area > .tab-content.page-transition-enter .settings-page-header h1 {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}


/* Simple page motion: one clean transition plus a restrained block stagger. */
body.dashboard-home .content-area > .tab-content.page-transition-leave.page-transition-forward,
body.dashboard-home .content-area > .tab-content.page-transition-leave.page-transition-backward {
  animation: simplePageLeave 300ms cubic-bezier(.4,0,.2,1) both;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter.page-transition-forward,
body.dashboard-home .content-area > .tab-content.page-transition-enter.page-transition-backward {
  animation: simplePageEnter 300ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes simplePageLeave {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes simplePageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

body.dashboard-home .content-area > .tab-content.page-transition-enter .dashboard-overview > *,
body.dashboard-home .content-area > .tab-content.page-transition-enter .dashboard-overview > * > *,
body.dashboard-home .content-area > .tab-content.page-transition-enter .apps-page > *,
body.dashboard-home .content-area > .tab-content.page-transition-enter .apps-grid > *,
body.dashboard-home .content-area > .tab-content.page-transition-enter .settings-page > *,
body.dashboard-home .content-area > .tab-content.page-transition-enter .settings-grid > *,
body.dashboard-home .dashboard-overview-opening > *,
body.dashboard-home .dashboard-overview-opening > * > *,
body.dashboard-home .workflow-page-opening .workflow-page-content > * {
  animation: pageBlockIn 360ms cubic-bezier(.22,1,.36,1) both;
  will-change: transform, opacity;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter .dashboard-overview > :nth-child(2),
body.dashboard-home .content-area > .tab-content.page-transition-enter .dashboard-overview > * > :nth-child(2),
body.dashboard-home .content-area > .tab-content.page-transition-enter .apps-page > :nth-child(2),
body.dashboard-home .content-area > .tab-content.page-transition-enter .apps-grid > :nth-child(2),
body.dashboard-home .content-area > .tab-content.page-transition-enter .settings-page > :nth-child(2),
body.dashboard-home .content-area > .tab-content.page-transition-enter .settings-grid > :nth-child(2),
body.dashboard-home .dashboard-overview-opening > :nth-child(2),
body.dashboard-home .dashboard-overview-opening > * > :nth-child(2),
body.dashboard-home .workflow-page-opening .workflow-page-content > :nth-child(2) {
  animation-delay: 45ms;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter .dashboard-overview > :nth-child(3),
body.dashboard-home .content-area > .tab-content.page-transition-enter .dashboard-overview > * > :nth-child(3),
body.dashboard-home .content-area > .tab-content.page-transition-enter .apps-page > :nth-child(3),
body.dashboard-home .content-area > .tab-content.page-transition-enter .apps-grid > :nth-child(3),
body.dashboard-home .content-area > .tab-content.page-transition-enter .settings-page > :nth-child(3),
body.dashboard-home .content-area > .tab-content.page-transition-enter .settings-grid > :nth-child(3),
body.dashboard-home .dashboard-overview-opening > :nth-child(3),
body.dashboard-home .dashboard-overview-opening > * > :nth-child(3),
body.dashboard-home .workflow-page-opening .workflow-page-content > :nth-child(3) {
  animation-delay: 90ms;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter .dashboard-overview > :nth-child(4),
body.dashboard-home .content-area > .tab-content.page-transition-enter .dashboard-overview > * > :nth-child(4),
body.dashboard-home .content-area > .tab-content.page-transition-enter .apps-page > :nth-child(4),
body.dashboard-home .content-area > .tab-content.page-transition-enter .apps-grid > :nth-child(4),
body.dashboard-home .content-area > .tab-content.page-transition-enter .settings-page > :nth-child(4),
body.dashboard-home .content-area > .tab-content.page-transition-enter .settings-grid > :nth-child(4),
body.dashboard-home .dashboard-overview-opening > :nth-child(4),
body.dashboard-home .dashboard-overview-opening > * > :nth-child(4),
body.dashboard-home .workflow-page-opening .workflow-page-content > :nth-child(4) {
  animation-delay: 135ms;
}

@keyframes pageBlockIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* The title now follows the same simple block motion instead of a separate reveal effect. */
body.dashboard-home .content-area > .tab-content.page-transition-enter .dashboard-heading-row h1,
body.dashboard-home .content-area > .tab-content.page-transition-enter .apps-page-header h1,
body.dashboard-home .content-area > .tab-content.page-transition-enter .settings-page-header h1,
body.dashboard-home .dashboard-overview-opening .dashboard-heading-row h1,
body.dashboard-home .workflow-page-opening .workflow-page-title-reveal,
body.dashboard-home .workflow-page-opening .workflow-page-title-reveal h1 {
  animation: none !important;
  will-change: auto;
}
body.dashboard-home .workflow-page-opening .workflow-title-accent::after {
  animation: none !important;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  body.dashboard-home .content-area > .tab-content.page-transition-leave,
  body.dashboard-home .content-area > .tab-content.page-transition-enter,
  body.dashboard-home .content-area > .tab-content.page-transition-enter .dashboard-overview > *,
  body.dashboard-home .content-area > .tab-content.page-transition-enter .dashboard-overview > * > *,
  body.dashboard-home .content-area > .tab-content.page-transition-enter .apps-page > *,
  body.dashboard-home .content-area > .tab-content.page-transition-enter .apps-grid > *,
  body.dashboard-home .content-area > .tab-content.page-transition-enter .settings-page > *,
  body.dashboard-home .content-area > .tab-content.page-transition-enter .settings-grid > *,
  body.dashboard-home .dashboard-overview-opening > *,
  body.dashboard-home .dashboard-overview-opening > * > *,
  body.dashboard-home .workflow-page-opening .workflow-page-content > * {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}


/* Final tab switch motion: one calm, consistent transition with no inner stagger. */
body.dashboard-home .content-area > .tab-content.page-transition-leave.page-transition-forward,
body.dashboard-home .content-area > .tab-content.page-transition-leave.page-transition-backward {
  animation: finalTabLeave 280ms cubic-bezier(.4, 0, .2, 1) both !important;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter.page-transition-forward,
body.dashboard-home .content-area > .tab-content.page-transition-enter.page-transition-backward {
  animation: finalTabEnter 280ms cubic-bezier(.22, 1, .36, 1) both !important;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter * {
  animation: none !important;
}
@keyframes finalTabLeave {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, -7px, 0); }
}
@keyframes finalTabEnter {
  from { opacity: 0; transform: translate3d(0, 9px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body.dashboard-home .content-area > .tab-content.page-transition-leave,
  body.dashboard-home .content-area > .tab-content.page-transition-enter {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}


/* Premium directional tab transition — strong depth, restrained motion, no blur. */
body.dashboard-home .content-area {
  perspective: 1200px;
}
body.dashboard-home .content-area.page-transitioning {
  isolation: isolate;
  overflow: hidden;
}
body.dashboard-home .content-area > .tab-content.page-transition-leave,
body.dashboard-home .content-area > .tab-content.page-transition-enter {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
body.dashboard-home .content-area > .tab-content.page-transition-leave.page-transition-forward {
  animation: premiumTabExitForward 420ms cubic-bezier(.4, 0, .2, 1) both !important;
}
body.dashboard-home .content-area > .tab-content.page-transition-leave.page-transition-backward {
  animation: premiumTabExitBackward 420ms cubic-bezier(.4, 0, .2, 1) both !important;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter.page-transition-forward {
  animation: premiumTabEnterForward 420ms cubic-bezier(.16, 1, .3, 1) both !important;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter.page-transition-backward {
  animation: premiumTabEnterBackward 420ms cubic-bezier(.16, 1, .3, 1) both !important;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter * {
  animation: none !important;
}
body.dashboard-home .content-area.page-transitioning::after {
  position: absolute;
  top: 12%;
  bottom: 12%;
  z-index: 8;
  width: 2px;
  content: '';
  pointer-events: none;
  opacity: 0;
  border-radius: 999px;
  background: #c8f03e;
  box-shadow: 0 0 18px rgba(200,240,62,.65);
}
body.dashboard-home .content-area.page-transitioning.page-transition-forward::after {
  left: 0;
  animation: premiumAccentForward 420ms cubic-bezier(.22, 1, .36, 1) both;
}
body.dashboard-home .content-area.page-transitioning.page-transition-backward::after {
  right: 0;
  animation: premiumAccentBackward 420ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes premiumTabExitForward {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  55% { opacity: .72; transform: translate3d(-12px, -2px, 0) scale(.992); }
  100% { opacity: 0; transform: translate3d(-28px, -5px, 0) scale(.975); }
}
@keyframes premiumTabExitBackward {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  55% { opacity: .72; transform: translate3d(12px, -2px, 0) scale(.992); }
  100% { opacity: 0; transform: translate3d(28px, -5px, 0) scale(.975); }
}
@keyframes premiumTabEnterForward {
  0% { opacity: 0; transform: translate3d(34px, 12px, 0) scale(.975); }
  62% { opacity: 1; transform: translate3d(-2px, 0, 0) scale(1.004); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes premiumTabEnterBackward {
  0% { opacity: 0; transform: translate3d(-34px, 12px, 0) scale(.975); }
  62% { opacity: 1; transform: translate3d(2px, 0, 0) scale(1.004); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes premiumAccentForward {
  0% { opacity: 0; transform: translateX(-8px) scaleY(.5); }
  22% { opacity: .85; }
  100% { opacity: 0; transform: translateX(calc(100vw - 4px)) scaleY(1); }
}
@keyframes premiumAccentBackward {
  0% { opacity: 0; transform: translateX(8px) scaleY(.5); }
  22% { opacity: .85; }
  100% { opacity: 0; transform: translateX(calc(-100vw + 4px)) scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  body.dashboard-home .content-area.page-transitioning::after,
  body.dashboard-home .content-area > .tab-content.page-transition-leave,
  body.dashboard-home .content-area > .tab-content.page-transition-enter {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}


/* Final gentle tab transition: fade and a tiny vertical lift only. */
body.dashboard-home .content-area {
  perspective: none !important;
}
body.dashboard-home .content-area.page-transitioning::after {
  display: none !important;
}
body.dashboard-home .content-area > .tab-content.page-transition-leave.page-transition-forward,
body.dashboard-home .content-area > .tab-content.page-transition-leave.page-transition-backward {
  animation: gentleTabLeave 300ms ease-out both !important;
  transform: none;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter.page-transition-forward,
body.dashboard-home .content-area > .tab-content.page-transition-enter.page-transition-backward {
  animation: gentleTabEnter 300ms ease-out both !important;
  transform: none;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter * {
  animation: none !important;
}
@keyframes gentleTabLeave {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes gentleTabEnter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.dashboard-home .content-area > .tab-content.page-transition-leave,
  body.dashboard-home .content-area > .tab-content.page-transition-enter {
    animation: none !important;
    opacity: 1;
    transform: none !important;
  }
}


/* Final clean crossfade: no scale, perspective, accent, or nested animations. */
body.dashboard-home .content-area {
  perspective: none !important;
}
body.dashboard-home .content-area.page-transitioning::after {
  display: none !important;
}
body.dashboard-home .content-area > .tab-content.page-transition-leave,
body.dashboard-home .content-area > .tab-content.page-transition-enter {
  animation: none !important;
  backface-visibility: visible;
  transform-style: flat;
  will-change: opacity, transform;
  transition: opacity 280ms ease, transform 280ms ease !important;
}
body.dashboard-home .content-area > .tab-content.page-transition-leave {
  z-index: 1;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
body.dashboard-home .content-area > .tab-content.page-transition-leave.page-transition-forward.page-transition-leave-active {
  opacity: 0;
  transform: translate3d(-3px, -2px, 0);
}
body.dashboard-home .content-area > .tab-content.page-transition-leave.page-transition-backward.page-transition-leave-active {
  opacity: 0;
  transform: translate3d(3px, -2px, 0);
}
body.dashboard-home .content-area > .tab-content.page-transition-enter {
  z-index: 2;
  opacity: 0;
  transform: translate3d(3px, 4px, 0);
}
body.dashboard-home .content-area > .tab-content.page-transition-enter.page-transition-backward {
  transform: translate3d(-3px, 4px, 0);
}
body.dashboard-home .content-area > .tab-content.page-transition-enter.page-transition-enter-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
body.dashboard-home .content-area > .tab-content.page-transition-enter * {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body.dashboard-home .content-area > .tab-content.page-transition-leave,
  body.dashboard-home .content-area > .tab-content.page-transition-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



/* Chart layout matching the reference dashboard: compact cards, rounded bars, balanced heatmap. */
body.dashboard-home .dashboard-visual-grid {
  grid-template-columns: minmax(0, 1.65fr) minmax(220px, 1fr);
  gap: 8px;
}
body.dashboard-home .funnel-card,
body.dashboard-home .orders-card {
  min-height: clamp(190px, 27vh, 240px);
  padding: 14px;
  border-radius: 20px;
}
body.dashboard-home .funnel-chart {
  height: clamp(132px, 20vh, 182px);
  margin: 12px 0 0;
  gap: 8px;
  padding-top: 18px;
}
body.dashboard-home .funnel-column {
  gap: 6px;
}
body.dashboard-home .funnel-bar {
  width: min(100%, 48px);
  min-height: 16px;
  border-radius: 12px 12px 9px 9px;
  background: #dedfe0;
}
body.dashboard-home .funnel-bar.is-active {
  background: #52df5d;
}
body.dashboard-home .funnel-value {
  min-width: 42px;
  padding: 5px 7px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 999px;
}
body.dashboard-home .funnel-label {
  font-size: 9px;
}
body.dashboard-home .funnel-label.is-active {
  color: #4fc55a;
}
body.dashboard-home .orders-heatmap {
  gap: 8px;
  margin-top: 20px;
}
body.dashboard-home .heatmap-row {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
}
body.dashboard-home .heatmap-label {
  font-size: 9px;
}
body.dashboard-home .heatmap-cells {
  gap: 4px;
}
body.dashboard-home .heatmap-cell {
  height: clamp(27px, 4vh, 38px);
  border-radius: 10px;
}
@media (max-width: 900px) {
  body.dashboard-home .funnel-card,
  body.dashboard-home .orders-card {
    min-height: 220px;
  }
}
@media (max-width: 650px) {
  body.dashboard-home .dashboard-visual-grid {
    gap: 8px;
  }
  body.dashboard-home .funnel-card,
  body.dashboard-home .orders-card {
    min-height: 220px;
  }
  body.dashboard-home .funnel-chart {
    height: 145px;
  }
}


/* Period controls: compact, accessible dropdowns for dashboard cards. */
.dashboard-card-tools { position: relative; z-index: 5; }
.dashboard-period {
  position: relative;
  cursor: pointer;
  border: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.dashboard-period:hover,
.dashboard-period:focus-visible,
.dashboard-card-tools.is-period-open .dashboard-period {
  color: #343538;
  border-color: #e6e6e6;
  outline: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}
.dashboard-period svg {
  flex: 0 0 auto;
  transition: transform .16s ease;
}
.dashboard-card-tools.is-period-open .dashboard-period svg { transform: rotate(180deg); }
.dashboard-period-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 132px;
  gap: 2px;
  padding: 6px;
  border: 1px solid #ececed;
  border-radius: 13px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .04);
  transform-origin: top right;
  animation: periodMenuIn .16s ease-out both;
}
.dashboard-period-menu[hidden] { display: none; }
.dashboard-period-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 29px;
  gap: 14px;
  padding: 6px 8px;
  color: #77787b;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  text-align: left;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: color .14s ease, background .14s ease;
}
.dashboard-period-option:hover,
.dashboard-period-option:focus-visible {
  color: #171718;
  outline: 0;
  background: #f3f7f3;
}
.dashboard-period-option[aria-checked="true"] {
  color: #1b7d36;
  font-weight: 700;
  background: #eff9f0;
}
.dashboard-period-check {
  color: #45b953;
  font-size: 10px;
  line-height: 1;
  opacity: 0;
}
.dashboard-period-option[aria-checked="true"] .dashboard-period-check { opacity: 1; }

@keyframes periodMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 650px) {
  .dashboard-period-menu { min-width: 124px; }
  .dashboard-period-option { min-height: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-period,
  .dashboard-period svg,
  .dashboard-period-option { transition: none; }
  .dashboard-period-menu { animation: none; }
}


/* Header filters: polished dropdown menus for the date range and funnel selector. */
.dashboard-filter-control {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}
.dashboard-filter-control > .dashboard-select {
  position: relative;
  cursor: pointer;
  border: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.dashboard-filter-control > .dashboard-select:hover,
.dashboard-filter-control > .dashboard-select:focus-visible,
.dashboard-filter-control.is-filter-open > .dashboard-select {
  color: #111214;
  border-color: #e4e4e5;
  outline: 0;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .07);
}
.dashboard-filter-control > .dashboard-select .dashboard-chevron {
  transition: transform .16s ease;
}
.dashboard-filter-control.is-filter-open > .dashboard-select .dashboard-chevron {
  transform: rotate(180deg);
}
.dashboard-filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  display: grid;
  min-width: 100%;
  gap: 2px;
  padding: 6px;
  border: 1px solid #e9e9ea;
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .13), 0 2px 7px rgba(0, 0, 0, .04);
  transform-origin: top left;
  animation: dashboardFilterMenuIn .16s ease-out both;
}
#dashboard-filter-menu-date { min-width: 184px; }
#dashboard-filter-menu-funnel { min-width: 156px; }
.dashboard-filter-menu[hidden] { display: none; }
.dashboard-filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 30px;
  gap: 16px;
  padding: 6px 9px;
  color: #77787b;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  text-align: left;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  transition: color .14s ease, background .14s ease;
}
.dashboard-filter-option:hover,
.dashboard-filter-option:focus-visible {
  color: #151617;
  outline: 0;
  background: #f3f7f3;
}
.dashboard-filter-option[aria-checked="true"] {
  color: #1b7d36;
  font-weight: 700;
  background: #eff9f0;
}
.dashboard-filter-check {
  color: #45b953;
  font-size: 10px;
  line-height: 1;
  opacity: 0;
}
.dashboard-filter-option[aria-checked="true"] .dashboard-filter-check { opacity: 1; }

@keyframes dashboardFilterMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 650px) {
  .dashboard-filter-control { flex: 1 1 auto; }
  .dashboard-filter-control > .dashboard-select { width: 100%; }
  #dashboard-filter-menu-date,
  #dashboard-filter-menu-funnel { min-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-filter-control > .dashboard-select,
  .dashboard-filter-control > .dashboard-select .dashboard-chevron,
  .dashboard-filter-option { transition: none; }
  .dashboard-filter-menu { animation: none; }
}


/* Keep the header dropdowns above KPI cards and chart surfaces. */
body.dashboard-home .dashboard-overview {
  position: relative;
  z-index: 10;
  overflow: visible;
}
body.dashboard-home .dashboard-heading-row {
  position: relative;
  z-index: 20;
  overflow: visible;
}
body.dashboard-home .dashboard-heading-actions {
  position: relative;
  z-index: 30;
  overflow: visible;
}
body.dashboard-home .dashboard-filter-control {
  z-index: 40;
}
body.dashboard-home .dashboard-filter-control.is-filter-open {
  z-index: 1000;
}
body.dashboard-home .dashboard-filter-menu {
  z-index: 1001;
}


/* Chats page: a focused inbox and conversation workspace. */
body.dashboard-home #tab-chats {
  display: none;
  overflow-y: auto;
  background: #fff;
}
body.dashboard-home #tab-chats.active { display: flex; }
body.dashboard-home #tab-chats::-webkit-scrollbar { width: 5px; }
body.dashboard-home #tab-chats::-webkit-scrollbar-thumb { background: #dedede; border-radius: 999px; }

.chats-page {
  width: 100%;
  min-height: 100%;
  padding: clamp(28px, 4vw, 58px) clamp(24px, 4vw, 64px) 56px;
  color: #0a0a0b;
  background: #fff;
}
.chats-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  max-width: 1180px;
  margin-bottom: 28px;
}
.chats-page-header h1 {
  color: #09090a;
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 500;
  letter-spacing: -.07em;
  line-height: .96;
}
.chats-page-header h1 span { color: #c8f03e; }
.chats-page-subtitle { max-width: 510px; margin-top: 14px; color: #85868a; font-size: 13px; line-height: 1.6; }
.chats-new-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 14px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .01em;
  border: 0;
  border-radius: 13px;
  background: #050505;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.chats-new-button:hover { background: #252525; transform: translateY(-1px); }
.chats-new-button span { font-size: 17px; font-weight: 400; line-height: .6; }
.chats-workspace {
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
  width: 100%;
  max-width: 1180px;
  min-height: min(610px, calc(100vh - 250px));
  overflow: hidden;
  border: 1px solid #e8e8e9;
  border-radius: 22px;
  background: #fafafa;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .045);
}
.chats-inbox {
  min-width: 0;
  padding: 20px 14px;
  border-right: 1px solid #e8e8e9;
  background: #f7f7f7;
}
.chats-inbox-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 0 8px; }
.chats-section-kicker { color: #a1a2a5; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.chats-inbox-heading h2 { margin-top: 3px; color: #151516; font-family: var(--font-display); font-size: 23px; font-weight: 600; letter-spacing: -.06em; }
.chats-unread-count { padding: 5px 8px; color: #30813f; font-size: 8px; font-weight: 700; border-radius: 999px; background: #e4f5e5; }
.chats-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  margin: 18px 0 12px;
  padding: 0 10px;
  color: #a0a1a4;
  border: 1px solid #e5e5e6;
  border-radius: 11px;
  background: #fff;
}
.chats-search:focus-within { border-color: #b8d99a; box-shadow: 0 0 0 3px rgba(184, 217, 154, .2); }
.chats-search svg { width: 14px; height: 14px; flex: 0 0 auto; }
.chats-search input { width: 100%; padding: 0; color: #292a2c; font-size: 9px; border: 0; outline: 0; background: transparent; }
.chats-search input::placeholder { color: #a7a8ab; }
.chat-list { display: grid; gap: 3px; }
.chat-list-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 67px;
  padding: 9px 8px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.chat-list-item:hover { border-color: #e5e5e5; background: #fff; transform: translateX(2px); }
.chat-list-item.active { border-color: #e1e9dc; background: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, .04); }
.chat-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  color: #111;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid #d9d9d9;
  border-radius: 50%;
  background: #fff;
}
.chat-list-copy { display: grid; min-width: 0; gap: 4px; }
.chat-list-copy strong { overflow: hidden; color: #252527; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.chat-list-copy small { overflow: hidden; color: #999a9d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.chat-list-meta { display: grid; justify-items: end; align-self: stretch; gap: 6px; color: #a0a1a4; font-size: 7px; white-space: nowrap; }
.chat-list-meta b { display: grid; min-width: 16px; height: 16px; place-items: center; color: #fff; font-size: 7px; border-radius: 50%; background: #54c65e; }
.chats-empty-state { padding: 20px 8px; color: #999a9d; font-size: 9px; text-align: center; }
.chat-thread { display: flex; min-width: 0; flex-direction: column; background: #fff; }
.chat-thread-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 78px; padding: 16px 22px; border-bottom: 1px solid #ededed; }
.chat-contact { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-contact .chat-avatar { width: 40px; height: 40px; font-size: 11px; }
.chat-contact h2 { overflow: hidden; color: #171718; font-family: var(--font-display); font-size: 15px; font-weight: 650; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.chat-contact p { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: #929397; font-size: 9px; }
.chat-online-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #54c65e; }
.chat-thread-actions { display: flex; gap: 5px; }
.chat-thread-icon { width: 30px; height: 30px; color: #8f9093; font-size: 13px; letter-spacing: 1px; border: 0; border-radius: 9px; background: #f5f5f5; cursor: pointer; }
.chat-thread-icon:hover { color: #161718; background: #ececed; }
.chat-messages { display: flex; flex: 1; min-height: 300px; flex-direction: column; gap: 13px; padding: 24px; overflow-y: auto; background: linear-gradient(180deg, #fff 0%, #fcfcfc 100%); }
.chat-message-row { display: flex; max-width: min(74%, 450px); }
.chat-message-row.incoming { align-self: flex-start; }
.chat-message-row.outgoing { align-self: flex-end; }
.chat-message-bubble { padding: 10px 12px 8px; border: 1px solid #ececed; border-radius: 14px 14px 14px 4px; background: #f5f5f5; }
.chat-message-row.outgoing .chat-message-bubble { border-color: #d9efc8; border-radius: 14px 14px 4px 14px; background: #eaf8df; }
.chat-message-bubble p { color: #404145; font-size: 10px; line-height: 1.5; }
.chat-message-bubble time { display: block; margin-top: 6px; color: #a0a1a4; font-size: 7px; text-align: right; }
.chat-composer { display: flex; align-items: center; gap: 8px; margin: 0 18px 18px; padding: 6px 7px 6px 13px; border: 1px solid #e2e2e3; border-radius: 14px; background: #fafafa; }
.chat-composer:focus-within { border-color: #b8d99a; box-shadow: 0 0 0 3px rgba(184, 217, 154, .2); }
.chat-composer input { width: 100%; min-width: 0; padding: 6px 0; color: #262729; font-size: 10px; border: 0; outline: 0; background: transparent; }
.chat-composer input::placeholder { color: #a1a2a5; }
.chat-composer button { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; color: #fff; border: 0; border-radius: 10px; background: #050505; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.chat-composer button:hover { background: #252525; transform: translateY(-1px); }
.chat-composer button svg { width: 14px; height: 14px; }

@media (max-width: 850px) {
  .chats-workspace { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
  .chat-message-row { max-width: 84%; }
}
@media (max-width: 650px) {
  .chats-page { padding: 24px 14px 32px; }
  .chats-page-header { align-items: flex-start; flex-direction: column; }
  .chats-page-header h1 { font-size: 38px; }
  .chats-page-subtitle { font-size: 11px; }
  .chats-new-button { align-self: stretch; justify-content: center; }
  .chats-workspace { grid-template-columns: 1fr; min-height: auto; overflow: visible; }
  .chats-inbox { border-right: 0; border-bottom: 1px solid #e8e8e9; }
  .chat-thread { min-height: 520px; }
  .chat-messages { min-height: 330px; padding: 18px 14px; }
  .chat-thread-header { padding-inline: 16px; }
  .chat-composer { margin-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .chats-new-button,
  .chat-list-item,
  .chat-composer button { transition: none; }
}


/* Coming-soon states for unreleased dashboard workspaces. */
body.dashboard-home .dashboard-header-left {
  position: relative;
  z-index: 50;
}
body.dashboard-home .workflow-coming-soon {
  z-index: 80;
  pointer-events: none;
}
body.dashboard-home .workflow-coming-soon.is-visible { pointer-events: auto; }
body.dashboard-home .chats-workspace[hidden] { display: none !important; }
body.dashboard-home #tab-chats .chats-page {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
.chats-coming-soon {
  display: flex;
  flex: 1;
  min-height: clamp(430px, 65vh, 680px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}
.chats-coming-soon-icon {
  display: grid;
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  place-items: center;
  color: #171718;
  border: 1px solid #e5e5e5;
  border-radius: 22px;
  background: #f6f6f6;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .05);
}
.chats-coming-soon-icon svg { width: 32px; height: 32px; }
.chats-coming-soon h1 {
  margin-top: 8px;
  color: #09090a;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -.07em;
  line-height: .96;
}
.chats-coming-soon h1 span { color: #c8f03e; }
.chats-coming-soon p { max-width: 390px; margin-top: 14px; color: #85868a; font-size: 12px; line-height: 1.6; }
.chats-coming-soon-badge {
  margin-top: 22px;
  padding: 8px 12px;
  color: #63822a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid #dcecc6;
  border-radius: 999px;
  background: #f2f9e9;
}
@media (max-width: 650px) {
  .chats-coming-soon { min-height: 430px; padding-inline: 10px; }
  .chats-coming-soon h1 { font-size: 38px; }
  .chats-coming-soon p { font-size: 11px; }
}


/* Final animation contract: one restrained fade/slide, with all legacy motion neutralized. */
body.dashboard-home .content-area {
  perspective: none !important;
}
body.dashboard-home .content-area.page-transitioning {
  isolation: isolate;
  overflow: hidden;
}
body.dashboard-home .content-area.page-transitioning::before,
body.dashboard-home .content-area.page-transitioning::after {
  display: none !important;
  content: none !important;
}
body.dashboard-home .content-area > .tab-content.page-transition-leave,
body.dashboard-home .content-area > .tab-content.page-transition-enter {
  animation: none !important;
  backface-visibility: visible !important;
  transform-style: flat !important;
  will-change: opacity, transform;
  transition: opacity 260ms cubic-bezier(.4, 0, .2, 1), transform 260ms cubic-bezier(.4, 0, .2, 1) !important;
}
body.dashboard-home .content-area > .tab-content.page-transition-leave {
  z-index: 1;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}
body.dashboard-home .content-area > .tab-content.page-transition-leave.page-transition-leave-active {
  opacity: 0 !important;
  transform: translate3d(0, -3px, 0) !important;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter {
  z-index: 2;
  opacity: 0 !important;
  transform: translate3d(0, 4px, 0) !important;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter.page-transition-enter-active {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}
body.dashboard-home .content-area > .tab-content.page-transition-enter * {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body.dashboard-home .content-area > .tab-content.page-transition-leave,
  body.dashboard-home .content-area > .tab-content.page-transition-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* Additional integrations. */
.apps-icon.shopify { color: #95bf47; }
.apps-icon.woocommerce { color: #96588a; }
.apps-icon.tiktok { color: #111214; }
.apps-icon.analytics { color: #f29b38; }
.apps-icon.stripe { color: #635bff; }


/* Brand logo sizing for real integration marks loaded from Simple Icons. */
.apps-icon .apps-brand-icon {
  display: block;
  width: 25px;
  height: 25px;
}


/* Agents page: a focused control center for AI teammates. */
body.dashboard-home #tab-agents {
  display: none;
  overflow-y: auto;
  background: #fff;
}
body.dashboard-home #tab-agents.active { display: flex; }
body.dashboard-home #tab-agents::-webkit-scrollbar { width: 5px; }
body.dashboard-home #tab-agents::-webkit-scrollbar-thumb { background: #dedede; border-radius: 999px; }

.agents-page {
  width: 100%;
  min-height: 100%;
  padding: clamp(28px, 4vw, 58px) clamp(24px, 4vw, 64px) 56px;
  color: #0a0a0b;
  background: #fff;
}
.agents-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  max-width: 1180px;
  margin-bottom: 28px;
}
.agents-page-header h1 {
  color: #09090a;
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 500;
  letter-spacing: -.07em;
  line-height: .96;
}
.agents-page-header h1 span { color: #c8f03e; }
.agents-page-subtitle { max-width: 520px; margin-top: 14px; color: #85868a; font-size: 13px; line-height: 1.6; }
.agents-new-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 14px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border: 0;
  border-radius: 13px;
  background: #050505;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.agents-new-button:hover { background: #252525; transform: translateY(-1px); }
.agents-new-button span { font-size: 17px; font-weight: 400; line-height: .6; }
.agents-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1180px;
  margin-bottom: 14px;
}
.agents-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(300px, 100%);
  height: 36px;
  padding: 0 11px;
  color: #9a9b9e;
  border: 1px solid #e5e5e6;
  border-radius: 11px;
  background: #fafafa;
}
.agents-search:focus-within { border-color: #b8d99a; box-shadow: 0 0 0 3px rgba(184, 217, 154, .2); }
.agents-search svg { width: 14px; height: 14px; flex: 0 0 auto; }
.agents-search input { width: 100%; color: #252628; font-size: 9px; border: 0; outline: 0; background: transparent; }
.agents-search input::placeholder { color: #a7a8ab; }
.agents-filter {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 10px;
  color: #8d8e91;
  font-size: 9px;
  border: 1px solid #e5e5e6;
  border-radius: 11px;
  background: #fafafa;
}
.agents-filter select { color: #303134; font-size: 9px; font-weight: 600; border: 0; outline: 0; background: transparent; cursor: pointer; }
.agents-total { margin-left: auto; color: #9a9b9e; font-size: 9px; }
.agents-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 1180px; }
.agent-card {
  display: flex;
  min-height: 235px;
  flex-direction: column;
  padding: 20px;
  border: 1px solid #e9e9e9;
  border-radius: 21px;
  background: #f7f7f7;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.agent-card:hover { border-color: #d5d5d6; box-shadow: 0 13px 28px rgba(0, 0, 0, .06); transform: translateY(-2px); }
.agent-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.agent-avatar { display: grid; width: 48px; height: 48px; place-items: center; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em; border-radius: 15px; background: #111; }
.agent-avatar.lime { color: #111; background: #c8f03e; }
.agent-avatar.blue { background: #4e8eea; }
.agent-avatar.violet { background: #8273d5; }
.agent-avatar.orange { background: #e59a58; }
.agent-status { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; color: #77787b; font-size: 8px; font-weight: 700; border-radius: 999px; background: #eaeaec; }
.agent-status i { width: 6px; height: 6px; border-radius: 50%; background: #9b9ca0; }
.agent-status.active { color: #347d40; background: #e4f5e5; }
.agent-status.active i { background: #52c65d; }
.agent-card-copy { margin-top: 22px; }
.agent-type { color: #a0a1a4; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.agent-card-copy h2 { margin-top: 6px; color: #151516; font-family: var(--font-display); font-size: 18px; font-weight: 650; letter-spacing: -.05em; }
.agent-card-copy > p:last-child { min-height: 42px; margin-top: 8px; color: #85868a; font-size: 10px; line-height: 1.55; }
.agent-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 18px; border-top: 1px solid #e7e7e7; }
.agent-last-active { color: #a0a1a4; font-size: 8px; }
.agent-open-button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; color: #303134; font-size: 9px; font-weight: 700; border: 0; border-radius: 9px; background: #fff; cursor: pointer; transition: background .15s ease, color .15s ease; }
.agent-open-button:hover { color: #111; background: #eaf7df; }
.agent-open-button span { font-size: 12px; line-height: 1; }
.agents-empty { max-width: 1180px; padding: 40px; color: #96979a; font-size: 11px; text-align: center; }
.agents-empty[hidden] { display: none; }
.agents-toast { position: fixed; right: 28px; bottom: 28px; z-index: 100; max-width: min(340px, calc(100vw - 40px)); padding: 12px 16px; color: #fff; font-size: 11px; font-weight: 600; border-radius: 13px; background: #050505; box-shadow: 0 12px 28px rgba(0,0,0,.16); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease; }
.agents-toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .agents-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .agents-page { padding: 24px 14px 32px; }
  .agents-page-header { align-items: flex-start; flex-direction: column; }
  .agents-page-header h1 { font-size: 38px; }
  .agents-page-subtitle { font-size: 11px; }
  .agents-new-button { align-self: stretch; justify-content: center; }
  .agents-toolbar { align-items: stretch; flex-wrap: wrap; }
  .agents-search { width: 100%; }
  .agents-total { align-self: center; }
  .agents-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .agents-new-button,
  .agent-card,
  .agent-open-button,
  .agents-toast { transition: none; }
}

.dashboard-kpi > strong {
  overflow: hidden;
  transition: opacity .28s ease;
}

.dashboard-counter-viewport {
  display: block;
  height: 1.12em;
  overflow: hidden;
  contain: layout paint;
}

.dashboard-counter-value {
  display: block;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.045em;
  backface-visibility: hidden;
  will-change: transform;
}

.dashboard-counter-value.is-rolling {
  animation: dashboardCounterRollDown 2000ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes dashboardCounterRollDown {
  0% {
    opacity: .72;
    filter: blur(2px);
    transform: translate3d(0, -14px, 0);
  }
  35% {
    opacity: .9;
    filter: blur(1.1px);
    transform: translate3d(0, -6px, 0);
  }
  72% {
    opacity: .98;
    filter: blur(.35px);
    transform: translate3d(0, -1px, 0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

.dashboard-kpi > strong.is-counter-running {
  opacity: .96;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-kpi > strong,
  .dashboard-counter-value {
    transition: none;
    animation: none !important;
  }
}

/* Odometer KPI: each numeric character rolls in its own vertical window. */
.dashboard-kpi > strong.dashboard-counter {
  overflow: visible;
}

.dashboard-counter-viewport {
  display: block;
  height: 1.12em;
  overflow: hidden;
  contain: layout paint;
}

.dashboard-counter-value {
  display: inline-flex;
  align-items: baseline;
  height: 1.12em;
  white-space: nowrap;
  transform: none !important;
  animation: none !important;
}

.dashboard-counter-static {
  display: inline-block;
  height: 1em;
  line-height: 1;
}

.dashboard-counter-digit-window {
  display: inline-block;
  width: .62em;
  height: 1em;
  overflow: hidden;
  vertical-align: bottom;
}

.dashboard-counter-digit-track {
  display: flex;
  flex-direction: column;
  height: 10em;
  line-height: 1;
  filter: blur(1.8px);
  transition: transform 1000ms cubic-bezier(.22, 1, .36, 1), filter 300ms ease;
  will-change: transform, filter;
}

.dashboard-counter-digit-track.is-digit-settling {
  filter: blur(0);
}

.dashboard-counter-digit {
  display: block;
  height: 1em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-counter-digit-track {
    filter: none;
    transition: none;
  }
}


/* Page navigation — overlapping crossfade with directional movement. */
.content-area.page-transitioning {
  isolation: isolate;
}

.content-area.page-transitioning > .tab-content.active {
  position: absolute;
  inset: 0;
  width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}

.content-area.page-transitioning > .page-transition-enter {
  z-index: 2;
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(32px, 0, 0) scale(.985);
  transition: transform 460ms cubic-bezier(.22, 1, .36, 1), opacity 360ms ease-out, filter 360ms ease-out;
}

.content-area.page-transitioning > .page-transition-leave {
  z-index: 1;
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
  transition: transform 400ms cubic-bezier(.4, 0, .2, 1), opacity 300ms ease-in, filter 300ms ease-in;
}

.content-area.page-transitioning > .page-transition-enter.page-transition-backward {
  transform: translate3d(-32px, 0, 0) scale(.985);
}

.content-area.page-transitioning > .page-transition-leave.page-transition-forward.page-transition-leave-active {
  opacity: 0;
  filter: blur(3px);
  transform: translate3d(-18px, 0, 0) scale(.992);
}

.content-area.page-transitioning > .page-transition-leave.page-transition-backward.page-transition-leave-active {
  opacity: 0;
  filter: blur(3px);
  transform: translate3d(18px, 0, 0) scale(.992);
}

.content-area.page-transitioning > .page-transition-enter.page-transition-enter-active {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .content-area.page-transitioning > .tab-content.active {
    transition: none !important;
    filter: none !important;
    transform: none !important;
  }
}


/* Keep the dashboard surface out of the layout while another workspace tab is active.
   It remains active only during the deliberate overlapping page transition above. */
body.dashboard-home #tab-dashboard:not(.active) {
  display: none;
}


/* Account dropdown: plan summary and workspace accent selector. */
:root { --dashboard-accent: #c8f03e; }
body.dashboard-home .dashboard-header-actions .user-dropdown {
  display: none;
  width: 248px;
  padding: 10px;
  color: #171719;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .14);
}
body.dashboard-home .dashboard-header-actions .user-dropdown.show { display: block; }
.user-menu-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 2px 11px;
  border-bottom: 1px solid #ededed;
}
.user-menu-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  color: #111;
  font-size: 12px;
  font-weight: 800;
  border-radius: 10px;
  background: linear-gradient(145deg, #dfff6f, #a9d42c);
}
.user-menu-header-copy { min-width: 0; flex: 1; }
.user-menu-header-copy strong,
.user-menu-header-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-header-copy strong { color: #202124; font-size: 11px; font-weight: 800; }
.user-menu-header-copy small { margin-top: 2px; color: #999b9f; font-size: 9px; }
.user-menu-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  color: #5f7610;
  font-size: 8px;
  font-weight: 800;
  border-radius: 999px;
  background: #f1f8d7;
}
.user-menu-live i { width: 5px; height: 5px; border-radius: 50%; background: #8aaa1c; box-shadow: 0 0 0 2px rgba(138, 170, 28, .15); }
.user-menu-plan {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 5px;
}
.user-menu-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #5f6064;
  border-radius: 9px;
  background: #f2f2f2;
}
.user-menu-icon svg { width: 15px; height: 15px; }
.user-menu-plan small {
  display: block;
  margin-bottom: 2px;
  color: #97989b;
  font-size: 9px;
}
.user-menu-plan strong { display: block; font-size: 11px; font-weight: 700; }
.user-plan-button {
  padding: 5px 7px;
  color: #1b1c1e;
  font-size: 9px;
  font-weight: 700;
  border: 0;
  border-radius: 8px;
  background: #efefef;
}
.user-plan-button:hover { background: #e3e3e3; }
.user-menu-balance {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-top: 2px;
  padding: 7px 5px;
  border-radius: 10px;
  background: #f7fae9;
}
.user-menu-balance-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #718b16;
  font-size: 13px;
  font-weight: 800;
  border-radius: 9px;
  background: #eaf4bd;
}
.user-menu-balance small {
  display: block;
  margin-bottom: 2px;
  color: #89915d;
  font-size: 9px;
}
.user-menu-balance strong {
  display: block;
  color: #5f7610;
  font-size: 12px;
  font-weight: 800;
}
.user-menu-balance-label {
  align-self: center;
  padding: 4px 6px;
  color: #718b16;
  font-size: 8px;
  font-weight: 800;
  border: 1px solid #dfeab0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
}
.user-menu-usage {
  margin-top: 8px;
  padding: 9px;
  border: 1px solid #eceef0;
  border-radius: 12px;
  background: #fafafa;
}
.user-menu-usage-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  color: #606267;
  font-size: 9px;
  font-weight: 800;
}
.user-menu-usage-heading small { color: #a0a1a5; font-size: 8px; font-weight: 600; }
.user-menu-usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.user-menu-stat { min-width: 0; padding: 7px; border-radius: 9px; background: #fff; }
.user-menu-stat strong { display: block; color: #1b1c1e; font-size: 15px; line-height: 1.1; letter-spacing: -.03em; }
.user-menu-stat small { display: block; margin-top: 3px; color: #999b9f; font-size: 8px; white-space: nowrap; }
.user-menu-divider { height: 1px; margin: 10px 2px 8px; background: #ededed; }
.user-dropdown-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 9px 6px;
  font-size: 10px;
  font-weight: 700;
  text-align: left;
  border: 0;
  border-radius: 9px;
  background: transparent;
}
.user-dropdown-item svg { width: 15px; height: 15px; }
.user-dropdown-item.danger { color: #d94a4a; }
.user-dropdown-item.danger:hover { background: #fff1f1; }
body.dashboard-home .dashboard-heading-row h1 span,
body.dashboard-home .workflow-page h1 .workflow-title-accent,
body.dashboard-home .workflow-page h1 .workflow-title-accent::after { color: var(--dashboard-accent); }
body.dashboard-home .workflow-page h1 .workflow-title-accent::after { background: var(--dashboard-accent); }


/* Native account menu: opening is handled by the browser, not JavaScript. */
.dashboard-profile-menu {
  position: relative;
  display: block;
}
.dashboard-profile-menu > summary {
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
}
.dashboard-profile-menu > summary::-webkit-details-marker { display: none; }
.dashboard-profile-menu > summary::marker { display: none; }
.dashboard-profile-menu[open] > .user-dropdown {
  display: block !important;
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 2147483647 !important;
}
.dashboard-profile-menu[open] > summary svg:last-child { transform: rotate(180deg); }

/* WhatsApp integration polish and request states. */
.apps-connect-button {
  min-height: 42px;
  gap: 12px;
  padding: 0 14px;
  letter-spacing: -.01em;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .08);
}
.apps-connect-button:hover { box-shadow: 0 7px 16px rgba(0, 0, 0, .12); }
.apps-connect-button.is-available {
  color: #10130b;
  background: linear-gradient(135deg, #d9ff63 0%, #c8f03e 56%, #a9d42c 100%);
  border: 1px solid rgba(118, 153, 18, .22);
  box-shadow: 0 6px 16px rgba(143, 177, 36, .2), inset 0 1px rgba(255, 255, 255, .55);
}
.apps-connect-button.is-available:hover {
  color: #10130b;
  background: linear-gradient(135deg, #e5ff87 0%, #d5f750 56%, #b7e33a 100%);
  box-shadow: 0 9px 20px rgba(143, 177, 36, .28), inset 0 1px rgba(255, 255, 255, .66);
}
.apps-button-label { display: inline-flex; align-items: center; min-width: 0; gap: 8px; }
.apps-button-icon { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; }
.apps-button-icon svg { width: 18px; height: 18px; }
.apps-button-arrow { transition: transform .16s ease; }
.apps-connect-button:hover .apps-button-arrow { transform: translate(2px, -2px); }
.apps-connect-button:focus-visible { outline: 3px solid rgba(107, 145, 30, .28); outline-offset: 3px; }

/* Agent builder modal and CRUD controls. */
.agent-builder-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  padding: 12px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(7px);
}
.agent-builder-modal {
  position: relative;
  width: min(100%, 620px);
  max-height: calc(100dvh - 24px);
  padding: 24px 30px;
  overflow: hidden;
  overscroll-behavior: none;
  color: #f8f8f8;
  background: #111113;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .55);
}
.agent-builder-modal::-webkit-scrollbar { display: none; }
.agent-builder-modal { scrollbar-width: none; }
.agent-builder-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #9b9ca2;
  font-size: 20px;
  line-height: 1;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
}
.agent-builder-close:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.agent-builder-eyebrow { margin: 0 0 8px; color: #9bbd4a; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.agent-builder-modal h2 { color: #fff; font-family: var(--font-display); font-size: 25px; letter-spacing: -.05em; }
.agent-builder-description { max-width: 430px; margin: 9px 0 24px; color: #999aa1; font-size: 12px; line-height: 1.55; }
.agent-builder-form { display: grid; gap: 15px; }
.agent-builder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.agent-builder-field { display: grid; gap: 7px; color: #d8d8dc; font-size: 10px; font-weight: 700; }
.agent-builder-field-wide { grid-column: 1 / -1; }
.agent-builder-field input,
.agent-builder-field select,
.agent-builder-field textarea {
  width: 100%;
  padding: 11px 12px;
  color: #f5f5f6;
  font: 500 12px/1.4 var(--font-body);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  outline: 0;
  resize: vertical;
}
.agent-builder-field input { height: 40px; padding-top: 0; padding-bottom: 0; }
.agent-builder-field select {
  height: 46px;
  padding: 0 42px 0 14px;
  color: #f5f5f6;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  cursor: pointer;
  background-color: #19191c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23c8f03e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  border-color: rgba(255, 255, 255, .16);
  border-radius: 12px;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.agent-builder-field select:hover { background-color: #202024; border-color: rgba(200, 240, 62, .4); }
.agent-builder-field select:focus-visible { border-color: rgba(200, 240, 62, .78); box-shadow: 0 0 0 3px rgba(200, 240, 62, .1), 0 8px 22px rgba(0, 0, 0, .12); }
.agent-builder-field select option { color: #f5f5f6; background: #19191c; }
.agent-builder-field input:focus,
.agent-builder-field textarea:focus { border-color: rgba(200, 240, 62, .7); box-shadow: 0 0 0 3px rgba(200, 240, 62, .08); }
.agent-custom-select { position: relative; width: 100%; }
.agent-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.agent-custom-select-trigger {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  color: #f5f5f6;
  font: 500 12px/1.4 var(--font-body);
  text-align: left;
  background: linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  outline: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 6px 16px rgba(0, 0, 0, .08);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.agent-custom-select-trigger:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .045));
  border-color: rgba(200, 240, 62, .42);
  transform: translateY(-1px);
}
.agent-custom-select-trigger:focus-visible,
.agent-custom-select.is-open .agent-custom-select-trigger {
  border-color: rgba(200, 240, 62, .78);
  box-shadow: 0 0 0 3px rgba(200, 240, 62, .1), inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px rgba(0, 0, 0, .16);
}
.agent-custom-select-chevron { width: 16px; height: 16px; flex: 0 0 auto; color: #c8f03e; transition: transform .2s ease; }
.agent-custom-select.is-open .agent-custom-select-chevron { transform: rotate(180deg); }
.agent-custom-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 20;
  display: grid;
  max-height: 230px;
  gap: 3px;
  padding: 6px;
  overflow-y: auto;
  background: rgba(27, 27, 30, .98);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .045);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-7px) scale(.985);
  transform-origin: top center;
  transition: opacity .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1), visibility .2s ease;
}
.agent-custom-select.is-open .agent-custom-select-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.agent-custom-option {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  color: #bfc0c6;
  font: 500 11px/1.3 var(--font-body);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 9px;
  outline: 0;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.agent-custom-option:hover,
.agent-custom-option.is-active,
.agent-custom-option:focus-visible { color: #fff; background: rgba(255, 255, 255, .075); }
.agent-custom-option.is-selected { color: #dfff8c; background: rgba(200, 240, 62, .1); }
.agent-custom-option.is-selected.is-active,
.agent-custom-option.is-selected:focus-visible { background: rgba(200, 240, 62, .16); }
.agent-custom-option-label { flex: 1; }
.agent-custom-option-check { width: 15px; height: 15px; flex: 0 0 auto; color: #c8f03e; opacity: 0; transform: scale(.7); transition: opacity .16s ease, transform .16s ease; }
.agent-custom-option.is-selected .agent-custom-option-check { opacity: 1; transform: scale(1); }
.agent-custom-select-menu::-webkit-scrollbar { width: 5px; }
.agent-custom-select-menu::-webkit-scrollbar-track { background: transparent; }
.agent-custom-select-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 99px; }
.agent-builder-storage-note { color: #777980; font-size: 10px; }
.agent-builder-feedback { min-height: 16px; color: #fca5a5; font-size: 11px; }
.agent-builder-actions { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; margin-top: 2px; }
.agent-delete-button,
.agent-cancel-button,
.agent-save-button {
  min-height: 38px;
  padding: 0 14px;
  font: 700 11px/1 var(--font-body);
  border-radius: 9px;
  cursor: pointer;
}
.agent-delete-button { color: #fca5a5; background: transparent; border: 1px solid rgba(248, 113, 113, .24); }
.agent-cancel-button { color: #c4c5ca; background: transparent; border: 1px solid rgba(255, 255, 255, .12); }
.agent-save-button { color: #10130b; background: var(--lime); border: 1px solid rgba(118, 153, 18, .22); }
.agent-delete-button:hover,
.agent-cancel-button:hover,
.agent-save-button:hover { transform: none; filter: none; }
@media (max-width: 560px) {
  .agent-builder-modal { padding: 26px 18px 20px; border-radius: 18px; }
  .agent-builder-grid { grid-template-columns: 1fr; }
  .agent-builder-field-wide { grid-column: auto; }
  .agent-builder-actions { grid-template-columns: 1fr 1fr; }
  .agent-delete-button { grid-column: 1 / -1; }
  .agent-builder-actions span { display: none; }
  .agent-custom-select-trigger { min-height: 44px; }
  .agent-custom-select-menu { max-height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-custom-select-trigger,
  .agent-custom-select-chevron,
  .agent-custom-select-menu,
  .agent-custom-option { transition: none; }
}

/* Refined agent builder presentation. */
.agent-builder-backdrop {
  padding: clamp(16px, 4vw, 34px);
  background:
    radial-gradient(circle at 50% 5%, rgba(200, 240, 62, .08), transparent 34%),
    rgba(6, 7, 9, .76);
  backdrop-filter: blur(12px) saturate(115%);
  animation: agent-builder-fade-in .24s ease both;
}
.agent-builder-modal {
  width: min(100%, 680px);
  padding: 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(200, 240, 62, .065), transparent 28%),
    linear-gradient(145deg, #17181b 0%, #101113 58%, #0d0e10 100%);
  border-color: rgba(255, 255, 255, .15);
  border-radius: 26px;
  box-shadow: 0 40px 110px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255, 255, 255, .025) inset;
  animation: agent-builder-rise-in .34s cubic-bezier(.22, 1, .36, 1) both;
}
.agent-builder-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-right: 42px;
}
.agent-builder-mark {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  color: #c8f03e;
  place-items: center;
  background: linear-gradient(145deg, rgba(200, 240, 62, .2), rgba(200, 240, 62, .06));
  border: 1px solid rgba(200, 240, 62, .25);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(155, 190, 55, .1), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.agent-builder-mark svg { width: 23px; height: 23px; }
.agent-builder-eyebrow { margin-bottom: 5px; color: #c8f03e; font-size: 9px; letter-spacing: .16em; }
.agent-builder-modal h2 { margin: 0; font-size: clamp(24px, 3vw, 29px); letter-spacing: -.055em; }
.agent-builder-description { max-width: 490px; margin: 14px 0 28px 55px; color: #a8a9af; font-size: 12px; }
.agent-builder-form { gap: 17px; }
.agent-builder-grid { gap: 16px 13px; }
.agent-builder-field { gap: 8px; color: #e3e3e5; font-size: 10px; letter-spacing: .01em; }
.agent-builder-field > span::after { content: ' *'; color: #9dbd43; font-weight: 500; }
.agent-builder-field input,
.agent-builder-field select,
.agent-builder-field textarea {
  color: #fafafa;
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.agent-builder-field textarea { min-height: 74px; }
.agent-builder-field-wide:nth-last-child(1) textarea { min-height: 108px; }
.agent-builder-field input:hover,
.agent-builder-field textarea:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); }
.agent-builder-field input:focus,
.agent-builder-field textarea:focus { background: rgba(200, 240, 62, .045); transform: translateY(-1px); }
.agent-custom-select-trigger { background: rgba(255, 255, 255, .055); }
.agent-builder-storage-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 1px 0 0;
  color: #85868c;
}
.agent-builder-storage-note::before {
  content: '✓';
  display: grid;
  width: 16px;
  height: 16px;
  color: #c8f03e;
  font-size: 10px;
  place-items: center;
  background: rgba(200, 240, 62, .1);
  border-radius: 50%;
}
.agent-builder-actions {
  margin: 7px -34px -34px;
  padding: 17px 34px;
  background: rgba(0, 0, 0, .16);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.agent-delete-button,
.agent-cancel-button,
.agent-save-button { min-height: 42px; border-radius: 11px; transition: transform .2s ease, background .2s ease, border-color .2s ease, filter .2s ease; }
.agent-cancel-button { color: #dedee1; background: rgba(255, 255, 255, .035); }
.agent-save-button { min-width: 128px; box-shadow: 0 8px 20px rgba(181, 222, 48, .14); }
.agent-delete-button:hover,
.agent-cancel-button:hover,
.agent-save-button:hover { transform: translateY(-2px); filter: brightness(1.06); }
.agent-builder-close { transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.agent-builder-close:hover { border-color: rgba(200, 240, 62, .35); transform: rotate(8deg); }
@keyframes agent-builder-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes agent-builder-rise-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 560px) {
  .agent-builder-modal { padding: 24px 18px 0; border-radius: 21px; }
  .agent-builder-description { margin: 12px 0 23px; }
  .agent-builder-actions { margin: 7px -18px 0; padding: 14px 18px; }
  .agent-builder-mark { width: 38px; height: 38px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-builder-backdrop, .agent-builder-modal { animation: none; }
}

/* Step-by-step agent setup. */
.agent-builder-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  padding: 11px 13px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
}
.agent-builder-steps > i {
  width: 22px;
  height: 1px;
  background: rgba(255, 255, 255, .14);
}
.agent-builder-step-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #777980;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  transition: color .2s ease;
}
.agent-builder-step-indicator b {
  display: grid;
  width: 24px;
  height: 24px;
  color: #8b8c91;
  font-size: 10px;
  place-items: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.agent-builder-step-indicator.is-active { color: #f2f2f3; }
.agent-builder-step-indicator.is-active b,
.agent-builder-step-indicator.is-complete b {
  color: #10130b;
  background: var(--lime);
  border-color: var(--lime);
}
.agent-builder-step-indicator.is-complete { color: #b9d75a; }
.agent-builder-step-panel[hidden] { display: none; }
.agent-builder-step-panel { animation: agent-step-in .24s ease both; }
.agent-builder-step-heading { display: grid; gap: 5px; margin-bottom: 18px; }
.agent-builder-step-heading span { color: #f2f2f3; font-size: 13px; font-weight: 800; }
.agent-builder-step-heading small { color: #85868c; font-size: 11px; line-height: 1.45; }
.agent-builder-review {
  display: grid;
  gap: 6px;
  margin-top: 22px;
  padding: 17px;
  background: linear-gradient(135deg, rgba(200, 240, 62, .09), rgba(255, 255, 255, .035));
  border: 1px solid rgba(200, 240, 62, .2);
  border-radius: 14px;
}
.agent-builder-review-label { color: #a8a9af; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.agent-builder-review strong { color: #fff; font-size: 15px; }
.agent-builder-review small { color: #b9d75a; font-size: 10px; }
.agent-builder-actions { display: flex; align-items: center; }
.agent-builder-actions > span { flex: 1; }
.agent-back-button,
.agent-next-button {
  min-height: 42px;
  padding: 0 16px;
  color: #dedee1;
  font: 700 11px/1 var(--font-body);
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 11px;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.agent-next-button { min-width: 92px; color: #10130b; background: var(--lime); border-color: rgba(118, 153, 18, .22); }
.agent-back-button:hover,
.agent-next-button:hover { transform: translateY(-2px); border-color: rgba(200, 240, 62, .45); }
.agent-builder-actions button[hidden] { display: none; }
@keyframes agent-step-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 560px) {
  .agent-builder-steps { gap: 6px; margin-bottom: 22px; padding: 9px; }
  .agent-builder-steps > i { width: 10px; }
  .agent-builder-step-indicator { gap: 0; }
  .agent-builder-step-indicator span { display: none; }
  .agent-builder-step-indicator b { width: 22px; height: 22px; }
  .agent-builder-actions { flex-wrap: wrap; gap: 8px; }
  .agent-builder-actions > span { display: none; }
  .agent-builder-actions .agent-delete-button { width: 100%; order: 5; }
  .agent-builder-actions .agent-cancel-button { flex: 1; }
  .agent-builder-actions .agent-back-button { flex: 1; }
  .agent-builder-actions .agent-next-button,
  .agent-builder-actions .agent-save-button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-builder-step-panel { animation: none; }
}

/* Premium agent editor polish. */
.agent-builder-backdrop {
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: clamp(20px, 5vh, 52px) clamp(16px, 4vw, 56px);
  background:
    radial-gradient(circle at 50% 0, rgba(200, 240, 62, .13), transparent 30%),
    rgba(5, 6, 8, .78);
}
.agent-builder-modal {
  width: min(100%, 820px);
  padding: 38px 42px 0;
  background:
    radial-gradient(circle at 100% 0, rgba(200, 240, 62, .11), transparent 25%),
    linear-gradient(140deg, #1b1d20 0%, #111315 45%, #0d0f11 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 28px;
  box-shadow: 0 42px 120px rgba(0, 0, 0, .68), 0 0 0 1px rgba(255, 255, 255, .025) inset;
}
.agent-builder-modal::before {
  position: absolute;
  top: 0;
  right: 12%;
  left: 12%;
  height: 1px;
  content: '';
  background: linear-gradient(90deg, transparent, rgba(200, 240, 62, .72), transparent);
}
.agent-builder-close {
  top: 22px;
  right: 22px;
  width: 36px;
  height: 36px;
  color: #a7a9ae;
  font-size: 19px;
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .14);
  border-radius: 11px;
}
.agent-builder-heading { gap: 15px; padding-right: 52px; }
.agent-builder-mark {
  width: 48px;
  height: 48px;
  background: linear-gradient(145deg, rgba(200, 240, 62, .25), rgba(200, 240, 62, .055));
  border-color: rgba(200, 240, 62, .34);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(155, 190, 55, .13), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.agent-builder-mark svg { width: 25px; height: 25px; }
.agent-builder-eyebrow { margin-bottom: 6px; font-size: 9px; letter-spacing: .18em; }
.agent-builder-modal h2 { font-size: clamp(26px, 3vw, 32px); letter-spacing: -.06em; }
.agent-builder-description { max-width: 560px; margin: 15px 0 30px 63px; color: #aeb0b5; font-size: 12px; }
.agent-builder-steps {
  gap: 12px;
  margin: 0 -1px 30px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, .19);
  border-color: rgba(255, 255, 255, .1);
  border-radius: 16px;
}
.agent-builder-steps > i { flex: 1; width: auto; max-width: 100px; background: rgba(255, 255, 255, .16); }
.agent-builder-step-indicator { flex: 0 1 auto; gap: 9px; font-size: 10px; }
.agent-builder-step-indicator b { width: 27px; height: 27px; font-size: 10px; }
.agent-builder-step-indicator.is-active b { box-shadow: 0 0 0 4px rgba(200, 240, 62, .1), 0 5px 14px rgba(200, 240, 62, .16); }
.agent-builder-step-heading { gap: 6px; margin-bottom: 20px; }
.agent-builder-step-heading span { font-size: 15px; letter-spacing: -.02em; }
.agent-builder-step-heading small { color: #97999f; font-size: 11px; }
.agent-builder-grid { gap: 18px 16px; }
.agent-builder-field { gap: 9px; color: #e7e7e9; font-size: 10px; letter-spacing: .02em; }
.agent-builder-field > span { display: flex; align-items: center; justify-content: space-between; }
.agent-builder-field > span::after { content: 'Required'; color: #75777e; font-size: 8px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.agent-builder-field input,
.agent-builder-field textarea { padding: 13px 14px; background: rgba(255, 255, 255, .045); border-radius: 13px; }
.agent-builder-field input { height: 50px; }
.agent-builder-field textarea { min-height: 90px; line-height: 1.55; }
.agent-builder-field-wide:nth-last-child(1) textarea { min-height: 126px; }
.agent-custom-select-trigger { min-height: 50px; padding: 0 15px; border-radius: 13px; }
.agent-builder-storage-note { margin-top: 3px; padding-top: 2px; color: #8c8e94; }
.agent-builder-feedback { min-height: 17px; }
.agent-builder-actions {
  margin: 10px -42px 0;
  padding: 18px 42px;
  background: rgba(4, 5, 6, .3);
  border-top-color: rgba(255, 255, 255, .09);
}
.agent-delete-button,
.agent-cancel-button,
.agent-back-button,
.agent-next-button,
.agent-save-button { min-height: 44px; border-radius: 12px; }
.agent-delete-button { padding-inline: 16px; }
.agent-cancel-button { padding-inline: 18px; }
.agent-back-button,
.agent-next-button { padding-inline: 18px; }
.agent-next-button,
.agent-save-button { box-shadow: 0 9px 22px rgba(181, 222, 48, .16); }
.agent-builder-review { margin-top: 25px; padding: 20px; border-radius: 16px; }
@media (max-width: 680px) {
  .agent-builder-modal { padding: 28px 22px 0; border-radius: 22px; }
  .agent-builder-description { margin-left: 0; }
  .agent-builder-actions { margin-inline: -22px; padding-inline: 22px; }
}
@media (max-width: 560px) {
  .agent-builder-modal { padding-top: 24px; }
  .agent-builder-close { top: 16px; right: 16px; }
  .agent-builder-heading { padding-right: 40px; }
  .agent-builder-steps { margin-bottom: 23px; }
}


/* Neutral modal theme: keep the editor refined without saturated accents. */
.agent-builder-modal {
  --lime: #f4f4f5;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 255, 255, .045), transparent 25%),
    linear-gradient(140deg, #1a1b1d 0%, #121315 45%, #0e0f11 100%);
}
.agent-builder-backdrop {
  background: rgba(12, 13, 15, .72);
}
.agent-builder-modal::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
}
.agent-builder-mark {
  color: #f1f1f2;
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .035));
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.agent-builder-eyebrow,
.agent-builder-step-indicator.is-complete,
.agent-builder-review small { color: #c7c8cb; }
.agent-builder-steps { background: rgba(255, 255, 255, .025); }
.agent-builder-step-indicator.is-active b,
.agent-builder-step-indicator.is-complete b {
  color: #17181a;
  background: #f1f1f2;
  border-color: #f1f1f2;
}
.agent-builder-step-indicator.is-active b {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .08), 0 5px 14px rgba(0, 0, 0, .18);
}
.agent-builder-field input:focus,
.agent-builder-field textarea:focus,
.agent-builder-field select:focus-visible,
.agent-custom-select-trigger:focus-visible,
.agent-custom-select.is-open .agent-custom-select-trigger {
  border-color: rgba(255, 255, 255, .66);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.agent-builder-field input:focus,
.agent-builder-field textarea:focus { background: rgba(255, 255, 255, .065); }
.agent-builder-field select { background-image: none; }
.agent-custom-select-chevron { color: #d7d8da; }
.agent-custom-select-trigger:hover,
.agent-builder-field select:hover {
  background: rgba(255, 255, 255, .075);
  border-color: rgba(255, 255, 255, .3);
}
.agent-custom-option.is-selected,
.agent-custom-option.is-selected.is-active,
.agent-custom-option.is-selected:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .11);
}
.agent-custom-option-check { color: #f1f1f2; }
.agent-builder-storage-note::before {
  color: #e1e1e3;
  background: rgba(255, 255, 255, .1);
}
.agent-builder-review {
  background: linear-gradient(135deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025));
  border-color: rgba(255, 255, 255, .15);
}
.agent-next-button,
.agent-save-button {
  color: #161719;
  background: #f1f1f2;
  border-color: rgba(255, 255, 255, .35);
  box-shadow: 0 9px 22px rgba(0, 0, 0, .2);
}
.agent-back-button:hover,
.agent-next-button:hover,
.agent-save-button:hover {
  border-color: rgba(255, 255, 255, .55);
}
.agent-delete-button {
  color: #c5a9a9;
  border-color: rgba(190, 145, 145, .25);
}
.agent-builder-field > span::after { color: #707277; }


/* Hard monochrome pass for the editor and the page beneath it. */
.agent-builder-backdrop {
  backdrop-filter: grayscale(1) blur(12px);
  -webkit-backdrop-filter: grayscale(1) blur(12px);
}
.agent-builder-modal {
  filter: grayscale(1);
}


/* Light editor surface with no colored backdrop. */
.agent-builder-backdrop {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.agent-builder-modal {
  filter: none;
  color: #252629;
  background: #fff;
  border-color: #e5e6e8;
  box-shadow: 0 24px 70px rgba(22, 24, 28, .2), 0 2px 8px rgba(22, 24, 28, .08);
}
.agent-builder-modal::before { background: #ececee; }
.agent-builder-close {
  color: #777a80;
  background: #f7f7f8;
  border-color: #e5e6e8;
}
.agent-builder-close:hover {
  color: #252629;
  background: #eeeeef;
  border-color: #d8d9dc;
}
.agent-builder-mark {
  color: #252629;
  background: #f1f1f2;
  border-color: #e2e3e5;
  box-shadow: none;
}
.agent-builder-eyebrow { color: #777a80; }
.agent-builder-modal h2 { color: #17181a; }
.agent-builder-description { color: #777a80; }
.agent-builder-steps {
  background: #f8f8f9;
  border-color: #e7e7e9;
}
.agent-builder-steps > i { background: #dfe0e2; }
.agent-builder-step-indicator { color: #96989d; }
.agent-builder-step-indicator.is-active,
.agent-builder-step-indicator.is-complete { color: #37383b; }
.agent-builder-step-indicator b {
  color: #85878c;
  background: #fff;
  border-color: #dfe0e2;
}
.agent-builder-step-indicator.is-active b,
.agent-builder-step-indicator.is-complete b {
  color: #fff;
  background: #303135;
  border-color: #303135;
  box-shadow: none;
}
.agent-builder-step-heading span { color: #252629; }
.agent-builder-step-heading small { color: #85878c; }
.agent-builder-field { color: #414247; }
.agent-builder-field > span::after { color: #a3a5aa; }
.agent-builder-field input,
.agent-builder-field select,
.agent-builder-field textarea {
  color: #252629;
  background: #fff;
  border-color: #dfe0e3;
  box-shadow: 0 1px 2px rgba(20, 22, 25, .03);
}
.agent-builder-field input::placeholder,
.agent-builder-field textarea::placeholder { color: #a5a7ac; }
.agent-builder-field input:hover,
.agent-builder-field textarea:hover,
.agent-builder-field select:hover,
.agent-custom-select-trigger:hover {
  background: #fcfcfc;
  border-color: #c9cacf;
}
.agent-builder-field input:focus,
.agent-builder-field textarea:focus,
.agent-builder-field select:focus-visible,
.agent-custom-select-trigger:focus-visible,
.agent-custom-select.is-open .agent-custom-select-trigger {
  background: #fff;
  border-color: #7d7f84;
  box-shadow: 0 0 0 3px rgba(40, 42, 46, .08);
}
.agent-custom-select-trigger {
  color: #252629;
  background: #fff;
  border-color: #dfe0e3;
  box-shadow: 0 1px 2px rgba(20, 22, 25, .03);
}
.agent-custom-select-chevron { color: #6e7075; }
.agent-custom-select-menu {
  background: #fff;
  border-color: #dedfe2;
  box-shadow: 0 16px 36px rgba(20, 22, 25, .14);
}
.agent-custom-option { color: #606268; }
.agent-custom-option:hover,
.agent-custom-option.is-active,
.agent-custom-option:focus-visible { color: #252629; background: #f4f4f5; }
.agent-custom-option.is-selected,
.agent-custom-option.is-selected.is-active,
.agent-custom-option.is-selected:focus-visible {
  color: #252629;
  background: #ededee;
}
.agent-custom-option-check { color: #303135; }
.agent-builder-storage-note { color: #92949a; }
.agent-builder-storage-note::before { color: #55575c; background: #f0f0f1; }
.agent-builder-feedback { color: #a14d4d; }
.agent-builder-review {
  background: #f7f7f8;
  border-color: #e1e2e4;
}
.agent-builder-review-label { color: #85878c; }
.agent-builder-review strong { color: #252629; }
.agent-builder-review small { color: #66686e; }
.agent-builder-actions {
  background: #fafafa;
  border-top-color: #e8e8ea;
}
.agent-delete-button {
  color: #a14d4d;
  background: #fff;
  border-color: #e4caca;
}
.agent-cancel-button,
.agent-back-button {
  color: #4e5055;
  background: #fff;
  border-color: #dedfe2;
}
.agent-next-button,
.agent-save-button {
  color: #fff;
  background: #292a2e;
  border-color: #292a2e;
  box-shadow: 0 6px 14px rgba(24, 25, 28, .14);
}
.agent-delete-button:hover,
.agent-cancel-button:hover,
.agent-back-button:hover,
.agent-next-button:hover,
.agent-save-button:hover {
  filter: none;
  transform: translateY(-1px);
}


/* Final close control and restrained backdrop blur. */
.agent-builder-backdrop {
  background: rgba(18, 19, 21, .22);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.agent-builder-close {
  top: 20px;
  right: 20px;
  width: 34px;
  height: 34px;
  color: #62646a;
  font: 400 22px/1 Arial, sans-serif;
  background: #f1f1f2;
  border: 1px solid #e1e2e4;
  border-radius: 50%;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .08);
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.agent-builder-close:hover {
  color: #17181a;
  background: #e5e5e7;
  border-color: #d1d2d5;
  transform: rotate(90deg) scale(1.04);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}
.agent-builder-close:focus-visible {
  outline: 2px solid #74767b;
  outline-offset: 3px;
}

/* Agent knowledge sources */
.agent-knowledge {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #e5e8df;
  border-radius: 13px;
  background: #fbfcf9;
}
.agent-knowledge-heading { display: grid; gap: 2px; }
.agent-knowledge-heading > span { color: #252627; font-size: 10px; font-weight: 700; }
.agent-knowledge-heading small,
.agent-knowledge-note { color: #8a8c88; font-size: 8px; line-height: 1.45; }
.agent-knowledge-url-row { display: flex; gap: 7px; }
.agent-knowledge-url-row input {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  color: #282a28;
  font: inherit;
  font-size: 9px;
  border: 1px solid #e2e5de;
  border-radius: 9px;
  outline: 0;
  background: #fff;
}
.agent-knowledge-url-row input:focus { border-color: #a9d57c; box-shadow: 0 0 0 3px rgb(169 213 124 / 18%); }
.agent-knowledge-url-row button {
  flex: 0 0 auto;
  padding: 0 10px;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  border: 0;
  border-radius: 9px;
  background: #252725;
  cursor: pointer;
}
.agent-knowledge-url-row button:disabled { cursor: wait; opacity: .6; }
.agent-knowledge-file {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  cursor: pointer;
  border: 1px dashed #cdd8c5;
  border-radius: 9px;
  background: #f5f8f1;
}
.agent-knowledge-file input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.agent-knowledge-file span { color: #3c6336; font-size: 9px; font-weight: 700; }
.agent-knowledge-file small { color: #8a8c88; font-size: 8px; }
.agent-knowledge-sources { display: grid; gap: 5px; }
.agent-knowledge-source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid #e9ebe7;
  border-radius: 9px;
  background: #fff;
}
.agent-knowledge-source-type { padding: 3px 5px; color: #4d813d; font-size: 7px; font-weight: 700; border-radius: 999px; background: #e9f6df; }
.agent-knowledge-source div { display: grid; min-width: 0; gap: 1px; }
.agent-knowledge-source strong,
.agent-knowledge-source small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-knowledge-source strong { color: #353735; font-size: 8px; }
.agent-knowledge-source small { color: #969894; font-size: 7px; }
.agent-knowledge-source button { width: 18px; height: 18px; color: #8e5656; font-size: 15px; line-height: 1; border: 0; border-radius: 6px; background: #fff0f0; cursor: pointer; }
.agent-knowledge-empty { padding: 3px 1px; color: #9b9d99; font-size: 8px; }
.agent-knowledge-note { margin: 0; }
@media (max-width: 520px) { .agent-knowledge-url-row { flex-direction: column; } .agent-knowledge-url-row button { min-height: 31px; } }


/* Wide agent editor: use the available viewport width instead of a narrow grid track. */
.agent-builder-modal {
  width: min(calc(100vw - 72px), 900px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

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

  .agent-builder-grid .agent-builder-field-wide {
    grid-column: 1 / -1;
  }
}


/* Quick start keeps agent creation simple; advanced fields stay editable, not mandatory. */
.agent-builder-field > span::after { display: none; }
.agent-quick-start {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e6e7e9;
  border-radius: 14px;
  background: #fafafa;
}
.agent-quick-start > div:first-child { display: grid; gap: 3px; }
.agent-quick-start > div:first-child strong { color: #292a2e; font-size: 11px; }
.agent-quick-start > div:first-child small { color: #8b8d92; font-size: 9px; }
.agent-quick-start-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.agent-quick-start-options button {
  display: grid;
  min-height: 68px;
  gap: 4px;
  padding: 10px;
  color: #38393d;
  text-align: left;
  border: 1px solid #e1e2e5;
  border-radius: 11px;
  background: #fff;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.agent-quick-start-options button:hover,
.agent-quick-start-options button.is-selected {
  border-color: #787a80;
  background: #f3f3f4;
  transform: translateY(-1px);
}
.agent-quick-start-options strong { font-size: 10px; }
.agent-quick-start-options small { color: #8a8c91; font-size: 8px; line-height: 1.35; }
@media (max-width: 560px) {
  .agent-quick-start-options { grid-template-columns: 1fr; }
  .agent-quick-start-options button { min-height: 54px; }
}

/* Knowledge import details. */
.agent-knowledge-source {
  display: grid;
  gap: 8px;
  padding: 12px;
}
.agent-knowledge-source-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
}
.agent-knowledge-source-top > div { min-width: 0; }
.agent-knowledge-source-top strong,
.agent-knowledge-source-top small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-knowledge-source-top small { margin-top: 3px; }
.agent-knowledge-summary { margin: 0; color: #71944d; font-size: 10px; font-weight: 700; }
.agent-knowledge-preview {
  padding: 9px 10px;
  background: rgba(200, 240, 62, .045);
  border: 1px solid rgba(126, 161, 56, .18);
  border-radius: 9px;
}
.agent-knowledge-preview summary { color: #607f40; font-size: 10px; font-weight: 800; cursor: pointer; user-select: none; }
.agent-knowledge-preview summary::marker { color: #9bbd4a; }
.agent-knowledge-preview ol { display: grid; gap: 6px; margin: 10px 0; padding-left: 20px; }
.agent-knowledge-preview li { min-width: 0; color: #50564c; font-size: 10px; }
.agent-knowledge-preview li strong,
.agent-knowledge-preview li small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-knowledge-preview li small { margin-top: 2px; color: #8a9185; font-size: 9px; }
.agent-knowledge-preview-text { padding-top: 9px; border-top: 1px solid rgba(126, 161, 56, .16); }
.agent-knowledge-preview-text > span { color: #71944d; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.agent-knowledge-preview-text p { margin: 5px 0 0; color: #5f655d; font: 10px/1.55 var(--font-body); }

/* Knowledge source card layout — keep import details readable in the light agent editor. */
.agent-knowledge-sources {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.agent-knowledge-source {
  display: block !important;
  min-width: 0;
  padding: 13px 14px !important;
  background: #fff !important;
  border: 1px solid #e6e8e4 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(24, 28, 22, .025);
}
.agent-knowledge-source-top {
  display: flex !important;
  min-width: 0;
  align-items: center !important;
  gap: 9px !important;
}
.agent-knowledge-source-top > div {
  min-width: 0;
  flex: 1;
}
.agent-knowledge-source-top strong {
  color: #2a2d29;
  font-size: 11px;
  font-weight: 750;
}
.agent-knowledge-source-top small {
  color: #93978f;
  font-size: 9px;
}
.agent-knowledge-source-type {
  flex: 0 0 auto;
  padding: 4px 7px;
  color: #668e45;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  background: #edf7e8;
  border: 1px solid #d9ebd1;
  border-radius: 999px;
}
.agent-knowledge-source-top [data-remove-knowledge] {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  padding: 0;
  color: #bd7474;
  font-size: 16px;
  line-height: 1;
  place-items: center;
  background: #fff7f7;
  border: 1px solid #f2dddd;
  border-radius: 7px;
  cursor: pointer;
}
.agent-knowledge-source-top [data-remove-knowledge]:hover { background: #fdeeee; border-color: #eac7c7; }
.agent-knowledge-source-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0 0 0;
}
.agent-knowledge-source-meta span {
  padding: 4px 7px;
  color: #6d756b;
  font-size: 9px;
  font-weight: 700;
  background: #f6f7f5;
  border: 1px solid #e8eae6;
  border-radius: 6px;
}
.agent-knowledge-preview {
  display: block !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 0 !important;
  overflow: hidden;
  background: #fbfcf9;
  border: 1px solid #e2e8d8;
  border-radius: 10px;
}
.agent-knowledge-preview summary {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  color: #668e45;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.agent-knowledge-preview summary::-webkit-details-marker { display: none; }
.agent-knowledge-preview summary::before { content: '›'; font-size: 16px; font-weight: 500; transform: rotate(0deg); transition: transform .16s ease; }
.agent-knowledge-preview[open] summary { border-bottom: 1px solid #e2e8d8; }
.agent-knowledge-preview[open] summary::before { transform: rotate(90deg); }
.agent-knowledge-preview-content {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px;
  padding: 11px;
}
.agent-knowledge-preview ol {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px;
  width: 100%;
  margin: 0 !important;
  padding: 0 0 0 20px !important;
}
.agent-knowledge-preview li { min-width: 0; padding-left: 1px; color: #697066; }
.agent-knowledge-preview li strong { color: #414640; font-size: 10px; }
.agent-knowledge-preview li small { color: #8a9187; font-size: 9px; }
.agent-knowledge-preview-text {
  display: block !important;
  width: 100%;
  padding-top: 11px;
  border-top: 1px solid #e7eadf;
}
.agent-knowledge-preview-text > span { color: #758e5e; }
.agent-knowledge-preview-text p { max-width: 100%; margin-bottom: 0; color: #646a62; }
@media (max-width: 560px) {
  .agent-knowledge-source { padding: 11px !important; }
  .agent-knowledge-source-meta { margin-left: 0; }
  .agent-knowledge-preview-content { padding: 10px; }
}

/* Customer activity metrics in the dashboard heatmap. */
body.dashboard-home .orders-card { min-height: 232px; }
body.dashboard-home .heatmap-row {
  grid-template-columns: minmax(104px, 1.5fr) 28px minmax(0, 1fr);
  gap: 9px;
}
body.dashboard-home .heatmap-label {
  overflow: hidden;
  color: #64675f;
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.dashboard-home .heatmap-count {
  color: #292c28;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}
@media (max-width: 560px) {
  body.dashboard-home .heatmap-row { grid-template-columns: minmax(90px, 1.4fr) 24px minmax(0, 1fr); gap: 6px; }
  body.dashboard-home .heatmap-label { font-size: 9px; }
}

/* Dashboard usage budget and live activity rail. */
body.dashboard-home .dashboard-insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(240px, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
body.dashboard-home .token-limit-card,
body.dashboard-home .recent-activity-card {
  min-height: 174px;
  padding: 15px;
  border-radius: 20px;
}
.token-limit-badge,
.recent-activity-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  color: #526a42;
  font-size: 9px;
  font-weight: 800;
  background: #edf7e7;
  border: 1px solid #dbead2;
  border-radius: 999px;
}
.recent-activity-live { color: #6b7367; background: #f8f9f7; border-color: #e6e9e3; }
.recent-activity-live i { width: 6px; height: 6px; border-radius: 50%; background: #59b95d; box-shadow: 0 0 0 3px rgba(89, 185, 93, .12); }
.token-limit-summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
}
.token-limit-summary > span { color: #777b74; font-size: 10px; font-weight: 650; }
.token-limit-summary strong { color: #20231f; font-family: var(--font-display); font-size: clamp(22px, 2.3vw, 30px); font-weight: 500; letter-spacing: -.06em; }
.token-limit-track {
  height: 10px;
  margin-top: 12px;
  overflow: hidden;
  background: #e6e9e3;
  border-radius: 999px;
}
.token-limit-track > span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #80b84d, #b9da75);
  border-radius: inherit;
  transition: width .45s cubic-bezier(.22, 1, .36, 1);
}
.token-limit-note { margin: 9px 0 0; color: #92968f; font-size: 9px; }
.recent-activity-feed { display: grid; gap: 10px; margin: 17px 0 0; padding: 0; list-style: none; }
.recent-activity-item { display: grid; grid-template-columns: 19px minmax(0, 1fr); align-items: start; gap: 8px; }
.recent-activity-check {
  display: grid;
  width: 19px;
  height: 19px;
  color: #4d913d;
  font-size: 10px;
  font-weight: 900;
  place-items: center;
  background: #ebf6e7;
  border: 1px solid #d8ead1;
  border-radius: 50%;
}
.recent-activity-item strong,
.recent-activity-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-activity-item strong { color: #464a45; font-size: 10px; font-weight: 750; }
.recent-activity-item small { margin-top: 2px; color: #92968f; font-size: 9px; }
@media (max-width: 900px) {
  body.dashboard-home .dashboard-insights-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body.dashboard-home .token-limit-card,
  body.dashboard-home .recent-activity-card { min-height: auto; padding: 13px; }
  .token-limit-summary { margin-top: 20px; }
  .token-limit-summary strong { font-size: 24px; }
}


/* Keep the AI budget beside the current Cost summary. */
body.dashboard-home .dashboard-usage-grid {
  grid-template-columns: minmax(0, 1.55fr) repeat(2, minmax(190px, 1fr));
  gap: 9px;
}
body.dashboard-home .dashboard-usage-grid .token-limit-card {
  min-height: clamp(190px, 23vh, 270px);
}
body.dashboard-home .dashboard-insights-grid {
  grid-template-columns: minmax(0, 1.65fr) minmax(240px, 1fr);
}
body.dashboard-home .dashboard-insights-grid .recent-activity-card {
  grid-column: 2;
}

@media (max-width: 820px) {
  body.dashboard-home .dashboard-usage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.dashboard-home .dashboard-usage-grid .usage-card {
    grid-column: 1 / -1;
  }
  body.dashboard-home .dashboard-insights-grid {
    grid-template-columns: 1fr;
  }
  body.dashboard-home .dashboard-insights-grid .recent-activity-card {
    grid-column: auto;
  }
}

@media (max-width: 650px) {
  body.dashboard-home .dashboard-usage-grid {
    grid-template-columns: 1fr;
  }
  body.dashboard-home .dashboard-usage-grid .usage-card {
    grid-column: auto;
  }
}


/* Usage budget: one clean, calm accent color. */
body.dashboard-home .token-limit-track {
  background: #e8ece6;
  box-shadow: none;
}
body.dashboard-home .token-limit-track > span {
  background: #C8F03E;
  box-shadow: none;
}


/* Dashboard hero: make the AI workforce status the primary welcome message. */
body.dashboard-home .dashboard-ai-hero .dashboard-eyebrow {
  margin-bottom: 8px;
}
body.dashboard-home .dashboard-ai-hero .dashboard-hero-greeting {
  color: #171718;
}
body.dashboard-home .dashboard-ai-hero .dashboard-hero-name {
  display: inline-flex;
  gap: .2em;
  color: #C8F03E;
}
body.dashboard-home .dashboard-ai-hero .dashboard-hero-name > span {
  display: inline-block;
  color: #C8F03E !important;
}

body.dashboard-home .dashboard-ai-hero .dashboard-hero-status {
  max-width: 480px;
  margin-top: 10px;
  color: #737579;
  font-size: 12px;
  line-height: 1.5;
}
@media (max-width: 650px) {
  body.dashboard-home .dashboard-ai-hero .dashboard-hero-status {
    max-width: 330px;
    font-size: 11px;
  }
}

/* Customer avatars are intentionally neutral and never use WhatsApp profile photos. */
.transactions-table .transaction-avatar,
.chat-avatar {
  color: #111 !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid #d9d9d9 !important;
}

/* Keep the dashboard completely fixed while the agent editor is open. */
html:has(.agent-builder-backdrop),
body:has(.agent-builder-backdrop) {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Agent avatar upload */
.agent-image-uploader {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px dashed var(--border-hover);
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
}
.agent-image-preview {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(200,240,62,0.1);
  border: 1px solid rgba(200,240,62,0.24);
}
.agent-image-preview[hidden] { display: none; }
.agent-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.agent-image-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink);
  background: var(--lime);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.agent-image-button:hover { filter: brightness(1.08); }
.agent-image-button input { display: none; }
.agent-image-uploader small { width: 100%; color: var(--stone-dark); font-size: 11px; }
.agent-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =================== WORKFLOW EDITOR =================== */
#workflowPage.workflow-page { position: absolute; inset: 0; display: block; overflow: hidden; padding: 0; background: #08090a; color: #f6f7f4; }
#workflowPage[hidden] { display: none; }
.workflow-editor { position: absolute; inset: 0; display: flex; flex-direction: column; background: #08090a; }
.workflow-editor-topbar { height: 58px; flex: 0 0 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px 0 24px; border-bottom: 1px solid rgba(255,255,255,.08); background: #0c0d0e; font-size: 12px; }
.workflow-breadcrumb, .workflow-editor-actions { display: flex; align-items: center; gap: 11px; }
.workflow-breadcrumb strong { font-weight: 600; color: #dedfdb; }
.workflow-slash, .workflow-chevron { color: #62645f; }
.workflow-status-pill { padding: 3px 7px; color: #08090a; font-size: 9px; font-weight: 800; border-radius: 5px; background: #c8f03e; }
.workflow-environment { margin-left: 5px; padding: 3px 6px; color: #91948d; font-size: 8px; font-weight: 700; letter-spacing: .12em; border: 1px solid #343633; border-radius: 4px; }
.workflow-editor-search { display: flex; align-items: center; gap: 8px; width: 122px; height: 30px; padding: 0 9px; color: #696b66; border: 1px solid #282a29; border-radius: 8px; background: #111312; }
.workflow-editor-search svg { width: 14px; height: 14px; flex: 0 0 auto; }.workflow-editor-search input { width: 100%; color: #ddd; font-size: 11px; outline: none; border: 0; background: transparent; }.workflow-editor-search input::placeholder { color: #777a73; }
.workflow-icon-button, .workflow-avatar-button { display: grid; width: 30px; height: 30px; color: #9b9e97; place-items: center; border: 1px solid #292b2a; border-radius: 8px; background: #121413; }.workflow-icon-button { font-size: 13px; }.workflow-avatar-button { color: #10110f; font-size: 12px; font-weight: 800; background: #c8f03e; border-color: #c8f03e; }
.workflow-workspace { position: relative; display: flex; flex: 1; min-height: 0; }
.workflow-canvas { position: relative; flex: 1; min-width: 0; overflow: hidden; cursor: grab; background: #090a0a; }.workflow-canvas.is-panning { cursor: grabbing; }
.workflow-canvas-grid { position: absolute; inset: 0; pointer-events: none; opacity: .48; background-image: radial-gradient(circle, rgba(255,255,255,.19) 1px, transparent 1.2px); background-size: 19px 19px; background-position: 9px 9px; }
.workflow-canvas-world { position: absolute; inset: 0; transform-origin: 0 0; }
.workflow-connections { position: absolute; inset: 0; width: 1500px; height: 720px; overflow: visible; pointer-events: none; }.workflow-connection { fill: none; stroke: #a8bb70; stroke-width: 1.35; opacity: .82; }.workflow-connection-glow { fill: none; stroke: #c8f03e; stroke-width: 5; opacity: .11; filter: url(#workflowGlow); }
.workflow-node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 11px; width: 190px; min-height: 58px; padding: 10px 13px 10px 10px; color: #e6e8e2; border: 1px solid #292d2b; border-radius: 9px; background: linear-gradient(135deg, #161918, #111312); box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035); cursor: grab; user-select: none; }.workflow-node:hover, .workflow-node.is-selected { border-color: #596642; box-shadow: 0 0 0 1px rgba(200,240,62,.16), 0 12px 30px rgba(0,0,0,.34); }.workflow-node.is-dragging { cursor: grabbing; opacity: .9; }.workflow-node h3 { color: #e5e8e0; font: 600 12px/1.25 var(--font-display); }.workflow-node p { margin-top: 3px; overflow: hidden; color: #777c74; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }.workflow-node-icon { display: grid; width: 33px; height: 33px; flex: 0 0 33px; color: #b7c1a4; font-size: 16px; place-items: center; border: 1px solid #3d4535; border-radius: 7px; background: #20261b; }.workflow-node-icon-warning { color: #e38a48; border-color: rgba(227,138,72,.38); background: rgba(129,66,34,.28); }.workflow-node-schedule { left: 125px; top: 350px; border-color: rgba(187,85,51,.45); }.workflow-node-agent { left: 380px; top: 260px; width: 150px; }.workflow-node-transform { left: 650px; top: 205px; width: 180px; }.workflow-node-database { left: 930px; top: 295px; width: 175px; }.workflow-node-upload { left: 125px; top: 475px; width: 170px; border-color: rgba(74,116,205,.52); background: linear-gradient(135deg,#17213a,#111a2c); }.workflow-node-upload .workflow-node-icon { color: #8cb4ff; border-color: #3b5fa0; background: #223b72; }
.workflow-node-port, .workflow-node-socket { position: absolute; display: grid; width: 12px; height: 12px; padding: 0; color: #0c0d0c; font-size: 12px; line-height: 1; place-items: center; border: 1px solid #6f7769; border-radius: 50%; background: #0b0c0c; }.workflow-node-port:hover, .workflow-node-socket:hover { color: #10110f; border-color: #c8f03e; background: #c8f03e; }.workflow-port-left { left: -7px; top: 50%; transform: translateY(-50%); }.workflow-port-right { right: -7px; top: 50%; transform: translateY(-50%); }.workflow-node-socket { width: 18px; height: 18px; color: #10110f; border: 0; background: #bbc6a2; }.workflow-socket-model { left: 28px; bottom: -37px; }.workflow-socket-tools { left: 84px; bottom: -37px; }.workflow-socket-label { position: absolute; bottom: -57px; color: #70776b; font-size: 10px; }.workflow-label-model { left: 17px; }.workflow-label-tools { left: 71px; }
.workflow-add-node { position: absolute; z-index: 4; display: grid; width: 19px; height: 19px; padding: 0; color: #12140e; font-size: 16px; place-items: center; border: 0; border-radius: 50%; background: #badc63; box-shadow: 0 0 0 3px rgba(186,220,99,.12); }.workflow-add-node:hover { transform: scale(1.13); background: #d8ff70; }.workflow-add-upload { left: 295px; top: 500px; }
.workflow-canvas-hint { position: absolute; right: 22px; bottom: 19px; color: #4f544d; font-size: 10px; pointer-events: none; }.workflow-canvas-toolbar { position: absolute; left: 50%; bottom: 17px; z-index: 8; display: flex; align-items: center; gap: 3px; height: 43px; padding: 5px 7px; transform: translateX(-50%); border: 1px solid #292d2b; border-radius: 10px; background: rgba(20,23,21,.94); box-shadow: 0 12px 32px rgba(0,0,0,.35); }.workflow-canvas-toolbar button { display: grid; width: 27px; height: 29px; padding: 0; color: #8f9687; font-size: 18px; place-items: center; border: 0; border-radius: 6px; background: transparent; }.workflow-canvas-toolbar button:hover { color: #e9f3d1; background: #2a3026; }.workflow-canvas-toolbar span { min-width: 37px; color: #8f9687; font-size: 10px; text-align: center; }.workflow-toolbar-divider { width: 1px !important; min-width: 1px !important; height: 20px; margin: 0 3px; background: #363a35; }.workflow-run-button { color: #11140e !important; background: #c8f03e !important; }.workflow-run-button.is-running { color: #c8f03e !important; background: #3d4e25 !important; }
.workflow-minimap { position: absolute; right: 23px; bottom: 67px; z-index: 5; width: 130px; height: 94px; overflow: hidden; border: 1px solid #242725; border-radius: 9px; background: rgba(17,19,18,.88); box-shadow: 0 10px 20px rgba(0,0,0,.22); }.minimap-line { position: absolute; height: 1px; background: #677452; transform-origin: left; }.minimap-line-one { left: 26px; top: 47px; width: 31px; transform: rotate(-13deg); }.minimap-line-two { left: 57px; top: 40px; width: 30px; transform: rotate(-14deg); }.minimap-line-three { left: 87px; top: 33px; width: 22px; transform: rotate(33deg); }.minimap-dot { position: absolute; width: 10px; height: 7px; border: 1px solid #606b50; border-radius: 2px; background: #252c20; }.minimap-dot-one { left: 17px; top: 44px; }.minimap-dot-two { left: 52px; top: 33px; }.minimap-dot-three { left: 83px; top: 27px; }
.workflow-inspector { position: absolute; z-index: 10; top: 0; bottom: 0; left: 0; width: 250px; border-right: 1px solid #262927; background: rgba(13,15,14,.97); transform: translateX(-100%); transition: transform .25s ease; }.workflow-inspector.is-open { transform: translateX(0); }.workflow-inspector-close { position: absolute; top: 16px; right: 15px; width: 27px; height: 27px; color: #8b9188; border: 0; border-radius: 6px; background: transparent; font-size: 19px; }.workflow-inspector-close:hover { color: #fff; background: #252925; }.workflow-inspector-inner { padding: 56px 22px 20px; }.workflow-inspector-kicker { color: #8fbb40; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }.workflow-inspector h2 { margin-top: 10px; color: #e6e9e1; font: 700 19px var(--font-display); }.workflow-inspector p { margin-top: 8px; color: #747b71; font-size: 11px; line-height: 1.5; }.workflow-inspector-divider { height: 1px; margin: 24px 0; background: #282c29; }.workflow-inspector-empty { display: flex; align-items: center; gap: 10px; color: #626960; }.workflow-inspector-empty span { font-size: 22px; }.workflow-inspector-empty small { font-size: 10px; line-height: 1.4; }
@media (max-width: 720px) { .workflow-breadcrumb strong:first-of-type, .workflow-environment, .workflow-editor-search { display: none; }.workflow-node-schedule { left: 50px; }.workflow-node-agent { left: 280px; }.workflow-node-transform { left: 500px; }.workflow-node-database { left: 760px; }.workflow-node-upload { left: 50px; }.workflow-add-upload { left: 220px; } }

/* Workflow editor white mode: focused canvas without editor chrome. */
#workflowPage.workflow-page { position: absolute; inset: 0; display: block; padding: 0; overflow: hidden; color: #30333b; background: #f8f9fb; }
#workflowPage[hidden] { display: none; }
#workflowPage .workflow-editor { position: absolute; inset: 0; display: flex; background: #f8f9fb; }
#workflowPage .workflow-editor-topbar, #workflowPage .workflow-inspector { display: none !important; }
#workflowPage .workflow-workspace { position: relative; display: flex; flex: 1; min-height: 0; }
#workflowPage .workflow-canvas { position: relative; flex: 1; min-width: 0; overflow: hidden; cursor: grab; background: #fafbfc; }
#workflowPage .workflow-canvas.is-panning { cursor: grabbing; }
#workflowPage .workflow-canvas-grid { position: absolute; inset: 0; pointer-events: none; opacity: .9; background-image: radial-gradient(circle, #c9cdd4 1.05px, transparent 1.25px); background-size: 19px 19px; background-position: 9px 9px; }
#workflowPage .workflow-canvas-world { position: absolute; inset: 0; transform-origin: 0 0; }
#workflowPage #workflowNodeLayer { position: absolute; inset: 0; }
#workflowPage .workflow-connections { position: absolute; inset: 0; width: 1500px; height: 720px; overflow: visible; pointer-events: none; }
#workflowPage .workflow-connection { fill: none; stroke: #7b8472; stroke-width: 1.5; opacity: .9; }
#workflowPage .workflow-connection-glow { fill: none; stroke: #b3db3d; stroke-width: 5; opacity: .12; filter: url(#workflowGlow); }
#workflowPage .workflow-node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 11px; width: 190px; min-height: 58px; padding: 10px 13px 10px 10px; color: #343840; border: 1px solid #d9dde3; border-radius: 9px; background: #fff; box-shadow: 0 8px 22px rgba(39,48,61,.09), inset 0 1px #fff; cursor: grab; user-select: none; }
#workflowPage .workflow-node:hover, #workflowPage .workflow-node.is-selected { border-color: #a5b77a; box-shadow: 0 0 0 2px rgba(164,190,76,.16), 0 10px 24px rgba(39,48,61,.12); }
#workflowPage .workflow-node.is-dragging { cursor: grabbing; opacity: .9; }
#workflowPage .workflow-node h3 { color: #30343b; font: 600 12px/1.25 var(--font-display); }
#workflowPage .workflow-node p { margin-top: 3px; overflow: hidden; color: #848b96; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
#workflowPage .workflow-node-icon { display: grid; width: 33px; height: 33px; flex: 0 0 33px; color: #65705d; font-size: 16px; place-items: center; border: 1px solid #dce5cc; border-radius: 7px; background: #f0f6e5; }
#workflowPage .workflow-node-icon-warning { color: #d96d49; border-color: #f4d7cb; background: #fff1ec; }
#workflowPage .workflow-node-trigger { border-color: #edc8ba; }.workflow-node-trigger .workflow-node-icon { color: #df734f; background: #fff0e9; border-color: #f5d2c6; }
#workflowPage .workflow-node-agent { left: 380px; top: 260px; width: 150px; }.workflow-node-transform { left: 650px; top: 205px; width: 180px; }.workflow-node-database { left: 930px; top: 295px; width: 175px; }.workflow-node-upload { left: 125px; top: 475px; width: 170px; border-color: #c5d5ef; background: #fff; }.workflow-node-upload .workflow-node-icon { color: #5e8dde; border-color: #c9d8f4; background: #edf4ff; }
#workflowPage .workflow-node-port, #workflowPage .workflow-node-socket { position: absolute; display: grid; width: 12px; height: 12px; padding: 0; color: #78808a; font-size: 12px; line-height: 1; place-items: center; border: 1px solid #929aa4; border-radius: 50%; background: #fff; }.workflow-node-port:hover, .workflow-node-port.is-connecting { color: #fff; border-color: #94b92e; background: #a8cc3d; }.workflow-port-left { left: -7px; top: 50%; transform: translateY(-50%); }.workflow-port-right { right: -7px; top: 50%; transform: translateY(-50%); }.workflow-node-socket { width: 18px; height: 18px; color: #4c5b32; border: 1px solid #bbc995; background: #e9f2ce; }.workflow-node-socket.is-added { color: #fff; background: #8ea93a; }.workflow-socket-model { left: 28px; bottom: -37px; }.workflow-socket-tools { left: 84px; bottom: -37px; }.workflow-socket-label { position: absolute; bottom: -57px; color: #9299a3; font-size: 10px; }.workflow-label-model { left: 17px; }.workflow-label-tools { left: 71px; }
#workflowPage .workflow-add-node { position: absolute; z-index: 4; display: grid; width: 19px; height: 19px; padding: 0; color: #fff; font-size: 16px; place-items: center; border: 0; border-radius: 50%; background: #9ebd38; box-shadow: 0 2px 8px rgba(111,140,30,.3); }.workflow-add-node:hover { transform: scale(1.13); background: #86a51e; }.workflow-add-upload { left: 295px; top: 500px; }
#workflowPage .workflow-add-menu { position: absolute; left: 320px; top: 493px; z-index: 7; display: flex; flex-direction: column; gap: 3px; min-width: 160px; padding: 6px; border: 1px solid #d8dde4; border-radius: 8px; background: #fff; box-shadow: 0 10px 25px rgba(45,55,70,.16); }.workflow-add-menu[hidden] { display: none; }.workflow-add-menu button { padding: 8px 10px; color: #4c535d; text-align: left; border: 0; border-radius: 5px; background: transparent; font-size: 11px; }.workflow-add-menu button:hover { color: #273116; background: #eff6dc; }
#workflowPage .workflow-canvas-hint { position: absolute; right: 22px; bottom: 19px; color: #9ba1aa; font-size: 10px; pointer-events: none; }.workflow-canvas-toolbar { position: absolute; left: 50%; bottom: 17px; z-index: 8; display: flex; align-items: center; gap: 3px; height: 43px; padding: 5px 7px; transform: translateX(-50%); border: 1px solid #d8dde4; border-radius: 10px; background: rgba(255,255,255,.96); box-shadow: 0 8px 25px rgba(42,50,64,.13); }.workflow-canvas-toolbar button { display: grid; width: 27px; height: 29px; padding: 0; color: #747c87; font-size: 18px; place-items: center; border: 0; border-radius: 6px; background: transparent; }.workflow-canvas-toolbar button:hover { color: #526525; background: #f0f5e3; }.workflow-canvas-toolbar span { min-width: 37px; color: #838b95; font-size: 10px; text-align: center; }.workflow-toolbar-divider { width: 1px !important; min-width: 1px !important; height: 20px; margin: 0 3px; background: #e0e3e7; }.workflow-run-button { color: #fff !important; background: #9fbe39 !important; }.workflow-run-button.is-running { color: #fff !important; background: #647a25 !important; }
#workflowPage .workflow-minimap { position: absolute; right: 23px; bottom: 67px; z-index: 5; width: 130px; height: 94px; overflow: hidden; border: 1px solid #e1e4e8; border-radius: 9px; background: rgba(255,255,255,.9); box-shadow: 0 8px 20px rgba(45,55,70,.1); }.minimap-line { position: absolute; height: 1px; background: #a8b28f; transform-origin: left; }.minimap-line-one { left: 26px; top: 47px; width: 31px; transform: rotate(-13deg); }.minimap-line-two { left: 57px; top: 40px; width: 30px; transform: rotate(-14deg); }.minimap-line-three { left: 87px; top: 33px; width: 22px; transform: rotate(33deg); }.minimap-dot { position: absolute; width: 10px; height: 7px; border: 1px solid #aab697; border-radius: 2px; background: #edf3df; }.minimap-dot-one { left: 17px; top: 44px; }.minimap-dot-two { left: 52px; top: 33px; }.minimap-dot-three { left: 83px; top: 27px; }
.workflow-running .workflow-connection { stroke: #7d9d31; stroke-dasharray: 5 5; animation: workflowFlow 1.2s linear infinite; }@keyframes workflowFlow { to { stroke-dashoffset: -20; } }
@media (max-width: 720px) { #workflowPage .workflow-node-agent { left: 280px; } #workflowPage .workflow-node-transform { left: 500px; } #workflowPage .workflow-node-database { left: 760px; } }

/* Bottom node tray */
#workflowPage .workflow-editor { flex-direction: column; }
#workflowPage .workflow-workspace { flex: 1 1 auto; min-height: 0; }
#workflowPage .workflow-node-tray { display: flex; align-items: center; gap: 20px; min-height: 82px; padding: 12px 22px; border-top: 1px solid #dfe3e8; background: rgba(255,255,255,.98); box-shadow: 0 -5px 18px rgba(42,50,64,.08); }
#workflowPage .workflow-node-tray-heading { display: flex; flex-direction: column; flex: 0 0 150px; gap: 4px; }
#workflowPage .workflow-node-tray-heading strong { color: #303740; font: 700 12px var(--font-display); }
#workflowPage .workflow-node-tray-heading span { color: #9199a4; font-size: 10px; line-height: 1.35; }
#workflowPage .workflow-node-tray-items { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
#workflowPage .workflow-node-tray-item { display: flex; align-items: center; gap: 8px; min-width: 145px; height: 50px; padding: 7px 10px; text-align: left; border: 1px solid #d9dee5; border-radius: 8px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
#workflowPage .workflow-node-tray-item:hover:not(:disabled) { border-color: #a7bd6f; background: #f8fbed; box-shadow: 0 4px 12px rgba(54,69,35,.1); }
#workflowPage .workflow-node-tray-item:disabled { cursor: default; opacity: .52; }
#workflowPage .workflow-node-tray-icon { display: grid; width: 28px; height: 28px; flex: 0 0 28px; color: #6a7956; place-items: center; border: 1px solid #d9e4c5; border-radius: 6px; background: #f1f7e7; font-size: 14px; }
#workflowPage .workflow-node-tray-item:first-child .workflow-node-tray-icon { color: #dc754f; border-color: #f1d4ca; background: #fff2ed; }
#workflowPage .workflow-node-tray-item span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#workflowPage .workflow-node-tray-item strong { overflow: hidden; color: #3d444d; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
#workflowPage .workflow-node-tray-item small { color: #9aa1ab; font-size: 9px; }
@media (max-width: 700px) { #workflowPage .workflow-node-tray { align-items: flex-start; flex-direction: column; gap: 8px; padding: 10px 14px; } #workflowPage .workflow-node-tray-heading { flex-basis: auto; } #workflowPage .workflow-node-tray-items { width: 100%; } }

/* Reliable mouse-left node dragging and visible bottom add tray. */
#workflowPage .workflow-canvas,
#workflowPage .workflow-node,
#workflowPage .workflow-node-tray-item { touch-action: none; }
#workflowPage .workflow-node { user-select: none; -webkit-user-select: none; }
#workflowPage .workflow-node.is-dragging { z-index: 20; cursor: grabbing; box-shadow: 0 14px 30px rgba(35,48,63,.2), 0 0 0 2px rgba(158,189,56,.24); }
#workflowPage .workflow-node-tray { position: relative; z-index: 30; display: flex !important; visibility: visible !important; }

/* Node delete and drag/drop feedback */
#workflowPage .workflow-node { position: absolute; }
#workflowPage .workflow-node-delete { position: absolute; top: 5px; right: 6px; z-index: 4; display: grid; width: 20px; height: 20px; padding: 0; color: #98a0a9; place-items: center; border: 0; border-radius: 5px; background: transparent; font-size: 16px; line-height: 1; opacity: 0; cursor: pointer; transition: opacity .15s, color .15s, background .15s; }
#workflowPage .workflow-node:hover .workflow-node-delete, #workflowPage .workflow-node.is-selected .workflow-node-delete { opacity: 1; }
#workflowPage .workflow-node-delete:hover { color: #b84d40; background: #fff0ed; }
#workflowPage .workflow-node-copy { min-width: 0; padding-right: 18px; }
#workflowPage .workflow-canvas.is-drop-target { background-color: #f4f9e9; box-shadow: inset 0 0 0 2px rgba(151,185,49,.45); }
#workflowPage .workflow-node-tray-item.is-dragging { opacity: .55; border-color: #9fbd45; background: #f2f8df; }
#workflowPage .workflow-node-tray-item { cursor: grab; }
#workflowPage .workflow-node-tray-item:active { cursor: grabbing; }
body.dashboard-home .workflow-apps-dock { display: flex; align-items: center; gap: 9px; min-height: 68px; padding: 9px 22px; border-top: 1px solid #e1e5ea; background: #fff; }
body.dashboard-home .workflow-apps-dock-copy { display: flex; min-width: 145px; flex-direction: column; gap: 3px; }
body.dashboard-home .workflow-apps-dock-copy strong { color: #303740; font: 700 12px var(--font-display); }
body.dashboard-home .workflow-apps-dock-copy span { color: #9199a4; font-size: 10px; }
body.dashboard-home .workflow-app-card { display: flex; align-items: center; gap: 8px; min-width: 155px; height: 46px; padding: 6px 9px; text-align: left; border: 1px solid #d9dee5; border-radius: 8px; background: #fff; cursor: pointer; }
body.dashboard-home .workflow-app-card:hover { border-color: #b3cf57; background: #f7fbe9; }
body.dashboard-home .workflow-app-card > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
body.dashboard-home .workflow-app-card strong { color: #3d444d; font-size: 10px; }
body.dashboard-home .workflow-app-card small { color: #6d9421; font-size: 9px; }
body.dashboard-home .workflow-app-logo { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; font-size: 16px; font-weight: 700; }
body.dashboard-home .workflow-app-logo.whatsapp { color: #1cae54; background: #e6f7eb; }
body.dashboard-home .workflow-app-logo.discord { color: #5865f2; background: #eef0ff; }
body.dashboard-home .workflow-app-arrow { margin-left: auto; color: #9da6af; }
body.dashboard-home .workflow-app-open { margin-left: auto; padding: 8px 10px; color: #5d6b43; font: 700 10px var(--font-body); border: 0; background: transparent; cursor: pointer; }
@media (max-width: 800px) { body.dashboard-home .workflow-apps-dock { overflow-x: auto; } }

/* Live AI workforce card: an extension of the existing dashboard surface. */
.agent-workforce-card { margin: 10px 0; }
.agent-workforce-card .dashboard-card-link { color: #71717a; font-size: 10px; font-weight: 700; border: 0; background: transparent; }
.agent-workforce-card .dashboard-card-link:hover { color: #111214; }
.agent-workforce-card .dashboard-card-link span { color: #8cae20; margin-left: 3px; }
.agent-workforce-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.agent-workforce-item { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px; border: 1px solid #ededed; border-radius: 12px; background: #fafafa; }
.agent-workforce-avatar { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; overflow: hidden; color: #fff; font-size: 10px; font-weight: 800; border-radius: 9px; background: #a6c83a; }
.agent-workforce-avatar img { width: 100%; height: 100%; object-fit: cover; }
.agent-workforce-copy { min-width: 0; }
.agent-workforce-copy strong, .agent-workforce-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-workforce-copy strong { color: #242426; font-size: 10px; font-weight: 800; }
.agent-workforce-copy small { margin-top: 3px; color: #999a9d; font-size: 8px; }
.agent-workforce-status { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; color: #75931c; font-size: 8px; font-weight: 700; }
.agent-workforce-status i { width: 5px; height: 5px; border-radius: 50%; background: #a2c931; }
.agent-workforce-status.is-draft { color: #999; }.agent-workforce-status.is-draft i { background: #c0c1c3; }
.agent-workforce-empty { padding: 13px; color: #999a9d; font-size: 10px; border: 1px dashed #dfdfdf; border-radius: 10px; }
@media (max-width: 900px) { .agent-workforce-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .agent-workforce-list { grid-template-columns: 1fr; } }


/* Dashboard tool modules — restrained Coming Soon workspaces. */
.tool-module-host {
  min-height: 100%;
  padding: clamp(18px, 3vw, 42px);
}
.tool-module-host[hidden] { display: none; }
.tool-coming-soon {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: min(610px, calc(100vh - 132px));
  overflow: hidden;
  border: 1px solid rgba(25, 28, 25, .1);
  border-radius: 24px;
  color: #f5f6ef;
  background: #161916;
  box-shadow: 0 20px 55px rgba(16, 20, 15, .12);
}
.tool-coming-soon__panel {
  position: relative;
  z-index: 2;
  align-self: center;
  width: min(100%, 620px);
  padding: clamp(32px, 6vw, 78px);
}
.tool-coming-soon__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  color: rgba(245, 246, 239, .68);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tool-coming-soon__eyebrow i,
.tool-coming-soon__status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dashboard-accent, #c8f03e);
  box-shadow: 0 0 0 5px rgba(200, 240, 62, .12);
}
.tool-coming-soon h1 {
  max-width: 560px;
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -.07em;
  line-height: .96;
}
.tool-coming-soon h1 em { color: var(--dashboard-accent, #c8f03e); font-style: normal; }
.tool-coming-soon p {
  max-width: 465px;
  margin: 23px 0 0;
  color: rgba(245, 246, 239, .62);
  font-size: 15px;
  line-height: 1.65;
}
.tool-coming-soon__badge {
  display: inline-flex;
  margin-top: 30px;
  padding: 7px 11px;
  border: 1px solid rgba(245, 246, 239, .15);
  border-radius: 999px;
  color: rgba(245, 246, 239, .78);
  background: rgba(255, 255, 255, .06);
  font-size: 11px;
  font-weight: 700;
}
.tool-coming-soon--automation { background: radial-gradient(circle at 82% 22%, rgba(200, 240, 62, .23), transparent 31%), #151914; }
.tool-coming-soon--automation::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: .34; background-image: linear-gradient(rgba(200,240,62,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(200,240,62,.13) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg, transparent 20%, #000 100%); }
.tool-coming-soon__glow { position: absolute; z-index: 1; top: 17%; right: 12%; width: 190px; height: 190px; border: 1px solid rgba(200, 240, 62, .52); border-radius: 50%; box-shadow: 0 0 0 24px rgba(200,240,62,.06), 0 0 0 48px rgba(200,240,62,.04); }
.tool-coming-soon__workflow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 32px; color: rgba(245,246,239,.66); font-size: 11px; font-weight: 700; }
.tool-coming-soon__workflow span { padding: 8px 10px; border: 1px solid rgba(245,246,239,.12); border-radius: 8px; background: rgba(0,0,0,.22); }
.tool-coming-soon__workflow b { color: var(--dashboard-accent, #c8f03e); }
.tool-coming-soon--video { background: linear-gradient(135deg, #171325 0%, #211948 52%, #121317 100%); }
.tool-coming-soon--video::before { content: ''; position: absolute; z-index: 0; inset: 14% 8% 12% 54%; border-radius: 24px; background: linear-gradient(145deg, rgba(182,139,255,.56), rgba(76,50,143,.13)); transform: rotate(-9deg); box-shadow: 0 20px 50px rgba(10, 0, 35, .34); }
.tool-coming-soon--video h1 em { color: #d4b6ff; }
.tool-coming-soon--video .tool-coming-soon__eyebrow i { background: #c39cff; box-shadow: 0 0 0 5px rgba(195,156,255,.12); }
.tool-coming-soon__film { position: absolute; z-index: 1; right: 8%; bottom: 16%; display: flex; gap: 10px; transform: rotate(-9deg); }
.tool-coming-soon__film span { width: 54px; height: 74px; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.03)); }
.tool-coming-soon__film span:nth-child(2) { transform: translateY(-18px); background: linear-gradient(145deg, #b68bff, #6c4dbb); }
.tool-coming-soon__preview { display: inline-flex; align-items: center; gap: 8px; margin-top: 31px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); font: 700 11px 'Inter', sans-serif; }
.tool-coming-soon__preview span { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; color: #201735; background: #d4b6ff; font-size: 8px; }
.tool-coming-soon--image { color: #18201b; background: linear-gradient(135deg, #f5efe4, #e8f4d9); }
.tool-coming-soon--image h1 em { color: #588f55; }
.tool-coming-soon--image p { color: rgba(24,32,27,.65); }
.tool-coming-soon--image .tool-coming-soon__eyebrow { color: rgba(24,32,27,.62); }
.tool-coming-soon--image .tool-coming-soon__eyebrow i { background: #e57656; box-shadow: 0 0 0 5px rgba(229,118,86,.13); }
.tool-coming-soon--image .tool-coming-soon__badge { border-color: rgba(24,32,27,.14); color: rgba(24,32,27,.7); background: rgba(255,255,255,.48); }
.tool-coming-soon__artboard { position: absolute; z-index: 0; right: 8%; bottom: 11%; display: grid; grid-template-columns: repeat(2, 108px); gap: 10px; transform: rotate(8deg); }
.tool-coming-soon__artboard i { height: 108px; border-radius: 17px; background: #eaa67d; box-shadow: 0 13px 22px rgba(49,65,39,.12); }
.tool-coming-soon__artboard i:nth-child(2) { background: #9fc8dd; transform: translateY(-27px); }
.tool-coming-soon__artboard i:nth-child(3) { background: #8fbd76; }
.tool-coming-soon__artboard i:nth-child(4) { background: #efcc63; transform: translateY(-27px); }
.tool-coming-soon__prompt { display: flex; align-items: center; gap: 9px; width: min(100%, 390px); margin-top: 30px; padding: 11px 13px; border: 1px solid rgba(24,32,27,.1); border-radius: 11px; color: rgba(24,32,27,.48); background: rgba(255,255,255,.55); font-size: 11px; }
.tool-coming-soon__prompt span:first-child { color: #e57656; font-size: 15px; }
.tool-coming-soon--hosting { background: radial-gradient(circle at 75% 30%, rgba(71,151,255,.26), transparent 29%), linear-gradient(135deg, #101922, #162f45); }
.tool-coming-soon--hosting h1 em { color: #81c6ff; }
.tool-coming-soon--hosting .tool-coming-soon__eyebrow i { background: #81c6ff; box-shadow: 0 0 0 5px rgba(129,198,255,.12); }
.tool-coming-soon__server-stack { position: absolute; z-index: 1; right: 11%; bottom: 15%; width: 220px; }
.tool-coming-soon__server-stack i { position: relative; display: block; height: 46px; margin-top: 10px; border: 1px solid rgba(129,198,255,.35); border-radius: 12px; background: linear-gradient(90deg, rgba(129,198,255,.22), rgba(129,198,255,.04)); box-shadow: 0 12px 26px rgba(0,0,0,.15); }
.tool-coming-soon__server-stack i::before { content: ''; position: absolute; top: 50%; left: 14px; width: 6px; height: 6px; border-radius: 50%; background: #81c6ff; box-shadow: 12px 0 0 rgba(129,198,255,.48); transform: translateY(-50%); }
.tool-coming-soon__status { display: inline-flex; align-items: center; gap: 9px; margin-top: 30px; padding: 9px 11px; border: 1px solid rgba(129,198,255,.2); border-radius: 9px; color: rgba(245,246,239,.7); background: rgba(129,198,255,.08); font-size: 11px; font-weight: 700; }
.tool-coming-soon__status span { background: #81c6ff; box-shadow: 0 0 0 4px rgba(129,198,255,.12); }
@media (max-width: 760px) {
  .tool-module-host { padding: 14px; }
  .tool-coming-soon { min-height: 520px; border-radius: 18px; }
  .tool-coming-soon__panel { align-self: start; padding: 34px 25px; }
  .tool-coming-soon h1 { font-size: clamp(38px, 12vw, 56px); }
  .tool-coming-soon__glow, .tool-coming-soon__film, .tool-coming-soon__artboard, .tool-coming-soon__server-stack { right: 7%; bottom: 8%; opacity: .55; transform: scale(.7); transform-origin: bottom right; }
}
@media (prefers-reduced-motion: reduce) { .tool-coming-soon * { transition: none !important; animation: none !important; } }