/* Default theme */
      :root {
        --bg: #0b0f14;
        --bg-2: #121820;
        --panel: #0f1621;
        --text: #e6eef5;
        --muted: #9fb1c1;
        --accent: #4aa8ff;
        --accent-2: #2ecc71;
        --accent-3: #ffcc00;
        --danger: #ff6b6b;
        --tab: #1b2430;
        --tab-active: #2a3442;
        --border: #223044;
      }

      /* Dark theme */
      body.dark {
        --bg: #121212;
        --bg-2: #1e1e1e;
        --panel: #1f1f1f;
        --text: #eee;
        --muted: #999;
        --accent: #4aa8ff;
        --accent-2: #2ecc71;
        --accent-3: #ffd166;
        --danger: #ff6b6b;
        --tab: #2a2a2a;
        --tab-active: #333;
        --border: #444;
      }

      /* Light theme */
      body.light {
        --bg: #f9f9f9;
        --bg-2: #fff;
        --panel: #eaeaea;
        --text: #111;
        --muted: #666;
        --accent: #007bff;
        --accent-2: #28a745;
        --accent-3: #ffc107;
        --danger: #dc3545;
        --tab: #ddd;
        --tab-active: #bbb;
        --border: #ccc;
        --bgst: #ddd;
        --bgs: #f9f9f9;
      }

      #playerWrapper {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
        font-family: sans-serif;
      }

      /* Smooth open/close */
      #playerContainer {
        max-height: 0;
        opacity: 0;
        transition:
          max-height 0.3s ease,
          opacity 0.3s ease;
        overflow: hidden;
      }

      /* When open, reveal content */
      #playerWrapper.open #playerContainer {
        max-height: 1500px; /* large enough to fit biggest size */
        opacity: 1;
      }

      #playerContainer iframe,
      #playerContainer input,
      #playerContainer button,
      #playerContainer select {
        display: block;
        box-sizing: border-box;
        margin-top: 5px;
        transition:
          width 0.3s ease,
          height 0.3s ease;
      }

      #playerContainer input,
      #playerContainer button {
        width: 320px;
      }

      .cm-search-highlight {
        background-color: rgba(255, 255, 0, 0.3);
        color: black;
      }
      .cm-search-highlight2 {
        background-color: Yellow;
        color: black;
      }
      /* Works on Firefox */
      * {
        scrollbar-width: thin; /* auto | thin | none */
        scrollbar-color: var(--tab) var(--bg); /* thumb color | track color */
      }

      /* Works on Chrome, Edge, Safari */
      *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }

      *::-webkit-scrollbar-track {
        background: var(--bg-2);
      }

      *::-webkit-scrollbar-thumb {
        background-color: var(--tab);
        border-radius: 6px;
        border: 2px solid var(--bg-2); /* adds spacing */
      }

      *::-webkit-scrollbar-thumb:hover {
        background-color: var(--tab);
      }

      * {
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font-family:
          ui-sans-serif,
          system-ui,
          -apple-system,
          Segoe UI,
          Roboto,
          Inter,
          Arial,
          sans-serif;
      }
      header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: var(--bg-2);
        border-bottom: 1px solid var(--border);
        flex-shrink: 0; /* prevent shrinking */
      }
      body {
        background: var(--bg);
        display: flex;
        flex-direction: column;
      }
      main {
        flex: 1; /* fill remaining space */
        overflow: auto; /* scroll only if content overflows */
      }
      .title {
        font-weight: 700;
        letter-spacing: 0.3px;
        color: var(--text);
      }
      .spacer {
        flex: 1;
      }
      .btn {
        /* --- Transition Properties --- */
        transition-property: background-color, transform; /* What to animate */
        transition-duration: 0.3s; /* How long it takes */
        transition-timing-function: ease-in-out; /* How the speed changes */
        background: var(--panel);
        color: var(--text);
        border: 1px solid var(--border);
        padding: 8px 12px;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
      }
      .btndiv {
        background: transparent;
        color: var(--text);
        border: 1px solid var(--border);
        padding: 4px 8px;
        border-radius: 8px;
        font-weight: 600;
      }
      .clrp {
        background: transparent;
        color: var(--text);
        border: 1px solid var(--border);
        padding: 4px 8px;
        border-radius: 8px;
        font-weight: 600;
        width: 500px; /* width of the button */
        height: 50px; /* height of the button */
      }

      .clrp:hover {
        border-color: var(--accent);
      }
      .btn:hover {
        border-color: var(--accent);
        transform: scale(1.05); /* Slightly enlarge the button */
      }
      .btn.primary {
        background: var(--accent);
        color: #04121e;
        border-color: transparent;
      }
      .btn.success {
        background: var(--accent-2);
        color: #04121e;
      }
      .btn.succes {
        background: var(--accent-3);
        color: #04121e;
      }
      .btn.danger {
        background: var(--danger);
        color: #04121e;
      }
      .btn.ghost {
        background: transparent;
      }

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

      .tabs {
        display: flex;
        gap: 6px;
        align-items: center;
        padding: 8px 12px;
        background: var(--bg-2);
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
        flex-shrink: 0; /* prevents shrinking or growing */
      }
      .tab {
        background: var(--tab);
        color: var(--text);
        padding: 6px 10px;
        border-radius: 8px;
        border: 1px solid var(--border);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        user-select: none;
      }
      .tab.active {
        background: var(--tab-active);
        border-color: var(--accent);
      }
      .tab .name {
        font-weight: 600;
      }
      .tab .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--muted);
      }
      .tab .dot.html {
        background: #ff8b5d;
      }
      .tab .dot.css {
        background: #57d9a3;
      }
      .tab .dot.js {
        background: #ffd166;
      }
      .tab .close {
        margin-left: 2px;
        padding: 0 6px;
        line-height: 1;
        border: 0;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        border-radius: 4px;
        font-weight: 700;
      }
      .tab:hover .close {
        color: #fff;
      }
      .tab .close:hover {
        color: var(--danger);
        background: rgba(255, 255, 255, 0.06);
      }

      .layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        height: calc(100% - 116px);
      }
      @media (max-width: 900px) {
        .layout {
          grid-template-columns: 1fr;
          grid-template-rows: 1fr 1fr;
          height: calc(100% - 116px);
        }
      }

      .pane {
        position: relative;
      }
      .pane.editor {
        border-right: 1px solid var(--border);
      }
      .pane.preview {
        background: #0a0e13;
      }
      .pane-title {
        position: absolute;
        top: 10px;
        right: 12px;
        z-index: 20;
        font-size: 12px;
        color: var(--muted);
        background: rgba(0, 0, 0, 0.3);
        padding: 4px 8px;
        border-radius: 6px;
        border: 1px solid var(--border);
      }

      .CodeMirror {
        height: 100%;
        font-size: 14px;
      }
      .editor-wrap {
        position: absolute;
        inset: 0;
      }
      iframe#preview {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        background: white;
      }

      .kbd {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
          'Liberation Mono', monospace;
        background: #0e141b;
        border: 1px solid var(--border);
        border-bottom-color: #1f2a3a;
        border-radius: 6px;
        padding: 2px 6px;
        color: var(--text);
      }

      /* Modal */
      .modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 9999;
      }
      .modal {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 10px;
        width: min(560px, 92vw);
        max-height: 80vh;
        overflow: auto;
        padding: 18px;
        color: var(--text);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
      }
      .modal h3 {
        margin: 4px 0 10px;
        font-size: 18px;
      }
      .file-list {
        display: grid;
        gap: 8px;
        margin-top: 8px;
      }
      .file-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 8px;
        background: var(--bg);
        border-radius: 8px;
        border: 1px solid var(--border);
      }
      .file-item .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
      .file-item .dot.html {
        background: #ff8b5d;
      }
      .file-item .dot.css {
        background: #57d9a3;
      }
      .file-item .dot.js {
        background: #ffd166;
      }

      .modal-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        margin-top: 14px;
      }
      .modal-tools {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-top: 8px;
        color: var(--muted);
        font-size: 13px;
      }
      .modal .btn.inline {
        padding: 6px 10px;
      }

      /* Added to existing styles */
      .preview-hidden .pane.preview {
        display: none;
      }
      .preview-hidden .layout {
        grid-template-columns: 1fr !important;
      }
      @media (max-width: 900px) {
        .preview-hidden .layout {
          grid-template-rows: 1fr !important;
        }
      }

      .modal2 {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 10px;
        width: min(1000px, 92vw);
        max-height: 80vh;
        overflow: auto;
        padding: 18px;
        color: var(--text);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
      }

      #chat {
        flex: 1;
        overflow-y: auto;
        padding: 10px;
        background: var(--bg);
      }
      .msg {
        margin: 0 auto;
        padding: 8px;
        border-radius: 6px;
        max-width: 85%;
      }
      .user {
        background: #0074f0;
        align-self: flex-end;
        margin-top: 8px;
      }
      .bot {
        background: var(--tab);
        align-self: flex-start;
        margin-top: 8px;
      }
      #inputBar {
        display: flex;
      }
      #input {
        flex: 1;
        padding: 8px;
        border: none;
        outline: none;
        font-size: 14px;
      }
      #send {
        padding: 8px 12px;
        border: none;
        background: #007bff;
        color: white;
        cursor: pointer;
      }
      #send:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      #btnOpenC:disabled {
        color: #666; /* Darker gray text */
        cursor: not-allowed; /* Indicate it's not clickable */
      }

      #btnOpenC:disabled:hover {
        border: 1px solid #17314a;
        color: #666; /* Darker gray text */
      }

      #toggleBtn:disabled {
        color: #666; /* Darker gray text */
        cursor: not-allowed; /* Indicate it's not clickable */
      }

      #toggleBtn:disabled:hover {
        border: 1px solid #17314a;
        color: #666; /* Darker gray text */
      }

      .inputb {
        outline: none;
        background: var(--tab);
        color: var(--text);
        border: 1px solid var(--border);
        padding: 4px 8px;
        border-radius: 8px;
        font-weight: 600;
      }

    
      .typing-loader {
        width: 20px;
        height: 20px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-top: 3px solid #fff;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin: 4px auto;
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      pre[class*='language-'] {
        background-color: #151b23; /* dark background */
        /* text color */
        border-radius: 8px;
        padding: 12px;
        overflow-x: auto;
      }

      #findtoolbar {
        border: 1px solid var(--border);
        display: none; /* hidden by default */
        background: #1b2430;
        padding: 5px;
      }
      #findtoolbar.show {
        display: flex; /* show when needed */
        gap: 4px;
        align-items: center;
      }

      .svg {
        color: var(--text);
      }