editormate 0.0.0-stage → 1.0.2

package/extension/src/webview/webview_styles.ts

@@ -0,0 +1,1073 @@
+/**
+ * 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;
+    }
+  `;
+}