/* AI Mode styles, part 4 of 6 (loaded in order). */
    .log-settings-row { margin-bottom:8px; }
    .log-settings-label {
      display:block; font-size:11px; color:#4ec9b0; font-weight:600; margin-bottom:3px;
    }
    .log-settings-select {
      width:100%; background:#1e1e1e; border:1px solid #555; border-radius:4px;
      color:#d4d4d4; padding:6px 8px; font-size:12px; font-family:inherit; outline:none;
      cursor:pointer;
    }
    .log-settings-select:focus { border-color:#dcdcaa; }
    .log-settings-select option { background:#1e1e1e; color:#d4d4d4; }
    .log-settings-save {
      background:#4ec9b0; color:#1e1e1e; border:none; padding:6px 14px;
      border-radius:4px; cursor:pointer; font-size:12px; font-weight:700;
      font-family:inherit; transition:all .2s;
    }
    .log-settings-save:hover { filter:brightness(1.15); }
    .log-settings-save:disabled { opacity:.4; cursor:default; }
    .log-settings-refresh {
      background:#333; color:#d4d4d4; border:1px solid #555; padding:6px 10px;
      border-radius:4px; cursor:pointer; font-size:11px; font-family:inherit;
    }
    .log-settings-refresh:hover { background:#444; }

    
    .log-query-btn {
      background:linear-gradient(135deg,#dcdcaa,#ce9178); color:#1e1e1e; border:none;
      padding:4px 10px; border-radius:3px; cursor:pointer; font-size:11px;
      font-family:inherit; font-weight:700; transition:all .2s;
    }
    .log-query-btn:hover { filter:brightness(1.15); transform:scale(1.03); }
    .log-query-panel {
      background:#252525; border:1px solid #444; border-radius:6px;
      padding:12px; margin-bottom:10px;
    }
    .log-query-header {
      display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;
    }
    .log-query-close {
      background:none; border:none; color:#858585; font-size:18px; cursor:pointer; padding:0 4px;
    }
    .log-query-close:hover { color:#fff; }
    .log-query-stats {
      display:flex; gap:12px; flex-wrap:wrap; margin-bottom:10px; font-size:11px;
    }
    .log-query-stat {
      background:#333; border-radius:4px; padding:4px 10px; color:#d4d4d4;
    }
    .log-query-stat strong { color:#4ec9b0; }
    .log-query-input-row { display:flex; gap:6px; margin-bottom:10px; }
    .log-query-input {
      flex:1; background:#1e1e1e; border:1px solid #555; border-radius:4px;
      color:#d4d4d4; padding:6px 10px; font-size:12px; font-family:inherit;
      outline:none;
    }
    .log-query-input:focus { border-color:#4ec9b0; }
    .log-query-run {
      background:#4ec9b0; color:#1e1e1e; border:none; padding:6px 14px;
      border-radius:4px; cursor:pointer; font-size:12px; font-weight:700;
      font-family:inherit; transition:all .2s;
    }
    .log-query-run:hover { filter:brightness(1.15); }
    .log-query-run:disabled { opacity:.5; cursor:wait; }
    .log-query-results {
      max-height:200px; overflow-y:auto; font-size:12px; line-height:1.6;
    }
    .log-query-results .query-answer {
      background:#1e1e1e; border-left:3px solid #4ec9b0; padding:8px 12px;
      border-radius:3px; color:#d4d4d4; white-space:pre-wrap;
    }
    .log-query-results .query-error {
      background:#1e1e1e; border-left:3px solid #f48771; padding:8px 12px;
      border-radius:3px; color:#f48771;
    }
    .log-query-results .query-loading {
      color:#858585; font-style:italic; padding:8px;
    }
    .log-query-recent {
      margin-top:8px; font-size:11px;
    }
    .log-query-recent-title { color:#858585; margin-bottom:4px; }
    .log-query-recent-item {
      color:#569cd6; cursor:pointer; padding:2px 0;
    }
    .log-query-recent-item:hover { text-decoration:underline; }

    
    .log-build-btn {
      background:linear-gradient(135deg,#569cd6,#4ec9b0); color:#1e1e1e; border:none;
      padding:4px 10px; border-radius:3px; cursor:pointer; font-size:11px;
      font-family:inherit; font-weight:700; transition:all .2s;
    }
    .log-build-btn:hover { filter:brightness(1.15); transform:scale(1.03); }
    .log-build-btn:disabled { opacity:.5; cursor:wait; }
    .log-build-btn .build-icon { display:inline-block; margin-right:4px; }

    
    .log-build-output {
      margin-top:8px; padding:8px; background:#252525; border-radius:4px;
      border:1px solid #333; display:none;
    }
    .log-build-output.visible { display:block; }
    .log-build-output pre {
      margin:0; color:#d4d4d4; font-size:11px; line-height:1.5;
      white-space:pre-wrap; word-break:break-all;
    }
    .log-build-output .build-success { color:#4ec9b0; font-weight:700; }
    .log-build-output .build-error { color:#f48771; font-weight:700; }
    .log-build-output .build-file { color:#569cd6; }
    .log-build-output .build-path { color:#ce9178; }

    

    
    @media (max-width: 1100px) {
      .topbar-logo img { height:80px !important; }
      
      .topbar-nav-inline a:nth-child(n+2) { display:none !important; }
      .topbar-nav-sep { display:none !important; }
      
      .topbar-right { gap:8px !important; }
      .btn-demo { padding:7px 14px !important; font-size:13px !important; white-space:nowrap; }
    }

    
    @media (max-width: 1200px) {
      .sidebar { width:0; min-width:0; padding:0; border-color:transparent; overflow:hidden;
        position:fixed !important; top:150px; left:0; bottom:0;
        z-index:200; box-shadow:4px 0 24px rgba(0,0,0,.15);
        transition:width .28s var(--tl-ease-emphasized), min-width .28s var(--tl-ease-emphasized), padding .28s var(--tl-ease-emphasized);
      }
      .sidebar.mobile-open {
        width:280px !important; min-width:280px !important;
        padding:10px 18px 8px !important; overflow-y:auto;
      }
      
      /* The reopen button sat on top of the open sidebar's heading. */
      .layout:has(.sidebar.mobile-open) .sidebar-reopen { display:none !important; }
      .sidebar-reopen {
        display:flex !important; position:fixed !important;
        top:188px; left:8px; z-index:250 !important;
        width:36px; height:36px;
        background:rgba(255,255,255,.95) !important;
        
        box-shadow:0 2px 8px rgba(0,0,0,.12);
        border-radius:8px !important;
      }
      
      .right-panel { width:280px; min-width:280px; overflow:hidden; }
      .right-panel-reopen {
        position:fixed !important; top:188px; right:8px; z-index:250 !important;
        width:36px; height:36px;
        background:rgba(255,255,255,.95) !important;
        box-shadow:0 2px 8px rgba(0,0,0,.12);
        border-radius:8px !important;
      }
      .right-panel-inner { min-width:0 !important; }
      .right-panel-header { min-width:0 !important; }
      .topbar { padding:0 16px; }
      .topbar-nav-inline a:nth-child(n+4) { display:none; }
      .topbar-nav-sep:nth-child(n+4) { display:none; }
      .topbar-right { gap:12px; }
    }

    
    @media (max-width: 768px) {
      .right-panel {
        position:fixed !important; top:auto !important; right:auto !important;
        bottom:0 !important; left:0 !important;
        width:100% !important; min-width:100% !important;
        height:0 !important; max-height:85vh;
        border-color:transparent; overflow:hidden;
        z-index:200; border-radius:16px 16px 0 0;
        border-top:1px solid rgba(0,61,76,.1);
        box-shadow:0 -4px 24px rgba(0,0,0,.12);
        transition:height .28s var(--tl-ease-emphasized) !important;
        background:var(--tl-white, #FFFFFF);
      }
      .right-panel.mobile-open { height:45vh !important; overflow-y:auto; }
      
      .right-panel .rp-drag-handle {
        display:block; width:100%; padding:10px 0 8px; cursor:grab; text-align:center; flex-shrink:0;
        -webkit-tap-highlight-color:transparent; touch-action:none;
      }
      .right-panel .rp-drag-handle::after {
        content:''; display:block; width:60px; height:5px;
        background:rgba(0,61,76,.35); border-radius:4px; margin:0 auto;
      }
      .right-panel .rp-drag-handle:active::after { background:rgba(0,61,76,.55); }
      .right-panel-inner { min-width:0 !important; padding-top:4px !important; }
      .right-panel-header { min-width:0 !important; border:none !important; padding:8px 16px 6px !important; }
      
      .right-panel.mobile-open .right-panel-header {
        position:absolute !important; top:4px; right:8px; z-index:5;
        padding:0 !important; border:none !important; background:transparent !important;
        height:auto !important; min-width:0 !important; width:auto !important;
      }
      .right-panel.mobile-open .right-panel-label { display:none !important; }
      .right-panel.mobile-open .right-panel-toggle {
        position:relative;
        width:34px !important; height:34px !important; border-radius:50% !important;
        background:rgba(0,61,76,.08) !important; color:rgba(0,61,76,.75) !important;
        border:none !important;
      }
      .right-panel.mobile-open .right-panel-toggle:hover {
        background:rgba(0,61,76,.14) !important; color:rgba(0,61,76,1) !important;
      }
      
      .right-panel.mobile-open .right-panel-toggle svg { display:none !important; }
      .right-panel.mobile-open .right-panel-toggle::before,
      .right-panel.mobile-open .right-panel-toggle::after {
        content:''; position:absolute; left:50%; top:50%;
        width:16px; height:2px; background:currentColor; border-radius:1px;
      }
      .right-panel.mobile-open .right-panel-toggle::before {
        transform:translate(-50%,-50%) rotate(45deg);
      }
      .right-panel.mobile-open .right-panel-toggle::after {
        transform:translate(-50%,-50%) rotate(-45deg);
      }
      
      .right-panel-reopen {
        display:flex !important; position:fixed !important;
        top:88px; right:8px; z-index:250 !important;
        width:36px; height:36px;
        background:rgba(255,255,255,.95) !important;
        
        box-shadow:0 2px 8px rgba(0,0,0,.12);
        border-radius:8px !important;
      }
      
      .sidebar-reopen {
        top:88px !important;
      }
    }

    
    @media (max-width: 768px) {
      
      .topbar { padding:0 16px; height:56px; }
      .topbar-logo img { height:26px !important; }
      .topbar-nav-inline a { display:none !important; }
      .topbar-nav-inline .topbar-nav-sep { display:none !important; }
      .topbar-nav-inline .topbar-ai-exit { display:inline-flex !important; }
      .topbar-right { gap:12px; }
      .topbar-right a { font-size:12px; }
      .topbar-divider { display:none; }
      .topbar-more-btn { display:none !important; }
      .topbar-ai-exit { font-size:12px !important; padding:5px 12px !important; }

      
      .layout { height:calc(100vh - 56px); }

      
      .sidebar.mobile-open { width:70% !important; min-width:0 !important; max-width:260px !important; }

      

      

      
      .chat-messages { padding:20px 16px 24px !important; gap:20px !important; }
      .msg-row { gap:10px !important; }
      .ai-bubble { padding:16px 18px !important; font-size:13.5px !important; border-radius:4px 16px 16px 16px !important; }
      .user-bubble { padding:12px 16px !important; font-size:13.5px !important; border-radius:16px 16px 4px 16px !important; }
      .ai-avatar { width:28px !important; height:28px !important; min-width:28px; border-radius:8px !important; }
      .ai-avatar svg { width:15px !important; height:15px !important; }

      
      .input-bar { padding:10px 12px 16px !important; }
      .input-inner { border-radius:14px !important; padding:8px 10px 8px 14px !important; }
      
      .input-textarea { font-size:16px !important; }
      .send-btn { width:36px !important; height:36px !important; border-radius:9px !important; }

      
      .skills-bar { padding:0 16px 12px !important; }
      .skills-bar-label { font-size:9.5px !important; }
      .skill-chip { font-size:11px !important; padding:6px 10px !important; }

      
      .welcome-state h2 { font-size:24px !important; }
      .welcome-state p { font-size:13px !important; }
      .welcome-sparkle { width:56px !important; height:56px !important; }
      .welcome-sparkle svg { width:28px !important; height:28px !important; }
      .welcome-prompts { grid-template-columns:1fr !important; max-width:100% !important; gap:10px !important; }
      .welcome-prompt-card { padding:14px 16px !important; }
      .welcome-prompt-card .wp-title { font-size:12px !important; }
      .welcome-prompt-card .wp-desc { font-size:11px !important; }
      .welcome-state .input-bar { width:100% !important; padding:16px 0 4px !important; }

      
      .inline-stats-row { flex-wrap:wrap !important; gap:8px !important; }
      .inline-stat { min-width:calc(50% - 4px) !important; flex:1 1 calc(50% - 4px) !important; }

      
      .followup-chips { flex-wrap:wrap !important; }
      .followup-chip { font-size:12px !important; }

      
      .chat-suggestion-chips { flex-wrap:wrap !important; }
      .chat-chip { font-size:12px !important; padding:8px 14px !important; }

      
      .source-ref { width:18px !important; height:18px !important; font-size:9.5px !important; }

      
      .modal-overlay { padding:0 !important; align-items:flex-end !important; }
      .modal-box {
        width:100% !important; max-width:100% !important;
        border-radius:16px 16px 0 0 !important;
        padding:28px 24px !important;
        max-height:92vh !important;
      }
      .form-grid { grid-template-columns:1fr !important; gap:8px !important; }

      
      .video-lightbox-overlay { padding:12px !important; }
      .video-lightbox-box { border-radius:12px !important; }

      
      .visual-lightbox-overlay { padding:12px !important; }
      .visual-lightbox-box { padding:16px 16px 12px !important; border-radius:12px !important; }

      
      .rp-video-thumb { height:100px !important; }
      .rp-link-card { padding:10px 12px !important; }

      
      .typing-bubble { padding:10px 16px !important; }
    }

    
    @media (max-width: 480px) {
      .topbar { padding:0 12px; }
      .sidebar.mobile-open { width:85% !important; min-width:0 !important; max-width:300px !important; }
      .chat-messages { padding:16px 12px 20px !important; }
      .ai-bubble { padding:14px 16px !important; max-width:100% !important; }
      .input-bar { padding:8px 8px 12px !important; }
      .welcome-state { padding:12px 12px 20px !important; }
      .welcome-state h2 { font-size:20px !important; }
      .modal-box { padding:24px 18px !important; }
    }

    
    @media (min-width: 1800px) {
      .topbar { padding:0 48px; }
      .sidebar { width:340px; min-width:340px; padding:18px 28px 0; }
      .right-panel { width:380px; min-width:380px; }
      .right-panel-inner { padding:0 24px 28px; }
      .msg-row { max-width:1000px; }
      .typing-row { max-width:1000px; }
      .ai-bubble { font-size:15.5px; padding:28px 32px; }
      .user-bubble { font-size:15.5px; padding:16px 22px; max-width:660px; }
      .chat-messages { padding:36px 48px 40px; gap:32px; }
      .chi-name { font-size:13.5px; }
      .chi-time { font-size:12px; }
      .chat-history-label { font-size:11px; letter-spacing:2px; }
      .btn-new-chat { font-size:13.5px; padding:12px; }
      .sidebar-section-label { font-size:11px; }
      .input-bar textarea { font-size:16px; } 
      .welcome-state h2 { font-size:30px; }
      .welcome-state p { font-size:15px; }
      .followup-chip { font-size:14px; padding:10px 18px; }
      .chat-chip { font-size:14px; padding:9px 18px; }
      .rp-section-title { font-size:11.5px; }
    }

    
    @media (min-width: 2400px) {
      .topbar { padding:0 60px; }
      .sidebar { width:400px; min-width:400px; padding:22px 32px 0; }
      .right-panel { width:460px; min-width:460px; }
      .right-panel-inner { padding:0 28px 32px; }
      .msg-row { max-width:1200px; }
      .typing-row { max-width:1200px; }
      .ai-bubble { font-size:16.5px; padding:32px 36px; }
      .user-bubble { font-size:16.5px; padding:18px 24px; max-width:760px; }
      .chat-messages { padding:44px 56px 48px; gap:36px; }
      .chi-name { font-size:14.5px; }
      .chi-time { font-size:12.5px; }
      .btn-new-chat { font-size:14.5px; padding:14px; }
      .input-bar textarea { font-size:16px; }
      .welcome-state h2 { font-size:34px; }
      .followup-chip { font-size:15px; padding:12px 20px; }
      .chat-chip { font-size:15px; padding:10px 20px; }
    }

/*
 * AI Mode — TraceLink DLS 2026 design (supersedes the legacy rules above).
 * Built from the tracelink_rd design system (design-system.css): tokens, the
 * hero AI prompt (.tl-hero__ai), buttons (.tl-btn), FAB, cards, glass and
 * dialogs. Kept last in this sheet and scoped to #page-experience so it
 * wins over the legacy rules without !important where possible.
 */

#page-experience {
  --mz-ease: var(--tl-ease-emphasized, cubic-bezier(0.2, 0, 0, 1));
  --mz-focus-glow: -6px 2px 14px rgba(0,126,158,.45), 6px 2px 14px rgba(0,135,85,.45), 0 2px 6px rgba(91,103,112,.10);
  --mz-rest-shadow: 0 1px 2px rgba(91,103,112,.12), 0 4px 12px rgba(91,103,112,.16);
  font-family: var(--tl-font-sans);
  background: var(--tl-white, #FFFFFF);
}

/* ---------- Sidebar: dark DLS page surface with glow ---------- */
#page-experience .sidebar {
  position: relative; isolation: isolate;
  /* Same family as the site's dark bands: Evergreen -> Deep Ocean -> Cobalt, cyan glow on top */
  background:
    radial-gradient(420px 320px at 12% -4%, rgba(0,167,181,.34), transparent 70%),
    radial-gradient(360px 300px at 100% 62%, rgba(0,135,85,.30), transparent 70%),
    linear-gradient(172deg, var(--tl-evergreen, #006341) 0%, #00544F 30%, var(--tl-deep-ocean, #003D4C) 64%, #003E5E 88%, var(--tl-cobalt, #005587) 118%);
  padding: 20px 16px 0;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.08);
}
/* Network globe image (Seth, DLS, Oct 2026) as texture at 15% opacity, as
   specified. Shipped in the module so it does not depend on theme asset hashes. */
#page-experience .sidebar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../../images/sidebar-network-globe.webp") center / cover no-repeat;
  opacity: .15;
}
#page-experience .sidebar.collapsed::before { display: none; }
#page-experience .sidebar-label {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; color: rgba(255,255,255,.72);
}
#page-experience .sidebar-section-hd { padding: 4px 2px 10px; }

/* Selector options: frosted glass tiles on the dark surface */
#page-experience .sc-card,
#page-experience .persona-card {
  width: 100%; min-height: 48px; padding: 8px 12px; margin-bottom: 8px; gap: 12px;
  /* Frosted: the blur + a light Deep Ocean tint keep the network texture from
     showing through the labels. */
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)), rgba(0,61,76,.14);
  -webkit-backdrop-filter: blur(5px) saturate(130%); backdrop-filter: blur(5px) saturate(130%);
  border: 1px solid rgba(255,255,255,.20); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  transition: background 200ms var(--mz-ease), border-color 200ms var(--mz-ease), transform 200ms var(--mz-ease), box-shadow 200ms var(--mz-ease);
}
#page-experience .sc-card .persona-name,
#page-experience .persona-card .persona-name { color: var(--tl-white, #FFF); font-size: 14px; font-weight: 500; letter-spacing: 0; }
#page-experience .sc-card .persona-desc,
#page-experience .persona-card .persona-desc { color: rgba(255,255,255,.7); }
#page-experience .sc-card .persona-icon-wrap,
#page-experience .persona-card .persona-icon-wrap {
  width: 32px; height: 32px; border-radius: 12px; /* = DLS .tl-icon-card__tile */
  background: rgba(255,255,255,.12); color: var(--tl-white, #FFF);
}
#page-experience .sc-card:hover,
#page-experience .persona-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10)), rgba(0,61,76,.14); border-color: rgba(255,255,255,.42);
  transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px rgba(0,20,26,.25);
}
#page-experience .sc-card:hover .persona-icon-wrap,
#page-experience .persona-card:hover .persona-icon-wrap { background: rgba(255,255,255,.2); color: var(--tl-white, #FFF); }
#page-experience .sc-card:active,
#page-experience .persona-card:active { transform: scale(.98); }