@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { --bg: #f4f6fb; --bg-soft: #eef2f8; --panel: #ffffff; --panel-2: #f8fafc; --line: #dbe3ee; --line-strong: #c7d3e3; --text: #0f172a; --muted: #5f6f86; --brand: #1668e3; --brand-2: #0f4fba; --ok: #0f9f6e; --warn: #d18b19; --err: #d14b4b; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --shadow-sm: 0 2px 6px rgba(16, 32, 64, 0.06); --shadow-md: 0 8px 24px rgba(16, 32, 64, 0.08); } :root[data-theme="dark"] { --bg: #1f242d; --bg-soft: #242a34; --panel: #2a313d; --panel-2: #323a47; --line: #3d4656; --line-strong: #505b70; --text: #e8edf6; --muted: #aeb9cb; --brand: #4c8dff; --brand-2: #2f6fe0; --ok: #31b884; --warn: #d6a64f; --err: #e06d6d; --shadow-sm: 0 2px 8px rgba(4, 7, 12, 0.28); --shadow-md: 0 10px 30px rgba(4, 7, 12, 0.36); } * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100dvh; height: 100dvh; font-family: 'Manrope', sans-serif; color: var(--text); background: radial-gradient(900px 420px at 8% -15%, rgba(22, 104, 227, 0.12), transparent 65%), radial-gradient(900px 420px at 100% -20%, rgba(33, 166, 255, 0.12), transparent 62%), var(--bg); display: grid; grid-template-rows: 64px 1fr; grid-template-columns: 280px 1fr minmax(380px, 34vw); grid-template-areas: "header header header" "sidebar main right"; gap: 14px; padding: 12px; overflow: hidden; } :root[data-theme="dark"] body { background: radial-gradient(900px 420px at 8% -15%, rgba(76, 141, 255, 0.12), transparent 65%), radial-gradient(900px 420px at 100% -20%, rgba(89, 188, 255, 0.1), transparent 62%), var(--bg); } header { grid-area: header; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: flex; align-items: center; padding: 10px 16px; gap: 14px; position: relative; z-index: 20; } .logo { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #0b1f3f; display: flex; align-items: center; gap: 8px; } .logo img { width: 56px; height: 56px; border-radius: 8px; } :root[data-theme="dark"] .logo { color: #e8edf6; } .mode-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); } .mode-btn { border: 0; background: transparent; color: var(--muted); padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.18s ease; font-family: 'Manrope', sans-serif; } .mode-btn.active { background: var(--brand); color: #fff; box-shadow: 0 2px 10px rgba(22, 104, 227, 0.28); } .mode-dropdown { position: relative; display: inline-flex; flex-shrink: 0; } .mode-dropdown-menu { display: none; position: absolute; left: 0; top: calc(100% + 4px); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.18); z-index: 2000; min-width: 130px; overflow: hidden; } .mode-dropdown-menu.open { display: block; } /* Mobile only, applied by positionModeDropdown() after it moves the menu to . The menu cannot stay inside the app strip there: the strip scrolls horizontally, and its mask-image clips descendants — including position:fixed ones, which do escape overflow but not a mask. Measured 2026-08-14: fixed-inside-the-strip was still invisible; only leaving the strip worked. Being viewport-positioned, it needs coordinates from JS. */ .mode-dropdown-menu.dd-floating { position: fixed; z-index: 3000; } .mode-dropdown-menu button { display: block; width: 100%; padding: 8px 14px; text-align: left; background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; font-family: 'Manrope', sans-serif; } .mode-dropdown-menu button:hover { background: var(--bg3); } .status-bar { margin-left: auto; display: flex; align-items: center; gap: 8px; } .icon-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--muted); cursor: pointer; transition: all 0.15s ease; } .icon-btn:hover { color: var(--text); border-color: var(--line-strong); } .icon-btn svg { width: 16px; height: 16px; } .icon-btn .theme-icon { display: none; } .icon-btn[data-theme-state="light"] .theme-icon.sun { display: block; } .icon-btn[data-theme-state="dark"] .theme-icon.moon { display: block; } .status-pill { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 8px 12px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; } .status-pill.stat-compact { min-width: 178px; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: 11px; } .dot { width: 8px; height: 8px; border-radius: 50%; background: #a9b4c5; } .dot.online { background: var(--ok); box-shadow: 0 0 0 4px rgba(15, 159, 110, 0.16); } .dot.offline { background: var(--err); box-shadow: 0 0 0 4px rgba(209, 75, 75, 0.14); } /* Asleep but wakeable (지서버): not reachable this instant, yet a message wakes it and is answered normally — red reads as "broken" and sent the user chasing a non-problem. */ .dot.sleeping { background: var(--warn); box-shadow: 0 0 0 4px rgba(214, 158, 46, 0.16); } aside, main, .right-panel { min-height: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-sm); overflow: hidden; } .right-panel { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overflow-x: hidden; } /* Collapsed (minimized to right rail) — grid columns are set via JS so the mobile single-column media query keeps working. */ body.right-collapsed .right-panel > *:not(#right-panel-rail) { display: none !important; } body.right-collapsed #right-panel-rail { display: flex !important; } #right-panel-rail { display: none; } aside { grid-area: sidebar; display: flex; flex-direction: column; position: relative; z-index: 10; } #sidebar-tabs { display: flex; padding: 8px; gap: 6px; border-bottom: 1px solid var(--line); background: var(--panel-2); } #sidebar-tabs:has(button:only-child) { display: none; } .sidebar-tab { flex: 1; border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 999px; padding: 8px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: all 0.18s ease; font-family: 'Manrope', sans-serif; } :root[data-theme="dark"] .sidebar-tab { background: var(--panel); } .sidebar-tab.active { background: #eaf2ff; border-color: #bdd3f6; color: #0d4faf; } #sidebar-jobs, #sidebar-skills { flex: 1; min-height: 0; display: flex; flex-direction: column; } #sidebar-skills { display: none; } /* ── Server log panel ─────────────────────────────── */ #sidebar-log-panel { flex: 0 0 33%; max-height: 33%; min-height: 0; display: flex; flex-direction: column; border-top: 2px solid var(--line); transition: flex 0.2s; } #sidebar-log-panel.collapsed { flex: 0 0 auto; min-height: 0; } #sidebar-log-panel.collapsed #sidebar-log-body, #sidebar-log-panel.collapsed #sidebar-log-filters, #sidebar-log-panel.collapsed #sidebar-log-search { display: none; } #log-collapse-btn { transition: transform 0.2s; } #sidebar-log-panel.collapsed #log-collapse-btn { transform: rotate(-90deg); } #sidebar-log-header { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; background: var(--panel-2, var(--panel)); border-bottom: 1px solid var(--line); flex-shrink: 0; } #sidebar-log-header span { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; } #sidebar-log-header button { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 11px; padding: 1px 4px; border-radius: 4px; line-height: 1; } #sidebar-log-header button:hover { background: var(--line); color: var(--text); } #sidebar-log-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 2px; background: var(--bg, #f7f8fa); font-family: 'IBM Plex Mono', monospace; font-size: 10px; line-height: 1.5; } :root[data-theme="dark"] #sidebar-log-body { background: #0f1117; } .log-line { display: flex; gap: 4px; padding: 1px 6px; border-radius: 2px; overflow: hidden; } .log-line:hover { background: var(--line); } .log-ts { color: var(--muted); flex-shrink: 0; } .log-msg { color: var(--text); word-break: break-all; white-space: pre-wrap; } .log-line.warn .log-msg { color: #b45309; } .log-line.error .log-msg { color: #dc2626; } :root[data-theme="dark"] .log-line.warn .log-msg { color: #fbbf24; } :root[data-theme="dark"] .log-line.error .log-msg { color: #f87171; } /* 로그 레벨 필터 버튼 */ .log-filter-btn { background: none; border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 700; color: var(--muted); cursor: pointer; font-family: 'IBM Plex Mono', monospace; transition: .12s; letter-spacing: .03em; } .log-filter-btn:hover { border-color: var(--brand); color: var(--brand); } .log-filter-btn[data-level="log"].active { border-color: #60a5fa; color: #60a5fa; background: rgba(96,165,250,.1); } .log-filter-btn[data-level="warn"].active { border-color: #fbbf24; color: #fbbf24; background: rgba(251,191,36,.1); } .log-filter-btn[data-level="error"].active { border-color: #f87171; color: #f87171; background: rgba(248,113,113,.1); } .log-filter-all, .log-filter-none { font-weight: 400; letter-spacing: 0; } /* 필터 숨김: filter-active일 때 hide-* 클래스로 해당 레벨 숨김 */ #sidebar-log-body.filter-active.hide-log .log-line.lv-log { display: none; } #sidebar-log-body.filter-active.hide-warn .log-line.lv-warn { display: none; } #sidebar-log-body.filter-active.hide-error .log-line.lv-error { display: none; } #log-search-input::placeholder { color: var(--muted); opacity: 0.6; } .sidebar-section { padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 700; } .sidebar-action { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 10px; font-size: 11px; color: var(--muted); cursor: pointer; font-family: 'Manrope', sans-serif; } :root[data-theme="dark"] .sidebar-action { background: var(--panel); color: var(--text); } :root[data-theme="dark"] .hb-modal, :root[data-theme="dark"] #settings-modal > div { background: var(--panel) !important; color: var(--text); border-color: var(--line) !important; } :root[data-theme="dark"] header { background: rgba(42, 49, 61, 0.88); } :root[data-theme="dark"] main, :root[data-theme="dark"] .right-panel, :root[data-theme="dark"] aside { background: var(--panel); } :root[data-theme="dark"] .job-item, :root[data-theme="dark"] .skill-item, :root[data-theme="dark"] .skill-result, :root[data-theme="dark"] .task-card, :root[data-theme="dark"] .approval-card, :root[data-theme="dark"] .agent-metric, :root[data-theme="dark"] .task-list, :root[data-theme="dark"] .task-row, :root[data-theme="dark"] .artifact-card, :root[data-theme="dark"] .artifact-preview { background: var(--panel-2); border-color: var(--line); } :root[data-theme="dark"] .msg { border-bottom-color: var(--line); } :root[data-theme="dark"] .msg-role { color: #c1cde0; } :root[data-theme="dark"] .msg-content { color: #e8edf6; } :root[data-theme="dark"] .msg.user .msg-content { color: #9fc2ff; } :root[data-theme="dark"] .chat-welcome h2 { color: #c8dbff; } :root[data-theme="dark"] .agent-card { background: linear-gradient(180deg, #303846 0%, #2a313d 100%); border-color: var(--line); } :root[data-theme="dark"] .task-progress-wrap { background: #242c39; border-color: var(--line); } :root[data-theme="dark"] #process-log, :root[data-theme="dark"] #log-panel { background: #242c39; border-color: var(--line); color: #d4deee; } :root[data-theme="dark"] .log-line { color: #b8c4da; } :root[data-theme="dark"] .log-line.info { color: #82adff; } :root[data-theme="dark"] .chat-input-area, :root[data-theme="dark"] .mission-bar { background: linear-gradient(180deg, #313947, #2a313d); } :root[data-theme="dark"] .queued-prompts-panel { background: linear-gradient(180deg, #2c3442, #272f3a); } :root[data-theme="dark"] .queued-item { background: var(--panel); border-color: var(--line); color: var(--text); } :root[data-theme="dark"] .queued-item-btn, :root[data-theme="dark"] .queued-clear-btn { background: var(--panel-2); border-color: var(--line); color: var(--text); } :root[data-theme="dark"] .skill-card { background: var(--panel-2); border-color: var(--line); } :root[data-theme="dark"] .skill-card:hover { border-color: #5c6980; box-shadow: 0 6px 16px rgba(8, 12, 20, 0.35); } :root[data-theme="dark"] .skill-card.enabled { border-color: #3f8f67; background: linear-gradient(135deg, #273b33 0%, #23352e 100%); box-shadow: 0 0 0 2px rgba(49, 184, 132, 0.18), 0 4px 12px rgba(10, 20, 14, 0.35); } :root[data-theme="dark"] .skill-card.enabled .skill-card-name { color: #9fe3c2; } :root[data-theme="dark"] .skill-card-dot { background: #6c788f; } :root[data-theme="dark"] .skill-card.enabled .skill-card-dot { background: #31b884; box-shadow: 0 0 0 3px rgba(49, 184, 132, 0.22); } :root[data-theme="dark"] .skill-mini-btn { background: var(--panel); border-color: var(--line); color: #c8d4e8; } :root[data-theme="dark"] .skill-mini-btn:hover { border-color: #64738e; color: #e8edf6; } :root[data-theme="dark"] .skill-remove-btn { color: #aeb9cc; } :root[data-theme="dark"] .skill-remove-btn:hover { color: #f09999; } :root[data-theme="dark"] .toggle-track { background: #3a4454; border-color: #546177; } :root[data-theme="dark"] .toggle-track::after { background: #b6c2d8; } :root[data-theme="dark"] .toggle-switch input:checked + .toggle-track { background: #334c77; border-color: #4b73b3; } :root[data-theme="dark"] #chat-input, :root[data-theme="dark"] #mission-input, :root[data-theme="dark"] #skill-search-input { background: var(--panel-2); border-color: var(--line); color: var(--text); } :root[data-theme="dark"] #chat-input::placeholder, :root[data-theme="dark"] #mission-input::placeholder, :root[data-theme="dark"] #skill-search-input::placeholder { color: #a9b5ca; } :root[data-theme="dark"] #settings-modal input, :root[data-theme="dark"] #settings-modal select, :root[data-theme="dark"] #settings-modal textarea, :root[data-theme="dark"] .settings-input { background: var(--panel-2) !important; color: var(--text) !important; border-color: var(--line) !important; } :root[data-theme="dark"] #settings-modal [style*="background:#fff"], :root[data-theme="dark"] #settings-modal [style*="background: #fff"] { background: var(--panel-2) !important; color: var(--text) !important; } :root[data-theme="dark"] #settings-modal [style*="linear-gradient(180deg,#fff"], :root[data-theme="dark"] #settings-modal [style*="linear-gradient(180deg, #fff"] { background: linear-gradient(180deg, #323a47 0%, #2b3340 100%) !important; } :root[data-theme="dark"] #settings-modal #tg-status-bar { background: #2a313d !important; border: 1px solid var(--line); } :root[data-theme="dark"] #settings-modal .info-row { border-bottom-color: var(--line); } :root[data-theme="dark"] #settings-modal button[style*="background:#fff"], :root[data-theme="dark"] #settings-modal button[style*="background: #fff"] { background: var(--panel) !important; color: var(--text) !important; border-color: var(--line) !important; } :root[data-theme="dark"] #settings-modal code { background: #232a35 !important; color: #d8e2f1; } :root[data-theme="dark"] .CodeMirror { background: #1f242d; color: #e8edf6; } :root[data-theme="dark"] .CodeMirror-gutters { background: #232a35; border-right: 1px solid var(--line); } #jobs-list, #skills-list, #skills-search-results { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; } .job-item, .skill-item, .skill-result, .task-card, .approval-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; transition: all 0.15s ease; } .job-item { padding: 12px; margin-bottom: 8px; cursor: pointer; } .job-item:hover { border-color: #c2d6f4; box-shadow: 0 4px 12px rgba(15, 60, 120, 0.08); } .job-item.active { border-color: #9fbef1; background: #f1f6ff; } .job-item.unread { background: linear-gradient(135deg, #f0f8ff 0%, #e8f4ff 100%); border-color: #8ec4f8; } .job-item.unread.active { background: #f1f6ff; border-color: #5ca9f0; } .job-item-title { font-size: 12px; font-weight: 700; } .badge { font-size: 10px; font-weight: 700; letter-spacing: 0.02em; border-radius: 999px; padding: 4px 8px; } .badge-planning { background: #e6f0ff; color: #225ab6; } .badge-executing { background: #e9f8ff; color: #1d7ea7; } .badge-completed { background: #e8fbf3; color: #0f8b63; } .badge-failed { background: #fff0f0; color: #c33f3f; } .badge-queued { background: #eef2f7; color: #607086; } .badge-needs_approval { background: #fff6e9; color: #b06b00; } .empty-state { border: 1px dashed var(--line-strong); border-radius: var(--radius-md); padding: 22px 12px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.7; background: var(--panel-2); } .status-active { background: #c8f0c4; color: #0d5c2f; } .status-paused { background: #fff4d6; color: #7d5700; } .status-failed { background: #ffd6d6; color: #8b0000; } .agent-card { border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg, #fff 0%, #f9fbff 100%); padding: 5px; display: flex; flex-direction: column; min-height: 0; } .agent-context-scroll { margin-top: 5px; max-height: none; overflow: visible; display: flex; flex-direction: column; gap: 4px; padding-right: 2px; } .agent-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; } .agent-metric { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 4px 6px; } .agent-metric .k { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .agent-metric .v { font-size: 11px; color: var(--text); font-weight: 700; margin-top: 1px; } .task-progress-wrap { margin-top: 5px; border: 1px solid var(--line); border-radius: 999px; height: 5px; background: #eef3fb; overflow: hidden; } .task-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #0f9f6e, #20b182); transition: width 180ms ease; } .task-list { margin-top: 0; max-height: 180px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 8px; } .agent-context-scroll .task-list { max-height: none; overflow: visible; min-height: 28px; } .task-row { padding: 7px 8px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 6px; background: #fcfdff; } .task-row:last-child { margin-bottom: 0; } .task-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .task-title { font-size: 11px; color: var(--text); font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; } .task-meta { font-size: 10px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } .status-chip { border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .status-chip.pending { background: #eef2f7; color: #607086; } .status-chip.planned { background: #eef2f7; color: #607086; } .status-chip.running { background: #e6f0ff; color: #225ab6; } .status-chip.in_progress { background: #e6f0ff; color: #225ab6; } .status-chip.verifying { background: #fff6e9; color: #b06b00; } .status-chip.repaired { background: #e6fff9; color: #0f8b63; } .status-chip.done { background: #e8fbf3; color: #0f8b63; } .status-chip.skipped { background: #f4f6fa; color: #7d8ca2; } .status-chip.failed { background: #fff0f0; color: #c33f3f; } main { grid-area: main; display: flex; flex-direction: column; background: #fff; height: 100%; } #chat-view, #mission-view { flex: 1; min-height: 0; height: 100%; display: flex; flex-direction: column; } #mission-view { display: none; } #chat-messages, #main-content { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; } .chat-welcome, .welcome { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; color: var(--muted); } .chat-welcome-icon, .welcome-logo { font-size: 48px; opacity: 0.6; } .chat-welcome-icon img { width: 112px; height: 112px; border-radius: 16px; } .chat-welcome h2 { font-size: 28px; font-weight: 800; color: #10346f; } .msg { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid #eef2f7; } .msg-avatar { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; border: 1px solid var(--line); background: var(--panel-2); } .msg.user .msg-avatar { background: #e8f1ff; border-color: #c4d9fb; } .msg-body { flex: 1; min-width: 0; } .msg-role { font-size: 11px; color: #4f617b; font-weight: 700; margin-bottom: 6px; } .msg-content { line-height: 1.75; font-size: 14px; white-space: pre-wrap; word-break: break-word; color: #17243b; } .msg.user .msg-content { color: #0f3d8a; } .md-table-wrap { overflow-x: auto; margin: 10px 0; border-radius: 8px; border: 1px solid var(--line); white-space: normal; } .md-table { border-collapse: collapse; width: 100%; font-size: 13px; } .md-table th { background: var(--brand); color: #fff; padding: 8px 14px; text-align: left; font-weight: 600; white-space: nowrap; } .md-table td { padding: 7px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } .md-table tr:last-child td { border-bottom: none; } .md-table tbody tr:nth-child(even) td { background: var(--panel-2); } .md-table tbody tr:hover td { background: rgba(22,104,227,0.05); } :root[data-theme="dark"] .md-table tbody tr:hover td { background: rgba(76,141,255,0.08); } .md-img { max-width: 100%; max-height: 400px; border-radius: 8px; cursor: pointer; margin: 8px 0; display: block; } .md-img:hover { opacity: 0.9; } .md-img-err { display: inline-block; color: var(--muted, #888); font-size: 13px; padding: 4px 8px; background: var(--surface2, #f0f0f0); border-radius: 6px; margin: 4px 0; } .map-embed-wrap { margin: 10px 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line, #dde3f0); } .map-embed { width: 100%; height: 420px; border: none; display: block; } .map-embed-link { padding: 6px 12px; background: var(--surface2, #f5f5f7); font-size: 12px; } .map-embed-link a { color: var(--accent, #1a73e8); text-decoration: none; } .map-embed-link a:hover { text-decoration: underline; } .yt-embed-wrap { margin: 10px 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line, #dde3f0); } .yt-embed { width: 100%; aspect-ratio: 16/9; border: none; display: block; } .windy-embed-wrap { margin: 10px 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line, #dde3f0); } .windy-embed { width: 100%; height: 500px; border: none; display: block; } .md-code-block { background: var(--panel); color: var(--text); padding: 12px 16px; border-radius: 8px; overflow-x: auto; font-size: 13px; line-height: 1.5; margin: 8px 0; font-family: 'IBM Plex Mono', 'Fira Code', 'Courier New', monospace; white-space: pre; } .md-inline-code { background: #e8edf6; color: #17243b; padding: 2px 6px; border-radius: 4px; font-size: 13px; } :root[data-theme="dark"] .md-inline-code { background: #2a2a3e; color: #cdd6f4; } .download-btn { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff !important; padding: 4px 10px; border-radius: 6px; text-decoration: none !important; font-weight: 600; font-size: 12px; margin: 4px 2px; transition: all 0.15s; box-shadow: 0 1px 3px rgba(37,99,235,0.25); cursor: pointer; } .download-btn:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(37,99,235,0.35); } .download-icon { font-size: 12px; line-height: 1; } :root[data-theme="dark"] .download-btn { background: linear-gradient(135deg, #6366f1, #4f46e5); box-shadow: 0 1px 3px rgba(79,70,229,0.25); } :root[data-theme="dark"] .download-btn:hover { background: linear-gradient(135deg, #4f46e5, #4338ca); } .download-btn-error { display: inline-flex; align-items: center; gap: 4px; background: #fee2e2; color: #991b1b !important; padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: 12px; margin: 4px 2px; cursor: default; text-decoration: none !important; } :root[data-theme="dark"] .download-btn-error { background: #3f1515; color: #fca5a5 !important; } .pptx-file-row { margin: 4px 0; } .pptx-preview-btn { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #10b981, #059669); color: #fff; padding: 4px 10px; border-radius: 6px; border: none; font-weight: 600; font-size: 12px; cursor: pointer; margin-left: 4px; transition: all 0.15s; box-shadow: 0 1px 3px rgba(16,185,129,0.25); box-sizing: border-box; line-height: 1.4; vertical-align: middle; } .pptx-preview-btn:hover { background: linear-gradient(135deg, #059669, #047857); transform: translateY(-1px); } .pptx-preview-btn.loading { opacity: 0.6; pointer-events: none; } .pptx-preview-strip { margin-top: 8px; display: flex; gap: 8px; overflow-x: auto; padding: 8px 4px; border-radius: 8px; background: var(--panel-2, #f3f4f6); } :root[data-theme="dark"] .pptx-preview-strip { background: var(--panel-2, #1e293b); } .pptx-preview-strip img { height: 120px; border-radius: 4px; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; flex-shrink: 0; } .pptx-preview-strip img:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } /* Luckysheet font & rendering overrides */ #lucky-container, #lucky-container * { font-family: "Nanum Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } #lucky-container .iconfont { font-family: "iconfont" !important; } #lucky-container .luckysheet-wa { position: absolute !important; } #image-zoom-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 10000; align-items: center; justify-content: center; cursor: pointer; } #image-zoom-modal img { max-width: 95vw; max-height: 95vh; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.5); } .msg-staged { display: flex; flex-direction: column; gap: 10px; } .msg-stage { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); padding: 10px; } .msg-stage-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 800; margin-bottom: 6px; } .artifact-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .artifact-card { border: 1px solid var(--line); border-radius: 10px; background: #f9fbff; padding: 10px; } .artifact-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .artifact-title { font-size: 11px; font-weight: 800; color: #15386f; letter-spacing: 0.02em; } .artifact-status { border-radius: 999px; padding: 2px 7px; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .artifact-status.ok { background: #e8fbf3; color: #0f8b63; } .artifact-status.error { background: #fff0f0; color: #c33f3f; } .artifact-status.skipped { background: #f4f6fa; color: #7d8ca2; } .artifact-row { font-size: 11px; color: var(--muted); margin-bottom: 4px; line-height: 1.5; word-break: break-word; } .artifact-actions { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .artifact-btn { border: 1px solid var(--line); background: #fff; color: #1a355f; border-radius: 8px; padding: 4px 8px; font-size: 10px; font-weight: 700; cursor: pointer; } .artifact-btn:hover { border-color: #aac6ef; background: #f2f7ff; } .artifact-preview { margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 8px; font-size: 11px; color: #2f3e55; white-space: pre-wrap; max-height: 180px; overflow: auto; } .chat-input-area, .mission-bar { border-top: 1px solid var(--line); background: linear-gradient(180deg, #fff, #f9fbff); padding: 14px 16px; } .agent-toggle, .mission-input-row, .chat-input-row { display: flex; align-items: center; gap: 10px; } .queued-prompts-panel { display: none; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, #f7faff, #f2f7ff); overflow: hidden; } .queued-prompts-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); font-weight: 700; } .queued-prompts-list { padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; } .queued-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #d9e4f4; border-radius: 10px; background: #fff; padding: 7px 8px; font-size: 12px; color: #21324a; } .queued-item-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .queued-item-btn, .queued-clear-btn { border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 999px; font-size: 11px; padding: 3px 8px; cursor: pointer; font-family: 'Manrope', sans-serif; } .queued-item-btn:hover, .queued-clear-btn:hover { border-color: #c1d2ec; color: #26487e; } .agent-toggle { margin-bottom: 10px; } .agent-toggle-right { margin-left: auto; position: relative; } .agent-toggle-label { font-size: 11px; color: var(--muted); font-weight: 700; } .toggle-switch { position: relative; width: 38px; height: 20px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-track { position: absolute; inset: 0; border-radius: 999px; border: 1px solid var(--line-strong); background: #e8eef7; } .toggle-track::after { content: ''; position: absolute; width: 14px; height: 14px; top: 2px; left: 2px; border-radius: 50%; background: #6d7f97; transition: all 0.2s ease; } .toggle-switch input:checked + .toggle-track { background: #dce9ff; border-color: #9fc1f7; } .toggle-switch input:checked + .toggle-track::after { left: 20px; background: var(--brand); } .agent-mode-badge { display: none; border: 1px solid #9fc1f7; background: #ebf3ff; color: #0d4faf; border-radius: 999px; padding: 3px 8px; font-size: 10px; font-weight: 700; } .agent-mode-badge.visible { display: inline-block; } #chat-input, #mission-input, #skill-search-input { flex: 1; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--text); font-family: 'Manrope', sans-serif; font-size: 14px; padding: 10px 12px; outline: none; } #chat-input { min-height: 44px; max-height: 150px; resize: none; line-height: 1.55; overflow-y: auto; } #chat-input:focus, #mission-input:focus, #skill-search-input:focus { border-color: #9fc1f7; box-shadow: 0 0 0 4px rgba(22, 104, 227, 0.11); } .btn, .send-btn, .skill-search-btn, .skill-install-btn { border: 1px solid transparent; border-radius: 12px; background: var(--brand); color: #fff; cursor: pointer; font-weight: 700; font-family: 'Manrope', sans-serif; transition: all 0.15s ease; } .btn:hover, .send-btn:hover, .skill-search-btn:hover, .skill-install-btn:hover { background: var(--brand-2); transform: translateY(-1px); } .btn { padding: 10px 16px; font-size: 12px; } .btn-sm { padding: 6px 10px; font-size: 11px; border-radius: 10px; } #mic-btn.recording { background: #ef4444 !important; animation: mic-pulse 1s ease-in-out infinite; } #voice-call-btn.recording { background: #16a34a !important; animation: mic-pulse 1s ease-in-out infinite; } @keyframes mic-pulse { 0%,100%{opacity:1} 50%{opacity:0.55} } .tts-btn { background:none;border:none;cursor:pointer;font-size:13px;padding:1px 4px;border-radius:4px;opacity:0.45;vertical-align:middle;line-height:1; } .tts-btn:hover,.tts-btn.playing{opacity:1;background:var(--panel-2);} body.tts-disabled .tts-btn { display:none !important; } .app-mic-btn { background:none;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:7px 10px;font-size:16px;cursor:pointer;flex-shrink:0;transition:.15s;color:var(--fg);line-height:1; } .app-mic-btn:hover { background:var(--panel-2); } .app-mic-btn.recording { background:#ef4444!important;animation:mic-pulse 1s ease-in-out infinite; } .app-tts-btn { background:none;border:none;cursor:pointer;font-size:12px;padding:2px 5px;border-radius:4px;opacity:0.4;display:block;margin-top:4px; } .app-tts-btn:hover,.app-tts-btn.playing { opacity:1;background:rgba(255,255,255,.08); } body.tts-disabled .app-tts-btn { display:none !important; } .export-dropdown { position:relative; display:inline-block; } .export-menu { display:none; position:absolute; right:0; top:calc(100% + 4px); background:var(--panel-2); border:1px solid var(--border); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,0.18); z-index:2000; min-width:160px; overflow:hidden; } .export-menu button { display:block; width:100%; padding:8px 14px; text-align:left; background:none; border:none; cursor:pointer; font-size:12px; color:var(--text); white-space:nowrap; } .export-menu button:hover { background:var(--bg3); } .btn-green { background: var(--ok); } .btn-red { background: var(--err); } .settings-input { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--text); padding: 8px 10px; font-size: 12px; font-family: 'Manrope', sans-serif; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; outline: none; } .settings-input:focus { border-color: #9fc1f7; box-shadow: 0 0 0 4px rgba(22, 104, 227, 0.11); } .settings-input[type="number"] { font-family: 'IBM Plex Mono', monospace; } select.settings-input { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, #6d7f97 50%), linear-gradient(135deg, #6d7f97 50%, transparent 50%); background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .send-btn { width: 44px; height: 44px; font-size: 16px; } .send-btn:disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .quick-mode-btn { border: 1px solid var(--line-strong); background: #eef5ff; color: #0d4faf; border-radius: 999px; padding: 6px 10px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: 'Manrope', sans-serif; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .quick-mode-popover { position: absolute; right: 0; bottom: 34px; width: 240px; border: 1px solid var(--line); background: #fff; border-radius: 12px; box-shadow: var(--shadow-md); z-index: 120; padding: 10px; display: none; } .quick-mode-popover.open { display: block; } .quick-mode-popover.clamp-left { right: auto; left: 0; } .quick-mode-title { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .quick-mode-opt { width: 100%; border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 9px; padding: 7px 9px; margin-bottom: 6px; font-size: 12px; text-align: left; cursor: pointer; font-family: 'Manrope', sans-serif; } .quick-mode-opt.active { border-color: #9fc1f7; background: #edf4ff; color: #0d4faf; font-weight: 700; } .chat-hint { margin-top: 8px; color: var(--muted); font-size: 11px; } .chat-hint .switch-link { color: var(--brand); cursor: pointer; text-decoration: underline; } .thinking { display: flex; align-items: center; gap: 6px; padding-top: 4px; } .thinking-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); opacity: 0.25; animation: thinkBounce 1.2s ease-in-out infinite; } .thinking-dot:nth-child(2) { animation-delay: 0.2s; } .thinking-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes thinkBounce { 0%,80%,100%{transform:scale(0.75);opacity:0.25;} 40%{transform:scale(1);opacity:1;} } .react-steps { margin-top: 10px; border-left: 2px solid #c8d9f1; padding-left: 10px; } .react-step { font-size: 12px; margin-bottom: 8px; } .react-step-thought { color: var(--muted); font-style: italic; } .react-step-action { color: #0d4faf; font-weight: 700; margin-top: 3px; } .react-step-result { color: var(--ok); margin-top: 3px; font-size: 11px; } .react-step-result.error { color: var(--err); } .react-steps-toggle { margin-top: 8px; font-size: 11px; color: #0d4faf; cursor: pointer; } .think-block { margin-top: 8px; border: 1px solid #d5e3f8; border-radius: 12px; overflow: hidden; } .think-toggle { width: 100%; border: 0; cursor: pointer; text-align: left; padding: 8px 10px; background: #f3f8ff; color: #23519f; display: flex; align-items: center; gap: 8px; font-size: 11px; font-family: 'IBM Plex Mono', monospace; } .think-toggle .think-icon { transition: transform 0.2s ease; } .think-toggle.open .think-icon { transform: rotate(90deg); } .think-content { display: none; padding: 10px 12px; background: #fff; color: var(--muted); border-top: 1px solid #dde7f6; max-height: 300px; overflow-y: auto; white-space: pre-wrap; font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.6; } .mission-bar-label, .section-title, .right-section-title { font-size: 11px; font-weight: 800; color: #5b6e88; letter-spacing: 0.04em; text-transform: uppercase; } .job-detail-title { font-size: 22px; font-weight: 800; margin-bottom: 8px; } .job-detail-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 12px; margin-bottom: 18px; } .task-card { padding: 14px; margin-bottom: 8px; } .task-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .task-card-title { font-weight: 700; font-size: 14px; } .task-card-desc { color: var(--muted); font-size: 12px; line-height: 1.7; } .task-criteria { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .task-criteria-item { font-size: 12px; color: var(--muted); padding: 2px 0; } #log-panel, #process-log { background: #fbfdff; border: 1px solid var(--line); border-radius: var(--radius-md); font-family: 'IBM Plex Mono', monospace; } #log-panel { padding: 12px; margin-top: 16px; max-height: 220px; overflow-y: auto; font-size: 11px; } .log-line { color: var(--muted); } .log-line.info { color: #2d5fb3; } .log-line.success { color: var(--ok); } .log-line.error { color: var(--err); } .log-line.warn { color: var(--warn); } /* Agent Execution Panel */ #agent-execution-panel { display: flex; flex-direction: column; gap: 0; } .agent-item { padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background 0.15s ease; user-select: none; } .agent-item:hover { background: rgba(22, 104, 227, 0.08); } .agent-item:last-child { border-bottom: none; } .agent-item.expanded { background: rgba(22, 104, 227, 0.12); } .agent-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .agent-item-name { font-weight: 600; font-size: 11px; color: var(--text); flex: 1; } .agent-item-status { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .agent-item-status.active { background: rgba(15, 159, 110, 0.2); color: var(--ok); } .agent-item-status.completed { background: rgba(22, 104, 227, 0.2); color: var(--brand); } .agent-item-status.paused { background: rgba(209, 75, 75, 0.2); color: var(--err); } .agent-item-task { font-size: 10px; color: var(--muted); margin-bottom: 4px; word-break: break-word; } .agent-item-logs { display: none; margin-top: 8px; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; max-height: 150px; overflow-y: auto; font-size: 10px; line-height: 1.5; font-family: 'IBM Plex Mono', monospace; color: var(--muted); } .agent-item.expanded .agent-item-logs { display: block; } .agent-log-entry { margin-bottom: 3px; } .agent-log-entry-time { color: var(--muted); opacity: 0.6; margin-right: 6px; } .agent-log-entry-type { color: var(--brand); font-weight: 600; margin-right: 6px; } .agent-log-entry-content { color: var(--text); } /* Error Response Panel */ #error-response-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(16, 32, 64, 0.16); z-index: 9998; max-width: 520px; width: 90vw; max-height: 80vh; display: none; flex-direction: column; overflow: hidden; } #error-response-panel.visible { display: flex; } .error-response-header { padding: 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .error-response-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 4px; } .error-response-desc { font-size: 12px; color: var(--muted); line-height: 1.6; } .error-response-content { flex: 1; overflow-y: auto; padding: 16px; } .error-response-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .error-option-btn { padding: 10px 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600; text-align: left; transition: all 0.15s ease; font-family: 'Manrope', sans-serif; } .error-option-btn:hover { border-color: var(--brand); background: rgba(22, 104, 227, 0.08); } .error-option-btn.selected { border-color: var(--brand); background: rgba(22, 104, 227, 0.15); color: var(--brand-2); } .error-option-btn.danger { border-color: var(--err); color: var(--err); } .error-option-btn.danger:hover { background: rgba(209, 75, 75, 0.1); } .error-response-inputs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; padding: 12px; background: var(--panel-2); border-radius: 8px; display: none; } .error-response-inputs.visible { display: flex; } .input-field { display: flex; flex-direction: column; gap: 4px; } .input-field label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; } .input-field input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 12px; font-family: 'Manrope', sans-serif; } .input-field input::placeholder { color: var(--muted); opacity: 0.6; } .input-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(22, 104, 227, 0.1); } .error-response-footer { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-shrink: 0; justify-content: flex-end; } .btn-error-submit { padding: 8px 14px; background: var(--brand); color: #fff; border: none; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'Manrope', sans-serif; transition: background 0.15s ease; } .btn-error-submit:hover { background: var(--brand-2); } .btn-error-cancel { padding: 8px 14px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'Manrope', sans-serif; transition: all 0.15s ease; } .btn-error-cancel:hover { border-color: var(--muted); } .right-panel { grid-area: right; display: flex; flex-direction: column; } .right-section { padding: 7px 10px; border-bottom: 1px solid var(--line); } .sys-grid { margin-top: 5px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .sys-card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); padding: 4px 8px; min-height: 42px; } .sys-card.full { grid-column: 1 / -1; min-height: 42px; } .sys-k { font-size: 9px; font-weight: 800; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } .sys-v { margin-top: 1px; font-size: 13px; font-weight: 800; color: #0d2858; letter-spacing: -0.01em; } .sys-sub { margin-top: 1px; font-size: 10px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; } .sys-meter { margin-top: 3px; height: 4px; border-radius: 999px; background: #e5edf7; overflow: hidden; } .sys-meter > i { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #1e9d7b 0%, #1b75e6 55%, #0f4fba 100%); transition: width 0.35s ease; } .sys-meter-track { flex: 1; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; } .sys-meter-track > i { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #1e9d7b 0%, #1b75e6 55%, #0f4fba 100%); transition: width 0.35s ease; } :root[data-theme="dark"] .sys-meter-track { background: #1e2535; } #r-live-steps, #r-recent-turns { max-height: none !important; overflow: visible !important; min-height: 52px; } .info-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #edf2f8; font-size: 12px; } .info-row:last-child { border-bottom: 0; } .info-key { color: var(--muted); } .info-val { color: var(--text); font-weight: 700; } .info-val.green { color: var(--ok); } .info-val.red { color: var(--err); } .info-val.yellow { color: var(--warn); } #approvals-list { max-height: 220px; overflow-y: auto; } .approval-card { padding: 12px; margin-bottom: 8px; background: #fffaf0; border-color: #f1dbad; } .approval-action { color: #8b5c00; font-weight: 700; font-size: 12px; margin-bottom: 4px; } .approval-reason { color: #726344; font-size: 11px; line-height: 1.6; margin-bottom: 10px; } .approval-buttons { display: flex; gap: 8px; } .skills-search-bar { padding: 10px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; background: var(--panel-2); } .skill-item { padding: 10px; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .skill-item-name { font-size: 12px; font-weight: 700; color: #14478f; } .skill-remove-btn { border: 0; background: transparent; color: var(--muted); cursor: pointer; } .skill-remove-btn:hover { color: var(--err); } .skill-status-row { display:flex; align-items:center; gap:6px; margin-top:4px; flex-wrap: wrap; } .skill-badge { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; border-radius: 999px; border: 1px solid var(--line); background: #f5f8fd; color: #4e5f78; padding: 2px 7px; } .skill-badge.ready { background:#e8fbf3; color:#0f8b63; border-color:#bde9d4; } .skill-badge.needs_setup { background:#fff6e9; color:#b06b00; border-color:#f0d49e; } .skill-badge.blocked { background:#fff0f0; color:#c33f3f; border-color:#efc0c0; } .skill-badge.risk-low { background:#e8fbf3; color:#0f8b63; border-color:#bde9d4; } .skill-badge.risk-medium { background:#fff6e9; color:#b06b00; border-color:#f0d49e; } .skill-badge.risk-high { background:#fff0f0; color:#c33f3f; border-color:#efc0c0; } .skill-item-actions { display:flex; align-items:center; gap:6px; } .skill-mini-btn { border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; border-radius: 999px; padding: 3px 8px; font-size: 10px; font-weight: 700; font-family: 'Manrope', sans-serif; } .skill-mini-btn:hover { border-color:#c1d2ec; color:#26487e; } .skill-mini-btn.enabled { background:#e8fbf3; border-color:#bde9d4; color:#0f8b63; } .skill-details { margin: 8px 10px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdff; padding: 10px; display: none; } .skill-details.open { display:block; } .skill-details h4 { font-size: 11px; margin: 0 0 6px; color:#17417f; } .skill-details .line { font-size: 11px; color: var(--muted); margin: 2px 0; line-height: 1.5; } .skill-details .line code { color:#10346f; font-family:'IBM Plex Mono', monospace; } .skill-upload-btn { border: 1px solid #bcd4f6; background: #ebf3ff; color: #0d4faf; border-radius: 999px; padding: 5px 10px; font-size: 10px; font-weight: 700; cursor: pointer; font-family: 'Manrope', sans-serif; } .skill-upload-btn:hover { background:#dfeeff; border-color:#a8c7f2; } /* Skill cards - same color as chat sessions, green glow when enabled */ .skill-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; transition: all 0.2s ease; user-select: none; } .skill-card:hover { border-color: #c2d6f4; box-shadow: 0 4px 12px rgba(15, 60, 120, 0.08); } .skill-card.enabled { border-color: #86d4a8; background: linear-gradient(135deg, #f0faf4 0%, #e8f8ee 100%); box-shadow: 0 0 0 2px rgba(15, 159, 110, 0.12), 0 2px 8px rgba(15, 159, 110, 0.1); } .skill-card.enabled:hover { border-color: #5ec48a; box-shadow: 0 0 0 2px rgba(15, 159, 110, 0.18), 0 4px 12px rgba(15, 159, 110, 0.14); } .skill-card-top { display: flex; align-items: center; gap: 8px; } .skill-card-emoji { font-size: 18px; flex-shrink: 0; } .skill-card-info { flex: 1; min-width: 0; } .skill-card-name { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.3; } .skill-card.enabled .skill-card-name { color: #0a6b3d; } .skill-card-desc { font-size: 10px; color: var(--muted); line-height: 1.4; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .skill-card-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .skill-card-dot { width: 8px; height: 8px; border-radius: 50%; background: #c5d0de; transition: all 0.2s ease; } .skill-card.enabled .skill-card-dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(15, 159, 110, 0.16); } /* Context pinning - message selection mode */ .msg.pin-selectable { cursor: pointer; border-radius: 12px; padding: 12px 16px; margin: 4px -16px; transition: all 0.2s ease; } .msg.pin-selectable:hover { background: #f0f4fb; } .msg.pin-selected { background: linear-gradient(135deg, #f0faf4 0%, #e8f8ee 100%) !important; border: 1px solid #86d4a8; box-shadow: 0 0 0 2px rgba(15, 159, 110, 0.12); } .context-pin-active #context-pin-btn { background: #dce9ff; border-color: #9fc1f7; color: #0d4faf; } .pin-card { border: 1px solid #86d4a8; border-radius: 8px; background: #f0faf4; padding: 6px 8px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .pin-card-text { flex: 1; font-size: 11px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pin-card-remove { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 2px; } .pin-card-remove:hover { color: var(--err); } .skill-result { padding: 10px; margin-bottom: 6px; } .skill-result-name { font-size: 12px; font-weight: 700; margin-bottom: 3px; } .skill-result-desc { font-size: 11px; color: var(--muted); line-height: 1.6; margin-bottom: 6px; } .skill-install-btn { background: #ebf3ff; color: #0d4faf; border: 1px solid #bcd4f6; padding: 5px 10px; border-radius: 999px; } .spinner { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #d2dded; border-top-color: var(--brand); animation: spin 0.8s linear infinite; vertical-align: middle; margin-right: 6px; } .pulsing { animation: pulse 1.5s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.45} } /* -- Stop Button ---------------------------------- */ .send-btn { transition: background 0.15s ease !important; display: flex; align-items: center; justify-content: center; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd7e8; border-radius: 999px; } @media (max-width: 1200px) { body { /* main(채팅)이 유연한 공간을, 컨텍스트 패널은 제한된 폭을 갖도록. 이전엔 컬럼이 뒤바뀌어 컨텍스트가 1fr(화면 절반 이상)을 차지했음. */ grid-template-columns: 1fr minmax(160px, 200px); grid-template-areas: "header header" "main right"; } aside { display: none; } /* No manual resize on tablet — CSS owns the column widths here. */ #right-panel-resize-handle { display: none !important; } /* Collapsed → shrink the right column to just the rail instead of a 300px gap. */ body.right-collapsed { grid-template-columns: 1fr 44px; } } @media (max-width: 1024px) { body { padding: 0; gap: 0; grid-template-rows: auto 1fr 56px; grid-template-columns: 1fr; grid-template-areas: "header" "content" "mobile-nav"; } header { border-radius: 0; border-left: none; border-right: none; border-top: none; flex-wrap: wrap; padding: 8px 12px 0; gap: 6px; height: auto; } /* 앱 버튼 스트립 — 두 번째 행, 가로 스크롤 */ header .mode-toggle { flex: 0 0 100%; order: 10; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border: none; background: transparent; border-radius: 0; padding: 4px 0 8px; margin-left: 0 !important; gap: 6px; /* 오른쪽 페이드 힌트 */ -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%); mask-image: linear-gradient(to right, black 80%, transparent 100%); } header .mode-toggle::-webkit-scrollbar { display: none; } header .mode-toggle .mode-btn { flex-shrink: 0; white-space: nowrap; padding: 6px 12px; font-size: 12px; } aside { display: none; } .status-bar { display: none; } /* Both panels share the content cell; JS toggles which is visible */ main { grid-area: content; border-radius: 0; } .right-panel { grid-area: content; display: none; border-radius: 0; } body.mob-ctx main { display: none; } body.mob-ctx .right-panel { display: flex; } /* Sidebar — full screen overlay when menu tab is active */ body.mob-menu aside { display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; z-index: 600; overflow-y: auto; border: none; border-radius: 0; animation: mobMenuSlideUp 0.22s ease; padding-top: 52px; } body.mob-menu aside #mob-menu-close { display: block !important; position: fixed; top: 12px; right: 12px; } @keyframes mobMenuSlideUp { from { transform: translateY(5%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Hide desktop resize handle on mobile */ #right-panel-resize-handle { display: none !important; } /* Prevent iOS auto-zoom on input focus (requires ≥16px) */ #chat-input, input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea { font-size: 16px !important; } #chat-messages, #main-content { padding: 12px; } .chat-input-area, .mission-bar { padding: 8px 10px; } /* Show mobile bottom nav */ #mobile-nav { display: flex !important; } } /* --- Mobile Bottom Nav ---------------------------- */ #mobile-nav { display: none; grid-area: mobile-nav; align-items: stretch; background: var(--panel); border-top: 1px solid var(--line); /* 메뉴(aside)가 열리면 position:fixed;inset:0;z-index:600 풀스크린 오버레이가 되는데, 이 바는 z-index가 없어서 그 밑에 깔려 탭이 안 눌림(2026-07-21, "메뉴 누르면 못 빠져나옴" 리포트) — 항상 그 위에 떠 있도록 고정. */ position: relative; z-index: 601; } .mob-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: none; background: transparent; color: var(--muted); font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; padding: 6px 4px; border-top: 2px solid transparent; transition: color 0.15s, border-color 0.15s; -webkit-tap-highlight-color: transparent; } .mob-tab.active { color: var(--brand); border-top-color: var(--brand); } .mob-tab svg { width: 20px; height: 20px; stroke-width: 2; } /* --- Heartbeat Page ------------------------------- */ #heartbeat-view { display: none; flex-direction: column; grid-column: 1 / -1; /* span all columns when visible */ grid-row: 2; height: 100%; overflow: hidden; background: var(--surface); border-radius: 14px; border: 1px solid var(--line); } .hb-topbar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #fff; flex-shrink: 0; } .hb-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #ccc; flex-shrink: 0; } .hb-status-dot.active { background: var(--ok); box-shadow: 0 0 0 3px rgba(15,159,110,0.15); animation: hbPulse 2s ease infinite; } @keyframes hbPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(15,159,110,0.15); } 50% { box-shadow: 0 0 0 6px rgba(15,159,110,0.08); } } .hb-status-dot.paused { background: #f0ad4e; } .hb-topbar-label { font-size: 13px; font-weight: 700; color: var(--text); } .hb-topbar-meta { font-size: 11px; color: var(--muted); } .hb-topbar-actions { margin-left: auto; display: flex; gap: 8px; } .hb-btn { border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 8px; padding: 5px 12px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: 'Manrope',sans-serif; display: flex; align-items: center; gap: 5px; } .hb-btn:hover { background: #f5f7fa; } .hb-btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); } .hb-btn.primary:hover { opacity: 0.9; } .hb-btn.danger { color: var(--err); border-color: #f5c6cb; } .hb-content { flex: 1; overflow-y: auto; padding: 20px; } .hb-section { margin-bottom: 24px; } .hb-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .hb-section-dot { width: 8px; height: 8px; border-radius: 50%; } .hb-section-dot.red { background: #e74c3c; } .hb-section-dot.yellow { background: #f0ad4e; } .hb-section-dot.green { background: var(--ok); } .hb-section-dot.gray { background: #ccc; } .hb-card { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 12px 14px; margin-bottom: 8px; cursor: grab; transition: all 0.15s ease; display: flex; align-items: flex-start; gap: 10px; } .hb-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .hb-card.running { border-color: var(--brand); background: #f0f4ff; box-shadow: 0 0 0 2px rgba(55,110,245,0.12); } .hb-card.completed { opacity: 0.6; } .hb-card.paused { opacity: 0.7; border-style: dashed; } .hb-card-drag { color: var(--muted); font-size: 14px; cursor: grab; user-select: none; flex-shrink: 0; padding-top: 2px; } .hb-card-body { flex: 1; min-width: 0; } .hb-card-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; } .hb-card-meta { font-size: 11px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; } .hb-card-actions { display: flex; gap: 4px; flex-shrink: 0; align-items: flex-start; } .hb-card-btn { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 3px 6px; border-radius: 4px; } .hb-card-btn:hover { background: #f0f4fa; color: var(--text); } .hb-card-btn.danger:hover { color: var(--err); background: #fef0f0; } .hb-empty { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 13px; line-height: 1.8; } /* Automated session indicator in sidebar */ .session-auto-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; color: #c77d00; background: #fff8e7; border: 1px solid #f0dfa0; border-radius: 4px; padding: 1px 5px; font-weight: 700; } /* Add task modal */ .hb-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 10000; display: flex; align-items: center; justify-content: center; } .hb-modal { background: #fff; border-radius: 14px; padding: 24px; width: 420px; max-height: 80vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.15); } .hb-modal h3 { margin: 0 0 16px; font-size: 16px; } .hb-modal label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin: 10px 0 4px; } .hb-modal input, .hb-modal textarea, .hb-modal select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: 'Manrope',sans-serif; box-sizing: border-box; } .hb-modal textarea { min-height: 80px; resize: vertical; } .hb-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } /* Error Response Panel - Inline Styling */ .error-response-panel { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: var(--panel); margin: 12px 0; animation: slideDown 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .error-header { margin-bottom: 16px; } .error-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; } .error-description { font-size: 13px; color: var(--muted); line-height: 1.5; } .error-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 16px 0; } .error-option-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); cursor: pointer; transition: all 0.2s ease; font-family: inherit; font-size: 13px; text-align: left; white-space: normal; } .error-option-btn:hover:not(.danger):not(:disabled) { background: rgba(22, 104, 227, 0.08); border-color: var(--brand); transform: translateY(-1px); } .error-option-btn:active:not(.danger):not(:disabled) { transform: translateY(0); } .error-option-btn.danger { border-color: var(--err); color: var(--err); } .error-option-btn.danger:hover { background: rgba(209, 75, 75, 0.1); } .error-option-btn:disabled { opacity: 0.5; cursor: not-allowed; } .error-inputs { display: none; flex-direction: column; gap: 12px; margin-top: 16px; padding: 16px; padding-top: 0; border-top: 1px solid var(--line); } .error-inputs.visible { display: flex; } .input-field { display: flex; flex-direction: column; gap: 6px; } .input-field label { font-size: 13px; font-weight: 500; color: var(--text); } .input-field input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; font-size: 13px; background: var(--panel-2); color: var(--text); transition: all 0.2s ease; } .input-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22, 104, 227, 0.1); } .continue-btn { padding: 10px 16px; background: var(--brand); color: white; border: none; border-radius: 6px; font-weight: 500; font-size: 13px; cursor: pointer; transition: all 0.2s ease; margin-top: 8px; } .continue-btn:hover { background: #0f4ac9; transform: translateY(-1px); } .continue-btn:active { transform: translateY(0); } .continue-btn:disabled { opacity: 0.5; cursor: not-allowed; } .error-context { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .error-context-btn { background: none; border: none; color: var(--brand); cursor: pointer; font-size: 12px; text-decoration: underline; padding: 0; } .error-context-detail { display: none; margin-top: 8px; padding: 8px 12px; background: rgba(0,0,0,0.02); border-radius: 6px; border-left: 3px solid var(--muted); font-size: 12px; color: var(--muted); font-family: 'Monaco', 'Courier New', monospace; max-height: 200px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; } .error-context-detail.visible { display: block; } /* SMILES structure figure — textbook-style inline diagram, no header/button/border chrome */ .smiles-inline { display: inline-block; vertical-align: middle; margin: 1px 2px; } .smiles-inline svg { display: block; max-width: 100%; } /* Music widget */ .music-widget { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 10px 0; background: var(--surface); } .music-widget-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--hover); border-bottom: 1px solid var(--line); } .music-widget-label { font-size: 12px; font-weight: 600; color: var(--muted); } .music-render-btn { font-size: 12px; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--brand); background: var(--brand); color: #fff; cursor: pointer; font-family: inherit; } .music-render-btn:disabled { opacity: 0.5; cursor: default; } .music-widget-body { overflow: hidden; transition: max-height 0.2s ease; } .music-widget-body.collapsed { max-height: 0 !important; } .music-output { padding: 12px; } .music-output img { width: 100%; height: auto; display: block; } midi-player { display: block; width: 100%; max-width: 420px; margin-top: 6px; --player-row-height: 16px; --player-font-size: 11px; } .music-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; } .music-dl-btn { font-size: 12px; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; } .music-dl-btn:hover { background: var(--hover); } .music-dl-btn.btn-green { background:#0d2b18; border-color:#2ea043; color:#3fb950; } .music-dl-btn.btn-green:hover { background:#163d22; } .music-dl-btn.btn-purple { background:#1e1040; border-color:#7c3aed; color:#a78bfa; } .music-dl-btn.btn-purple:hover { background:#281552; } .music-dl-btn.btn-amber { background:#2d1d04; border-color:#d97706; color:#fbbf24; } .music-dl-btn.btn-amber:hover { background:#3d2806; } .music-dl-btn.btn-blue { background:#071d3a; border-color:#2563eb; color:#60a5fa; } .music-dl-btn.btn-blue:hover { background:#0a2848; } .music-page-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: var(--muted); } .music-page-btn { padding: 2px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font-size: 13px; font-family: inherit; line-height: 1.4; } .music-page-btn:disabled { opacity: 0.35; cursor: default; } .music-page-btn:not(:disabled):hover { background: var(--hover); } .midi-router-panel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; width: 100%; } .midi-router-sel { font-size: 11px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); max-width: 200px; flex: 1; } .midi-router-status { font-size: 11px; color: var(--muted); } /* ── Code Editor View ────────────────────────────────────────── */ #code-view { display: none; height: 100%; background: var(--bg); overflow: hidden; } #code-view.active { display: grid; grid-template-columns: 1fr 5px var(--ai-panel-w, 360px); grid-template-rows: 1fr auto; grid-template-areas: "editor vresize ai" "term term ai"; } .code-tabs-bar { display: flex; align-items: flex-start; background: #0d1f1a; border-bottom: 2px solid #1a4a35; flex-shrink: 0; min-height: 28px; } #code-file-tabs { flex-wrap: wrap; max-height: 56px; overflow: hidden; align-content: flex-start; } .code-file-tab { display: flex; align-items: center; gap: 4px; padding: 0 10px; height: 28px; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6b9e82; background: transparent; border-right: 1px solid #1a4a35; white-space: nowrap; user-select: none; flex-shrink: 0; border-top: 2px solid transparent; } .code-file-tab.active { color: #c8e6c0; background: #112b20; border-top-color: #22c55e; } .code-file-tab:hover:not(.active) { color: #a5d6a7; background: #0f2318; } .code-file-tab.diff-active { border-top-color: #f0ad4e; background: #2a2510; color: #f0d060; } .code-file-tab-close { font-size: 11px; color: #3d6b4f; margin-left:2px; opacity:0; transition: opacity .15s; } .code-file-tab:hover .code-file-tab-close, .code-file-tab.active .code-file-tab-close { opacity: 1; } .code-file-tab-close:hover { color: #f87171; } .code-new-tab-btn { padding: 0 8px; height: 28px; cursor: pointer; color: #3d6b4f; font-size: 16px; background: transparent; border: none; flex-shrink: 0; } .code-new-tab-btn:hover { color: #22c55e; } .code-toolbar { margin-left: auto; display: flex; align-items: center; gap: 5px; padding: 0 10px; flex-shrink: 0; height: 100%; border-left: 1px solid #1a4a35; } /* 기능별 버튼 색상 */ .code-tool-btn { padding: 2px 9px; border-radius: 4px; cursor: pointer; font-size: 11px; white-space: nowrap; font-weight: 600; border: 1px solid; transition: filter .15s; } .code-tool-btn:hover { filter: brightness(1.2); } .code-tool-btn.btn-folder { background:#1a2e20; border-color:#2d5a3a; color:#6fcf8a; font-family:'IBM Plex Mono',monospace; font-size:11px; } .code-tool-btn.btn-ai { background:#1e1a2e; border-color:#4a3d72; color:#a78bfa; } .code-tool-btn.btn-run { background:#2a1e0d; border-color:#6b3f10; color:#fb923c; } .code-tool-btn.btn-save { background:#0d1f2e; border-color:#1a4a6b; color:#60a5fa; } .code-tool-btn.primary { background:#166534; border-color:#22c55e; color:#fff; } .code-tool-btn.primary.busy { background:#7f1d1d; border-color:#ef4444; } .code-editor-col { grid-area: editor; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } #code-editor-container { flex: 1; min-width: 0; position: relative; background: #1e1e1e; } .code-vresize { grid-area: vresize; width: 5px; cursor: col-resize; background: #333; flex-shrink: 0; transition: background .15s; } .code-vresize:hover { background: #3b78ff; } #code-ai-panel { grid-area: ai; min-width: 220px; display: flex; flex-direction: column; background: #080f0c; border-left: 1px solid #1a3a28; overflow: hidden; } .code-bottom-panels { grid-area: term; display: flex; flex-direction: column; } #code-term-panel.code-term-fullscreen { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 2000; border-top: none !important; } #code-term-panel.code-term-fullscreen #code-term-drag { display: none; } #code-term-fullscreen-btn.active { color: #8b5cf6 !important; } .code-ai-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid #1a3a28; background: linear-gradient(135deg, #0d1f17 0%, #0f1c24 100%); font-size: 13px; font-weight: 800; flex-shrink: 0; letter-spacing: .01em; } #code-ai-title { color: #22c55e; text-shadow: 0 0 8px rgba(34,197,94,.4); } #code-ai-messages { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; background: #080f0c; } /* ── Code Diff Bar ──────────────────────────────────────────────────── */ #code-diff-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #1a2e1a; border-bottom: 1px solid #2d5a3a; font-size: 13px; font-family: 'IBM Plex Mono', monospace; color: #a7d8b8; flex-shrink: 0; } #code-diff-label { margin-right: auto; } #code-diff-accept { background: #28a745; color: #fff; border: none; border-radius: 4px; padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s; } #code-diff-accept:hover { background: #218838; } #code-diff-reject { background: #dc3545; color: #fff; border: none; border-radius: 4px; padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s; } #code-diff-reject:hover { background: #c82333; } #code-diff-container { display: none; } /* Legacy - no longer used */ .code-ai-msg { font-size: 12px; line-height: 1.6; } .code-ai-msg.user { color: #dcfce7; font-weight: 600; background: linear-gradient(135deg, #166534 0%, #14532d 100%); border: 1px solid #22c55e40; border-radius: 14px 14px 4px 14px; padding: 7px 12px; align-self: flex-end; max-width: 85%; margin-left: auto; box-shadow: 0 2px 8px rgba(34,197,94,.15); } .code-ai-msg.assistant { color: #d1fae5; white-space: pre-wrap; background: #0f1f18; border-radius: 4px 14px 14px 14px; padding: 8px 12px; max-width: 92%; border: 1px solid #1e4a35; box-shadow: 0 1px 4px rgba(0,0,0,.3); } .code-ai-msg.thinking { color: #4ade80; font-style: italic; font-size: 11px; background: #0a1a10; border-radius: 8px; padding: 5px 10px; max-width: 72%; border: 1px solid #1a3a22; display: flex; align-items: center; gap: 7px; } .code-ai-msg.thinking::before { content: ''; display: inline-block; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: thinking-pulse 1s ease-in-out infinite; } @keyframes thinking-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.2); } } .code-ai-msg.thinking::after { content: '···'; letter-spacing: 0.1em; animation: thinking-dots 1.4s steps(4, end) infinite; } @keyframes thinking-dots { 0% { opacity: 0.1; } 33% { opacity: 0.5; } 66% { opacity: 0.9; } 100% { opacity: 0.1; } } .code-ai-msg.system { color: #4b7a5e; font-size: 11px; text-align: center; background: transparent; padding: 3px 0; font-family: 'IBM Plex Mono', monospace; } .code-ai-plan { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 6px; padding: 8px 12px; margin: 4px 0; font-size: 12px; line-height: 1.5; color: #93c5fd; } .code-ai-tool-card { display: flex; align-items: center; gap: 6px; padding: 4px 10px; margin: 3px 0; border-left: 3px solid #22c55e; border-radius: 4px; background: #0d1f16; font-size: 11px; font-family: 'IBM Plex Mono', monospace; transition: background 0.15s; } .code-ai-tool-icon { font-size: 13px; flex-shrink: 0; } .code-ai-tool-name { font-weight: 600; color: #c8e6c0; } .code-ai-tool-result { font-size: 11px; color: #6b9e82; margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; } .code-ai-tech-selector { display: flex; gap: 3px; } .code-ai-tech-btn { background: #0d1f17; border: 1px solid #1e4a35; border-radius: 6px; padding: 2px 8px; font-size: 10px; font-weight: 600; color: #4b7a5e; cursor: pointer; transition: all .15s; white-space: nowrap; } .code-ai-tech-btn.active { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,.12); box-shadow: 0 0 0 1px rgba(34,197,94,.2); } .code-ai-tech-btn:hover:not(.active) { border-color: #2d6a4a; color: #86efac; } .code-ai-msg.streaming { position: relative; } .code-ai-msg.streaming::after { content: ''; display: inline-block; width: 6px; height: 14px; background: var(--brand); border-radius: 2px; margin-left: 2px; animation: ai-cursor-blink 0.8s steps(2) infinite; } @keyframes ai-cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .code-ai-code-block { margin: 6px 0; border: 1px solid var(--line); border-radius: 6px; overflow: visible; } .code-ai-code-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; background: var(--panel-2); font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .code-ai-open-btn { display: block; margin: 0 auto 8px; background: var(--brand); color: #fff; border: none; border-radius: 4px; padding: 4px 12px; font-size: 11px; font-weight: 700; cursor: pointer; transition: opacity .15s; } .code-ai-open-btn:hover { opacity: 0.8; } /* ── Model selector card ───────────────────────────────────────────────── */ .csb-model-card { background: linear-gradient(135deg, #0d1f17 0%, #111e2a 100%); border: 1px solid #1e4a38; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; transition: border-color .2s; } .csb-model-card:focus-within { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.15); } .csb-model-label { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: #22c55e; text-transform: uppercase; letter-spacing: .06em; } .csb-model-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 5px #22c55e; flex-shrink: 0; animation: csb-pulse 2.4s ease-in-out infinite; } @keyframes csb-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 5px #22c55e; } 50% { opacity: .5; box-shadow: 0 0 2px #22c55e; } } .csb-model-select-wrap { position: relative; display: flex; align-items: center; } .csb-model-select-wrap::after { content: '▾'; position: absolute; right: 8px; font-size: 10px; color: #22c55e; pointer-events: none; } .csb-model-select-wrap select { width: 100%; appearance: none; -webkit-appearance: none; background: transparent; border: none; outline: none; font-size: 12px; font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: #d4ffd4; -webkit-text-fill-color: #d4ffd4; cursor: pointer; padding-right: 20px; color-scheme: dark; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .csb-model-select-wrap select option { background: #1a2a1a; color: #d4ffd4; } .csb-new-session-btn { width: 100%; padding: 8px; border: 1px solid #2d3748; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #94a3b8; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .02em; transition: border-color .2s, color .2s, box-shadow .2s; display: flex; align-items: center; justify-content: center; gap: 6px; } .csb-new-session-btn:hover { border-color: #a78bfa; color: #c4b5fd; box-shadow: 0 0 0 2px rgba(167,139,250,.15); } /* ── Sidebar top tab bar ──────────────────────────────────────────────── */ .csb-tab-bar { display: flex; flex-shrink: 0; background: #0a1a12; border-bottom: 1px solid #1a4a35; padding: 4px 6px 0; gap: 2px; } .code-sb-tab { flex: 1; border: none; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; color: var(--muted); padding: 6px 4px 5px; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; transition: color .15s, background .15s; } .code-sb-tab:hover:not(.active) { color: #a5d6a7; background: rgba(34,197,94,.07); } .code-sb-tab.active { color: #22c55e; border-bottom-color: #22c55e; background: rgba(34,197,94,.1); } /* ── Terminal + companion row ─────────────────────────────────────────── */ .csb-term-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; } .csb-term-btn { flex: 1; padding: 8px 0; border: 1px solid #1e3a28; background: linear-gradient(135deg, #0c1f14 0%, #0f1f1a 100%); color: #6b9e82; border-radius: 10px; cursor: pointer; font-size: 12px; font-family: 'IBM Plex Mono', monospace; font-weight: 600; letter-spacing: .02em; transition: border-color .2s, color .2s, box-shadow .2s; display: flex; align-items: center; justify-content: center; gap: 5px; } .csb-term-btn:hover { border-color: #22c55e; color: #86efac; box-shadow: 0 0 0 2px rgba(34,197,94,.12); } .csb-term-btn.active { border-color: #22c55e; color: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.15); } /* ─────────────────────────────────────────────────────────────────────── */ .code-sb-tab.active { color: #22c55e; border-bottom-color: #22c55e; } .code-sb-tab:hover:not(.active) { color: var(--text); } .csb-file-item { display: flex; align-items: center; padding: 5px 10px 5px 12px; font-size: 11px; font-family: 'IBM Plex Mono', monospace; color: var(--text); cursor: pointer; gap: 6px; transition: background .1s; } .csb-file-item:hover { background: rgba(34,197,94,0.1); } .csb-file-item:hover .csb-del { opacity: 1; } .csb-del { margin-left: auto; opacity: 0; background: none; border: none; color: #f87171; cursor: pointer; font-size: 13px; padding: 1px 5px; border-radius: 4px; flex-shrink: 0; transition: opacity .15s; } .csb-del:hover { background: rgba(248,113,113,.18); } .csb-add-btn { opacity: 0; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 1px 4px; border-radius: 4px; flex-shrink: 0; transition: opacity .15s; line-height: 1; } .csb-file-item:hover .csb-add-btn { opacity: 1; } .csb-add-btn:hover { background: rgba(99,102,241,.2); color: var(--brand); } .csb-drop-target { background: rgba(99,102,241,.15) !important; outline: 1px dashed #818cf8; border-radius: 4px; } #csb-ctx { position: fixed; z-index: 9999; display: none; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 4px 20px rgba(0,0,0,.45); min-width: 148px; overflow: hidden; padding: 3px 0; } .csb-ctx-item { padding: 7px 16px; font-size: 12px; cursor: pointer; white-space: nowrap; color: var(--text); } .csb-ctx-item:hover { background: var(--brand); color: #fff; } .code-folder-item { display: flex; align-items: center; padding: 5px 10px 5px 14px; font-size: 11px; font-family: 'IBM Plex Mono', monospace; color: var(--text); transition: background .1s; } .code-folder-item:hover { background: rgba(34,197,94,0.12); } .code-folder-item:hover .code-folder-del { opacity: 1; } .code-folder-del { flex-shrink: 0; opacity: 0; background: none; border: none; color: #f87171; cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 4px; line-height: 1; transition: opacity .15s, background .15s; } .code-folder-del:hover { background: rgba(248,113,113,0.18); } .code-ai-code-block pre { margin: 0; padding: 8px; overflow-x: auto; font-size: 11px; font-family: 'IBM Plex Mono', 'Fira Code', monospace; line-height: 1.5; background: var(--panel); white-space: pre; color: var(--text); } .diff-block { margin: 0; padding: 4px 0; overflow-x: auto; font-size: 11px; font-family: 'IBM Plex Mono', 'Fira Code', monospace; line-height: 1.6; background: var(--panel); } .diff-line { display: block; padding: 0 8px; white-space: pre; } .diff-line-add { background: rgba(34,197,94,0.13); color: #4ade80; } .diff-line-del { background: rgba(248,113,113,0.13); color: #f87171; } .diff-line-hunk { color: #60a5fa; background: rgba(96,165,250,0.07); } .diff-line-file { color: var(--muted); font-style: italic; } .code-ai-input-row { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid #1a3a28; flex-shrink: 0; background: #0d1f17; } #code-ai-input { flex: 1; resize: none; border: 1.5px solid #1e4a35; border-radius: 14px; padding: 8px 14px; font-size: 12px; font-family: inherit; background: #0a1812; color: #c8e6c0; min-height: 38px; max-height: 200px; transition: border-color .2s, box-shadow .2s; } .code-ai-input-row.drag-over { outline: 2px solid #22c55e; border-radius: 4px; } .code-ai-img-thumb { position: relative; display: inline-flex; } #code-ai-input::placeholder { color: #3d6b4f; } #code-ai-input:focus { outline: none; border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); } /* ── Chat inline terminal ─────────────────────────────────────── */ #chat-terminal-panel { display: none; flex-direction: column; background: #0c0c0c; border-top: 2px solid #222; flex-shrink: 0; position: relative; height: 280px; min-height: 120px; max-height: 70vh; } #chat-term-resize-handle { position: absolute; top: 0; left: 0; right: 0; height: 6px; cursor: ns-resize; z-index: 10; transition: background 0.15s; } #chat-term-resize-handle:hover { background: rgba(59,120,255,0.35); } #chat-terminal-panel .ct-bar { display: flex; align-items: center; justify-content: space-between; padding: 3px 8px 3px 4px; background: #161616; border-bottom: 1px solid #2a2a2a; flex-shrink: 0; min-height: 28px; } #chat-shell-tabs { display: flex; align-items: stretch; overflow-x: auto; flex: 1; } .ct-tab { display: flex; align-items: center; gap: 5px; padding: 2px 10px; cursor: pointer; font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: 12px; color: #767676; background: transparent; border-top: 2px solid transparent; white-space: nowrap; user-select: none; flex-shrink: 0; } .ct-tab.active { color: #cccccc; background: #0c0c0c; border-top-color: #3b78ff; } .ct-tab-close { font-size: 13px; color: #555; margin-left: 3px; line-height: 1; } .ct-tab-close:hover { color: #e74856; } #chat-term-container { position: relative; flex: 1; min-height: 0; overflow: hidden; } /* ── Inline Diff Decorations (VSCode Copilot style) ──────────────────── */ .inline-diff-added { background: rgba(40, 167, 69, 0.15) !important; border-left: 3px solid #28a745 !important; } .inline-diff-glyph-added { background: #28a745 !important; width: 4px !important; margin-left: 3px; } .inline-diff-deleted-zone { background: rgba(220, 53, 69, 0.08); border-left: 3px solid #dc3545; font-family: 'IBM Plex Mono', 'Fira Code', 'Courier New', monospace; font-size: 13px; line-height: 1.6; overflow: hidden; } .inline-diff-deleted-line { color: #dc3545; text-decoration: line-through; opacity: 0.7; padding: 0 8px; white-space: pre; } .inline-diff-hunk-actions { position: absolute; display: flex; gap: 4px; z-index: 20; padding: 3px 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.25); pointer-events: auto; } .inline-diff-accept-btn { background: #28a745; color: #fff; border: none; border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .15s; line-height: 1.4; } .inline-diff-accept-btn:hover { background: #218838; } .inline-diff-reject-btn { background: #dc3545; color: #fff; border: none; border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .15s; line-height: 1.4; } .inline-diff-reject-btn:hover { background: #c82333; } /* ── Streaming Diff (real-time editing indicator) ──────────────────────── */ .inline-diff-streaming-change { background: rgba(255, 193, 7, 0.12) !important; border-left: 3px solid #ffc107 !important; } .inline-diff-glyph-change { background: #ffc107 !important; width: 4px !important; margin-left: 3px; } .inline-diff-streaming-delete { background: rgba(220, 53, 69, 0.10) !important; border-left: 3px solid #dc3545 !important; text-decoration: line-through; opacity: 0.75; } .inline-diff-glyph-delete { background: #dc3545 !important; width: 4px !important; margin-left: 3px; } .inline-diff-streaming-add-marker { border-left: 3px solid #28a745 !important; } /* ── Tab Change Indicators ───────────────────────────────────────────── */ .code-tab-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; border-radius: 8px; background: #f0ad4e; color: #000; font-size: 9px; font-weight: 800; padding: 0 3px; margin-right: 4px; line-height: 1; } /* ── AI Mode Selector ────────────────────────────────────────────────── */ @keyframes pulse-red { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.8;transform:scale(1.04)} } /* ── Live server log bubble (shown during AI file edits) ────────────── */ .code-ai-log-bubble { font-family: 'IBM Plex Mono', monospace; font-size: 10px; line-height: 1.6; color: #4a7a5c; background: #040e08; border: 1px solid #1a3a20; border-radius: 8px; padding: 5px 10px; margin: 2px 0; white-space: pre-wrap; word-break: break-all; transition: opacity .4s; max-height: 90px; overflow: hidden; } .log-live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; margin-right: 5px; vertical-align: middle; animation: log-blink 1.2s ease-in-out infinite; } @keyframes log-blink { 0%,100%{opacity:1} 50%{opacity:.2} } /* ── Block flip-flop alternating highlight ───────────────────────────── */ .ff-block-even { background-color: rgba(59,130,246,0.18) !important; } .ff-block-odd { background-color: rgba(251,146,60,0.18) !important; } /* ── Log search ──────────────────────────────────────────────────────── */ .log-line.no-match { display: none !important; } .log-hl { background: #fde047; color: #1a1a1a; border-radius: 2px; padding: 0 1px; } :root[data-theme="dark"] .log-hl { background: #854d0e; color: #fef3c7; }