editormate 1.0.2 → 1.0.7

package/extension/src/webview/webview_styles.ts

@@ -1,1073 +0,0 @@
-/**
- * EditorMate Webview Styles
- * Clean, ultra-responsive design matching TokenShield's high-density aesthetics.
- * Uses native IDE CSS theme tokens with dark/light mode adaptability.
- * Prevents horizontal overflow, wraps concisely on narrow sidebars, and enforces uniform color theming.
- */
-
-export function getWebviewStyles(): string {
-  return `
-    :root {
-      --bg: var(--vscode-sideBar-background, #0d1117);
-      --card-bg: var(--vscode-editorWidget-background, var(--vscode-editor-background, #161b22));
-      --card-bg-subtle: var(--vscode-sideBar-dropBackground, rgba(255, 255, 255, 0.04));
-      --card-bg-elevated: var(--vscode-editor-background, rgba(0, 0, 0, 0.2));
-      --border: var(--vscode-sideBar-border, var(--vscode-widget-border, rgba(255, 255, 255, 0.08)));
-      --text: var(--vscode-sideBar-foreground, var(--vscode-foreground, #e6edf3));
-      --text-muted: var(--vscode-descriptionForeground, #8b949e);
-      --accent: var(--vscode-textLink-foreground, var(--vscode-button-background, #38bdf8));
-      --accent-glow: rgba(56, 189, 248, 0.18);
-      --emerald: var(--vscode-terminal-ansiGreen, #34d399);
-      --red: var(--vscode-terminal-ansiRed, #f87171);
-      --purple: var(--vscode-terminal-ansiMagenta, #818cf8);
-      --amber: var(--vscode-terminal-ansiYellow, #fbbf24);
-      --input-bg: var(--vscode-input-background, rgba(0, 0, 0, 0.2));
-      --input-fg: var(--vscode-input-foreground, var(--text));
-      --input-border: var(--vscode-input-border, var(--border));
-      --btn-bg: var(--vscode-button-secondaryBackground, rgba(255, 255, 255, 0.06));
-      --btn-fg: var(--vscode-button-secondaryForeground, var(--text));
-      --btn-primary-bg: var(--vscode-button-background, #38bdf8);
-      --btn-primary-fg: var(--vscode-button-foreground, #ffffff);
-      --font: var(--vscode-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
-    }
-
-    *, *::before, *::after {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-    
-    html, body {
-      width: 100%;
-      max-width: 100%;
-      overflow-x: hidden;
-    }
-
-    body {
-      background: var(--bg);
-      color: var(--text);
-      font-family: var(--font);
-      font-size: 11px;
-      line-height: 1.35;
-      padding: 6px 6px 16px;
-      user-select: none;
-    }
-
-    .container {
-      width: 100%;
-      max-width: 100%;
-      display: flex;
-      flex-direction: column;
-      gap: 7px;
-      overflow-x: hidden;
-    }
-
-    /* Top Brand & Action Bar */
-    .brand-bar {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 6px;
-      padding-bottom: 6px;
-      border-bottom: 1px solid var(--border);
-      min-width: 0;
-    }
-    .brand-group {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      min-width: 0;
-      flex: 1;
-      overflow: hidden;
-    }
-    .brand-icon {
-      font-size: 14px;
-      flex-shrink: 0;
-      filter: drop-shadow(0 0 6px var(--accent-glow));
-    }
-    .brand-meta {
-      display: flex;
-      flex-direction: column;
-      min-width: 0;
-      flex: 1;
-      overflow: hidden;
-    }
-    .brand-title {
-      font-weight: 700;
-      font-size: 12px;
-      letter-spacing: 0.2px;
-      color: var(--text);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .brand-sub {
-      font-size: 9px;
-      color: var(--text-muted);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .top-actions {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      flex-shrink: 0;
-    }
-    .top-btn {
-      background: var(--card-bg-subtle);
-      border: 1px solid var(--border);
-      border-radius: 5px;
-      color: var(--text);
-      padding: 2px 6px;
-      font-size: 11px;
-      cursor: pointer;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.15s ease;
-    }
-    .top-btn:hover {
-      background: rgba(255, 255, 255, 0.08);
-      border-color: var(--accent);
-      transform: translateY(-1px);
-    }
-    .top-btn.active {
-      background: var(--accent-glow);
-      border-color: var(--accent);
-      color: var(--accent);
-    }
-
-    /* Navigation Tabs */
-    .nav-tabs {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 3px;
-      background: var(--card-bg-subtle);
-      padding: 2px;
-      border-radius: 6px;
-      border: 1px solid var(--border);
-      width: 100%;
-    }
-    .nav-tab {
-      background: none;
-      border: none;
-      color: var(--text-muted);
-      padding: 4px 4px;
-      font-size: 10.5px;
-      font-weight: 500;
-      border-radius: 4px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 4px;
-      transition: all 0.15s ease;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .nav-tab:hover {
-      color: var(--text);
-      background: rgba(255, 255, 255, 0.04);
-    }
-    .nav-tab.active {
-      background: var(--card-bg-elevated);
-      color: var(--accent);
-      font-weight: 600;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-    }
-
-    /* Generic Card */
-    .card {
-      background: var(--card-bg);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 7px 8px;
-      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
-      width: 100%;
-      min-width: 0;
-      overflow: hidden;
-    }
-    .header-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 4px;
-      min-width: 0;
-    }
-    .section-title {
-      font-weight: 600;
-      font-size: 10.5px;
-      color: var(--text);
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      min-width: 0;
-    }
-
-    /* Badges */
-    .badge {
-      font-size: 8.5px;
-      font-weight: 700;
-      padding: 1px 5px;
-      border-radius: 999px;
-      letter-spacing: 0.2px;
-      text-transform: uppercase;
-      display: inline-flex;
-      align-items: center;
-      gap: 3px;
-      flex-shrink: 0;
-      white-space: nowrap;
-    }
-    .badge-live {
-      background: rgba(52, 211, 153, 0.15);
-      color: var(--emerald);
-      border: 1px solid rgba(52, 211, 153, 0.3);
-    }
-    .badge-purple {
-      background: rgba(129, 140, 248, 0.15);
-      color: var(--purple);
-      border: 1px solid rgba(129, 140, 248, 0.3);
-    }
-    .badge-amber {
-      background: rgba(251, 191, 36, 0.15);
-      color: var(--amber);
-      border: 1px solid rgba(251, 191, 36, 0.3);
-    }
-    .badge-cyan {
-      background: rgba(56, 189, 248, 0.15);
-      color: var(--accent);
-      border: 1px solid rgba(56, 189, 248, 0.3);
-    }
-    .pulse-dot {
-      width: 4px;
-      height: 4px;
-      border-radius: 50%;
-      background: currentColor;
-      box-shadow: 0 0 5px currentColor;
-    }
-
-    /* Cockpit Metadata Grid - Vertical stacked concise rows */
-    .cockpit-grid {
-      display: flex;
-      flex-direction: column;
-      gap: 3px;
-      font-size: 9.5px;
-      background: var(--card-bg-subtle);
-      padding: 5px 7px;
-      border-radius: 5px;
-      border: 1px solid var(--border);
-      width: 100%;
-      min-width: 0;
-    }
-    .grid-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 6px;
-      min-width: 0;
-    }
-    .grid-label {
-      color: var(--text-muted);
-      font-size: 9px;
-      white-space: nowrap;
-      flex-shrink: 0;
-    }
-    .grid-val {
-      color: var(--text);
-      font-weight: 500;
-      text-align: right;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      min-width: 0;
-      flex: 1;
-    }
-    .font-mono {
-      font-family: monospace;
-      font-size: 9.5px;
-    }
-
-    /* Field labels & select */
-    .field-label {
-      font-size: 9px;
-      color: var(--text-muted);
-      display: block;
-      margin-bottom: 2px;
-      font-weight: 500;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .select-field {
-      width: 100%;
-      height: 26px;
-      line-height: 24px;
-      background: var(--input-bg, var(--vscode-input-background, #161b22));
-      border: 1px solid var(--input-border, var(--border));
-      color: var(--input-fg, var(--text));
-      padding: 0 6px;
-      border-radius: 5px;
-      font-size: 10px;
-      outline: none;
-      cursor: pointer;
-      box-sizing: border-box;
-      min-width: 0;
-    }
-    .select-field:focus {
-      border-color: var(--accent);
-    }
-
-    /* Privacy Meter */
-    .privacy-box {
-      background: rgba(0, 0, 0, 0.25);
-      border: 1px solid var(--border);
-      border-radius: 5px;
-      padding: 5px 6px;
-      width: 100%;
-      min-width: 0;
-    }
-    .privacy-row {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      font-size: 8.5px;
-      min-width: 0;
-    }
-    .privacy-tag {
-      font-size: 7.5px;
-      font-weight: 700;
-      padding: 1px 4px;
-      border-radius: 3px;
-      text-transform: uppercase;
-      white-space: nowrap;
-      flex-shrink: 0;
-    }
-    .privacy-tag.sending {
-      background: rgba(56, 189, 248, 0.15);
-      color: var(--accent);
-      border: 1px solid rgba(56, 189, 248, 0.3);
-    }
-    .privacy-tag.not-sending {
-      background: rgba(52, 211, 153, 0.15);
-      color: var(--emerald);
-      border: 1px solid rgba(52, 211, 153, 0.3);
-    }
-    .privacy-text {
-      color: var(--text-muted);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      min-width: 0;
-      flex: 1;
-    }
-
-    /* Execution Guard */
-    .guard-btn-row {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      gap: 3px;
-      width: 100%;
-      min-width: 0;
-    }
-    .btn-allow { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.3); color: var(--emerald); }
-    .btn-allow:hover { background: var(--emerald); color: #000; }
-    .btn-amber { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.3); color: var(--amber); }
-    .btn-amber:hover { background: var(--amber); color: #000; }
-    .btn-deny { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.3); color: var(--red); }
-    .btn-deny:hover { background: var(--red); color: #000; }
-    .active-guard {
-      font-weight: 700;
-      box-shadow: 0 0 6px currentColor;
-    }
-
-    /* Buttons */
-    .btn {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 4px;
-      background: var(--btn-bg, var(--vscode-button-secondaryBackground, rgba(255, 255, 255, 0.08)));
-      border: 1px solid var(--border);
-      color: var(--btn-fg, var(--vscode-button-secondaryForeground, var(--text)));
-      padding: 0 8px;
-      height: 26px;
-      line-height: 24px;
-      border-radius: 5px;
-      font-size: 10px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.15s ease;
-      white-space: nowrap;
-      box-sizing: border-box;
-      min-width: 0;
-    }
-    .btn:hover {
-      background: rgba(255, 255, 255, 0.14);
-      border-color: rgba(255, 255, 255, 0.25);
-      transform: translateY(-1px);
-    }
-    .btn-primary {
-      background: var(--btn-primary-bg, var(--vscode-button-background, #38bdf8));
-      border-color: var(--accent);
-      color: var(--btn-primary-fg, #ffffff);
-      font-weight: 600;
-    }
-    .btn-primary:hover {
-      background: var(--accent);
-      color: #000;
-    }
-
-    /* Commands & Aliases Interactive Cards */
-    .cmd-group-title {
-      font-size: 8.5px;
-      font-weight: 700;
-      color: var(--text-muted);
-      text-transform: uppercase;
-      letter-spacing: 0.3px;
-      margin-bottom: 3px;
-      margin-top: 5px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 4px;
-      min-width: 0;
-    }
-    .cmd-list-col {
-      display: flex;
-      flex-direction: column;
-      gap: 3px;
-      width: 100%;
-      min-width: 0;
-    }
-    .cmd-row-clickable {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 4px;
-      padding: 4px 6px;
-      background: #0d1117;
-      border: 1px solid var(--border);
-      border-radius: 5px;
-      cursor: pointer;
-      transition: all 0.15s ease;
-      width: 100%;
-      min-width: 0;
-    }
-    .cmd-row-clickable:hover {
-      border-color: var(--accent);
-      background: rgba(56, 189, 248, 0.04);
-      transform: translateX(1px);
-    }
-    .cmd-row-clickable.selected {
-      border-color: var(--accent);
-      background: rgba(56, 189, 248, 0.12);
-      box-shadow: 0 0 6px var(--accent-glow);
-    }
-    .cmd-meta-col {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      min-width: 0;
-      flex: 1;
-      overflow: hidden;
-    }
-    .cmd-badge-key {
-      font-family: monospace;
-      font-weight: 700;
-      color: var(--accent);
-      font-size: 10px;
-      flex-shrink: 0;
-    }
-    .cmd-badge-alias {
-      font-family: monospace;
-      font-size: 8px;
-      background: rgba(52, 211, 153, 0.15);
-      color: var(--emerald);
-      border: 1px solid rgba(52, 211, 153, 0.3);
-      padding: 1px 3px;
-      border-radius: 3px;
-      font-weight: 600;
-      flex-shrink: 0;
-      white-space: nowrap;
-    }
-    .cmd-desc-text {
-      font-size: 9px;
-      color: var(--text-muted);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      min-width: 0;
-      flex: 1;
-    }
-    .cmd-arrow-target {
-      font-size: 8.5px;
-      color: var(--text-muted);
-      font-family: monospace;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      min-width: 0;
-      flex: 1;
-    }
-    .cmd-action-btns {
-      display: flex;
-      align-items: center;
-      gap: 2px;
-      flex-shrink: 0;
-    }
-    .mini-btn {
-      background: rgba(255, 255, 255, 0.05);
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      color: var(--text);
-      font-size: 9px;
-      padding: 2px 4px;
-      cursor: pointer;
-      transition: all 0.1s ease;
-      white-space: nowrap;
-    }
-    .mini-btn:hover {
-      background: var(--accent);
-      color: #000;
-    }
-
-    /* Inspector & Editor Form */
-    .editor-form-box {
-      background: rgba(0, 0, 0, 0.3);
-      border: 1px solid rgba(56, 189, 248, 0.3);
-      border-radius: 6px;
-      padding: 6px;
-      margin-top: 6px;
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-      width: 100%;
-      min-width: 0;
-    }
-    .form-input {
-      width: 100%;
-      max-width: 100%;
-      background: #0d1117;
-      border: 1px solid var(--border);
-      color: var(--text);
-      padding: 4px 6px;
-      border-radius: 5px;
-      font-size: 10px;
-      font-family: monospace;
-      outline: none;
-    }
-    .form-input:focus {
-      border-color: var(--accent);
-    }
-
-    /* Connected Device Live Chat Column */
-    .chat-card {
-      margin-top: 6px;
-      background: rgba(0, 0, 0, 0.2);
-      border: 1px solid var(--border);
-      border-radius: 5px;
-      padding: 6px;
-      width: 100%;
-      min-width: 0;
-    }
-    .chat-bubble-stream {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      max-height: 120px;
-      overflow-y: auto;
-      padding: 4px;
-      background: #0d1117;
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      margin-top: 3px;
-      margin-bottom: 4px;
-      width: 100%;
-    }
-    .chat-bubble {
-      display: flex;
-      flex-direction: column;
-      padding: 4px 6px;
-      border-radius: 4px;
-      font-size: 9.5px;
-      word-break: break-word;
-    }
-    .chat-bubble.inbox {
-      background: rgba(56, 189, 248, 0.1);
-      border: 1px solid rgba(56, 189, 248, 0.2);
-      align-self: flex-start;
-      max-width: 95%;
-    }
-    .chat-bubble-meta {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 4px;
-      font-size: 8px;
-      color: var(--text-muted);
-      margin-bottom: 1px;
-    }
-    .chat-bubble-sender {
-      font-weight: 600;
-      color: var(--accent);
-    }
-
-    /* Screen Preview Container */
-    .screen-preview-container {
-      width: 100%;
-      height: 120px;
-      background: #000;
-      border: 1px solid var(--border);
-      border-radius: 5px;
-      overflow: hidden;
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-top: 5px;
-    }
-    .screen-preview-img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      display: block;
-      transition: opacity 0.2s ease;
-    }
-
-    /* Active Target IDE Banner */
-    .target-ide-banner {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 6px;
-      padding: 5px 7px;
-      background: rgba(56, 189, 248, 0.08);
-      border: 1px solid rgba(56, 189, 248, 0.25);
-      border-radius: 5px;
-      margin-bottom: 6px;
-      width: 100%;
-      min-width: 0;
-    }
-    .target-ide-badge {
-      font-size: 8px;
-      font-weight: 700;
-      padding: 1px 5px;
-      border-radius: 3px;
-      background: rgba(52, 211, 153, 0.2);
-      color: var(--emerald);
-      border: 1px solid rgba(52, 211, 153, 0.35);
-      white-space: nowrap;
-    }
-
-    /* 7-Day Trial Progress Bar */
-    .trial-box {
-      background: rgba(0, 0, 0, 0.25);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 7px;
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-      margin-bottom: 6px;
-      width: 100%;
-      min-width: 0;
-    }
-    .trial-track {
-      width: 100%;
-      height: 6px;
-      background: rgba(255, 255, 255, 0.08);
-      border-radius: 999px;
-      overflow: hidden;
-    }
-    .trial-fill {
-      height: 100%;
-      background: linear-gradient(90deg, #38bdf8, #34d399);
-      border-radius: 999px;
-      transition: width 0.3s ease;
-    }
-
-    /* Quick Action Grid - Auto fit */
-    .action-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
-      gap: 4px;
-      width: 100%;
-      min-width: 0;
-    }
-    .action-grid .btn {
-      padding: 5px 3px;
-      font-size: 9.5px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    /* Channel Switcher Pills - Responsive 2x2 or 4x1 */
-    .channel-pills {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));
-      gap: 4px;
-      width: 100%;
-      min-width: 0;
-    }
-    .channel-btn {
-      background: #21262d;
-      border: 1px solid var(--border);
-      border-radius: 5px;
-      color: var(--text);
-      padding: 4px 2px;
-      font-size: 9px;
-      font-weight: 500;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 3px;
-      transition: all 0.15s ease;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      min-width: 0;
-    }
-    .channel-btn:hover {
-      background: #30363d;
-      border-color: var(--accent);
-    }
-    .channel-btn.active {
-      background: var(--accent-glow);
-      border-color: var(--accent);
-      color: var(--accent);
-      font-weight: 700;
-      box-shadow: 0 0 8px var(--accent-glow);
-    }
-    .channel-tg.active { border-color: #38bdf8; color: #38bdf8; background: rgba(56, 189, 248, 0.15); }
-    .channel-dc.active { border-color: #5865F2; color: #818cf8; background: rgba(88, 101, 242, 0.15); }
-    .channel-sl.active { border-color: #E01E5A; color: #f43f5e; background: rgba(224, 30, 90, 0.15); }
-    .channel-btn:disabled, .channel-btn.disabled {
-      opacity: 0.55;
-      cursor: not-allowed;
-      border-color: rgba(255, 255, 255, 0.08);
-      pointer-events: auto;
-    }
-    .channel-btn:disabled:hover, .channel-btn.disabled:hover {
-      background: #21262d;
-      border-color: rgba(255, 255, 255, 0.12);
-    }
-
-    /* QR Box */
-    .qr-box {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding: 9px;
-      background: #000;
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      text-align: center;
-      gap: 6px;
-      width: 100%;
-      min-width: 0;
-    }
-    .qr-img {
-      width: 135px;
-      height: 135px;
-      border-radius: 5px;
-      background: #fff;
-      padding: 4px;
-      display: block;
-      max-width: 100%;
-    }
-
-    /* Collapsible Accordion Card */
-    .collapsible-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 4px;
-      cursor: pointer;
-      padding: 1px 0;
-      min-width: 0;
-    }
-    .collapse-arrow {
-      font-size: 9px;
-      color: var(--text-muted);
-      transition: transform 0.2s ease;
-      flex-shrink: 0;
-    }
-    .collapse-arrow.open {
-      transform: rotate(180deg);
-    }
-    .collapsible-body {
-      margin-top: 6px;
-      padding-top: 6px;
-      border-top: 1px solid var(--border);
-      width: 100%;
-      min-width: 0;
-    }
-
-    /* Tab switching visibility */
-    .tab-content { display: none; }
-    .tab-content.active { display: flex; flex-direction: column; gap: 7px; width: 100%; min-width: 0; }
-
-    /* Inline Alias Drawer */
-    .alias-inline-drawer {
-      background: rgba(0, 0, 0, 0.35);
-      border: 1px solid var(--border);
-      border-radius: 5px;
-      padding: 5px 6px;
-      margin-top: 3px;
-      margin-bottom: 5px;
-      width: 100%;
-      min-width: 0;
-    }
-
-    /* Settings Switch Toggles */
-    .settings-switch-list {
-      display: flex;
-      flex-direction: column;
-      gap: 7px;
-      width: 100%;
-      min-width: 0;
-    }
-    .switch-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
-      padding: 3px 0;
-      min-width: 0;
-    }
-    .switch-meta {
-      display: flex;
-      flex-direction: column;
-      gap: 1px;
-      min-width: 0;
-      flex: 1;
-    }
-    .switch-title {
-      font-size: 10px;
-      font-weight: 600;
-      color: var(--text);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .switch-desc {
-      font-size: 8px;
-      color: var(--text-muted);
-      line-height: 1.2;
-    }
-    .toggle-switch {
-      position: relative;
-      display: inline-block;
-      width: 28px;
-      height: 16px;
-      flex-shrink: 0;
-    }
-    .toggle-switch input {
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-    .slider {
-      position: absolute;
-      cursor: pointer;
-      top: 0; left: 0; right: 0; bottom: 0;
-      background-color: #30363d;
-      border: 1px solid var(--border);
-      transition: .2s ease;
-      border-radius: 16px;
-    }
-    .slider:before {
-      position: absolute;
-      content: "";
-      height: 10px;
-      width: 10px;
-      left: 2px;
-      bottom: 2px;
-      background-color: #8b949e;
-      transition: .2s ease;
-      border-radius: 50%;
-    }
-    input:checked + .slider {
-      background-color: var(--accent);
-      border-color: var(--accent);
-    }
-    input:checked + .slider:before {
-      transform: translateX(12px);
-      background-color: #000;
-    }
-
-    /* 3-Level Screenshot Scope Selector */
-    .scope-selector-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 3px;
-      margin-top: 3px;
-      width: 100%;
-      min-width: 0;
-    }
-    .scope-btn {
-      background: var(--card-bg-subtle);
-      border: 1px solid var(--border);
-      border-radius: 5px;
-      color: var(--text-muted);
-      padding: 4px 2px;
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 1px;
-      font-size: 9px;
-      transition: all 0.15s ease;
-      min-width: 0;
-    }
-    .scope-btn:hover {
-      background: var(--card-bg-elevated);
-      color: var(--text);
-      border-color: var(--accent);
-    }
-    .scope-btn.active {
-      background: var(--accent-glow);
-      border-color: var(--accent);
-      color: var(--accent);
-      box-shadow: 0 0 6px var(--accent-glow);
-    }
-
-    /* Edit Mode & Card Reordering */
-    .top-btn.edit-active {
-      background: var(--accent-glow);
-      color: var(--accent);
-      border-color: var(--accent);
-      font-weight: 700;
-      box-shadow: 0 0 8px var(--accent-glow);
-    }
-    .reorderable-card {
-      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
-      position: relative;
-    }
-    .reorderable-card.dragging {
-      opacity: 0.35;
-      border: 1px dashed var(--accent);
-      transform: scale(0.98);
-    }
-    .reorderable-card.drag-over {
-      border: 2px solid var(--accent);
-      box-shadow: 0 0 10px var(--accent-glow);
-    }
-    .card-reorder-bar {
-      display: none;
-      align-items: center;
-      gap: 3px;
-      margin-left: auto;
-      margin-right: 4px;
-    }
-    .is-edit-mode .card-reorder-bar {
-      display: flex;
-    }
-    .reorder-btn {
-      background: var(--card-bg-subtle);
-      border: 1px solid var(--border);
-      border-radius: 3px;
-      color: var(--text);
-      font-size: 8px;
-      padding: 1px 4px;
-      cursor: pointer;
-      line-height: 1.2;
-      transition: background 0.15s ease;
-    }
-    .reorder-btn:hover {
-      background: var(--accent);
-      color: #000;
-    }
-    .drag-handle {
-      cursor: grab;
-      font-size: 11px;
-      color: var(--accent);
-      padding: 0 2px;
-      user-select: none;
-    }
-    .drag-handle:active {
-      cursor: grabbing;
-    }
-
-    /* Mobile Prompt Routing Tooltip & Info */
-    .info-tip-btn {
-      font-size: 8px;
-      color: var(--accent);
-      cursor: pointer;
-      padding: 1px 5px;
-      border-radius: 3px;
-      background: var(--card-bg-subtle);
-      border: 1px solid var(--border);
-      transition: all 0.15s ease;
-      user-select: none;
-    }
-    .info-tip-btn:hover {
-      background: var(--accent-glow);
-      border-color: var(--accent);
-    }
-    .routing-explainer {
-      border-radius: 5px;
-      background: var(--card-bg-subtle);
-      border: 1px solid var(--border);
-      font-size: 8.5px;
-      line-height: 1.4;
-      color: var(--text);
-      animation: fadeIn 0.2s ease;
-    }
-
-    /* Media Preview Action Buttons in Chat Stream */
-    .media-preview-btn {
-      display: inline-flex;
-      align-items: center;
-      gap: 5px;
-      padding: 3px 7px;
-      margin-top: 4px;
-      background: rgba(56, 189, 248, 0.12);
-      border: 1px solid rgba(56, 189, 248, 0.35);
-      border-radius: 4px;
-      color: var(--accent);
-      font-size: 9px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.15s ease;
-    }
-    .media-preview-btn:hover {
-      background: rgba(56, 189, 248, 0.25);
-      border-color: var(--accent);
-      transform: translateY(-1px);
-    }
-    .media-preview-btn.audio {
-      background: rgba(52, 211, 153, 0.12);
-      border-color: rgba(52, 211, 153, 0.35);
-      color: var(--emerald);
-    }
-    .media-preview-btn.audio:hover {
-      background: rgba(52, 211, 153, 0.25);
-    }
-    .media-preview-btn.video {
-      background: rgba(129, 140, 248, 0.12);
-      border-color: rgba(129, 140, 248, 0.35);
-      color: var(--purple);
-    }
-    .media-preview-btn.video:hover {
-      background: rgba(129, 140, 248, 0.25);
-    }
-
-    /* Footer Copyright at Bottom */
-    .footer-copyright {
-      margin-top: 14px;
-      padding-top: 8px;
-      border-top: 1px solid var(--border);
-      text-align: center;
-      user-select: none;
-    }
-  `;
-}