:root {
    color-scheme: light;
    --bg: #F6F7F9;
    --card: #FFFFFF;
    --surface: rgba(255,255,255,.88);
    --panel: rgba(255,255,255,.74);
    --field: #FFFFFF;
    --subtle: #F3F4F6;
    --empty: #FAFAFA;
    --text: #111827;
    --muted: #6B7280;
    --border: #E5E7EB;
    --blue: #4F8DF7;
    --blue-dark: #2F6FEA;
    --hot: #F97316;
    --hot-soft: #FFF4ED;
    --danger: #EF4444;
    --success: #10B981;
    --shadow: 0 14px 40px rgba(15, 23, 42, .08);
    --soft-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #111318;
    --card: #1B1F27;
    --surface: rgba(27,31,39,.92);
    --panel: rgba(27,31,39,.82);
    --field: #151922;
    --subtle: #242A35;
    --empty: #151922;
    --text: #F4F6FA;
    --muted: #A7B0BF;
    --border: #303744;
    --blue: #6C86F6;
    --blue-dark: #5E76DE;
    --hot-soft: #3A2619;
    --shadow: 0 14px 40px rgba(0, 0, 0, .34);
    --soft-shadow: 0 8px 24px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle at top left, rgba(79,141,247,.15), transparent 34%), var(--bg);
    color: var(--text);
    font: 15px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-shell { max-width: 1440px; margin: 0 auto; padding: 18px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 4px 18px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 44px; height: 44px; border-radius: 16px; background: linear-gradient(135deg, var(--blue), #7fb0ff); color: #fff; display: grid; place-items: center; font-weight: 900; box-shadow: var(--soft-shadow); }
h1, h2, h3, p { margin: 0; }
.brand h1 { font-size: 24px; letter-spacing: -.03em; }
.brand p, .column-header p, .dialog-meta { color: var(--muted); font-size: 13px; }
.token-wallet { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 6px 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); box-shadow: var(--soft-shadow); color: var(--muted); }
.token-wallet-count { color: var(--text); font-weight: 900; font-size: 13px; }
.token-wallet-label { font-size: 12px; }
.token-wallet-button { width: 26px; height: 26px; padding: 0; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-size: 14px; display: grid; place-items: center; }
.topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.menu-toggle { white-space: nowrap; }
.toolbar-panel { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 0 0 16px; flex-wrap: wrap; }
.mode-switch { display: inline-flex; flex-wrap: wrap; gap: 9px; background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(239,246,255,.78)); border: 1px solid rgba(148,163,184,.34); border-radius: 18px; padding: 6px; box-shadow: var(--soft-shadow), inset 0 1px 0 rgba(255,255,255,.78); }
.mode-chip { --chip-accent: var(--blue); --chip-accent-deep: var(--blue-dark); --chip-soft: #EEF5FF; --chip-text: #1D4ED8; --chip-border: rgba(59,130,246,.28); --chip-border-hover: rgba(59,130,246,.52); --chip-glow: rgba(59,130,246,.28); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; background: linear-gradient(180deg, var(--chip-soft), var(--card)); color: var(--chip-text); border: 1px solid var(--chip-border); border-radius: 13px; padding: 9px 15px; overflow: hidden; white-space: nowrap; box-shadow: 0 5px 14px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255,255,255,.86); }
.mode-chip:nth-child(1) { --chip-accent: #F97316; --chip-accent-deep: #C2410C; --chip-soft: #FFF7ED; --chip-text: #C2410C; --chip-border: rgba(249,115,22,.28); --chip-border-hover: rgba(249,115,22,.52); --chip-glow: rgba(249,115,22,.28); }
.mode-chip:nth-child(2) { --chip-accent: #10B981; --chip-accent-deep: #047857; --chip-soft: #ECFDF5; --chip-text: #047857; --chip-border: rgba(16,185,129,.28); --chip-border-hover: rgba(16,185,129,.52); --chip-glow: rgba(16,185,129,.28); }
.mode-chip:nth-child(3) { --chip-accent: #3B82F6; --chip-accent-deep: #1D4ED8; --chip-soft: #EFF6FF; --chip-text: #1D4ED8; --chip-border: rgba(59,130,246,.28); --chip-border-hover: rgba(59,130,246,.52); --chip-glow: rgba(59,130,246,.28); }
.mode-chip:nth-child(4) { --chip-accent: #EC4899; --chip-accent-deep: #BE185D; --chip-soft: #FDF2F8; --chip-text: #BE185D; --chip-border: rgba(236,72,153,.28); --chip-border-hover: rgba(236,72,153,.52); --chip-glow: rgba(236,72,153,.28); }
.mode-chip:nth-child(5) { --chip-accent: #8B5CF6; --chip-accent-deep: #6D28D9; --chip-soft: #F5F3FF; --chip-text: #6D28D9; --chip-border: rgba(139,92,246,.28); --chip-border-hover: rgba(139,92,246,.52); --chip-glow: rgba(139,92,246,.28); }
.mode-switch + .mode-switch .mode-chip:nth-child(1) { --chip-accent: #3B82F6; --chip-accent-deep: #1D4ED8; --chip-soft: #EFF6FF; --chip-text: #1D4ED8; --chip-border: rgba(59,130,246,.28); --chip-border-hover: rgba(59,130,246,.52); --chip-glow: rgba(59,130,246,.28); }
.mode-switch + .mode-switch .mode-chip:nth-child(2) { --chip-accent: #EC4899; --chip-accent-deep: #BE185D; --chip-soft: #FDF2F8; --chip-text: #BE185D; --chip-border: rgba(236,72,153,.28); --chip-border-hover: rgba(236,72,153,.52); --chip-glow: rgba(236,72,153,.28); }
.mode-chip:hover { transform: translateY(-1px); border-color: var(--chip-border-hover); box-shadow: 0 9px 18px rgba(15, 23, 42, .09), inset 0 1px 0 rgba(255,255,255,.9); }
.mode-chip.active { background: linear-gradient(135deg, var(--chip-accent), var(--chip-accent-deep)); color: #fff; border-color: transparent; box-shadow: 0 10px 22px var(--chip-glow), inset 0 1px 0 rgba(255,255,255,.24); }
.mode-chip.active::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0 22%, rgba(255,255,255,.28) 40%, transparent 58%); opacity: .75; pointer-events: none; }
.mode-switch:has(+ .mode-switch) .mode-chip::before,
.mode-switch + .mode-switch .mode-chip::before,
.mode-switch:has(.mode-chip:nth-child(4)) .mode-chip::before { font-size: 16px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
.mode-switch:has(+ .mode-switch) .mode-chip:nth-child(1)::before { content: "📣"; }
.mode-switch:has(+ .mode-switch) .mode-chip:nth-child(2)::before { content: "🌿"; }
.mode-switch + .mode-switch .mode-chip:nth-child(1)::before { content: "🖥️"; }
.mode-switch + .mode-switch .mode-chip:nth-child(2)::before { content: "📱"; }
.mode-switch:has(.mode-chip:nth-child(4)) .mode-chip:nth-child(1)::before { content: "📣"; }
.mode-switch:has(.mode-chip:nth-child(4)) .mode-chip:nth-child(2)::before { content: "🌿"; }
.mode-switch:has(.mode-chip:nth-child(4)) .mode-chip:nth-child(3)::before { content: "🖥️"; }
.mode-switch:has(.mode-chip:nth-child(4)) .mode-chip:nth-child(4)::before { content: "📱"; }
.scale-control { display: inline-flex; align-items: stretch; gap: 6px; min-height: 46px; padding: 6px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); box-shadow: var(--soft-shadow); }
.scale-button { width: 36px; min-width: 36px; padding: 0; border-radius: 12px; background: var(--card); border: 1px solid var(--border); color: var(--text); font-size: 18px; display: grid; place-items: center; }
.scale-button:disabled { cursor: default; opacity: .42; transform: none; }
.scale-label { min-width: 104px; padding: 4px 10px; border-radius: 12px; background: transparent; color: var(--text); display: grid; place-items: center; line-height: 1.1; }
.scale-label span { color: var(--muted); font-size: 11px; font-weight: 700; }
.scale-label strong { font-size: 12px; font-weight: 900; }
.mode-count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: rgba(255,255,255,.82); color: var(--chip-accent-deep); display: inline-grid; place-items: center; font-size: 12px; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
.mode-chip.active .mode-count { background: rgba(255,255,255,.22); color: #fff; }
.agent-summary { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agent-indicator { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 10px 5px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); box-shadow: var(--soft-shadow); color: var(--text); font-weight: 800; }
.agent-indicator-count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--subtle); color: var(--muted); display: inline-grid; place-items: center; font-size: 12px; font-weight: 900; }
.agent-summary.has-connected-llm .agent-indicator-count { background: #ECFDF5; color: #047857; }
.agent-summary-details { color: var(--muted); }

.button, button, select, input, textarea { font: inherit; }
.button, button { border: 0; border-radius: 14px; padding: 10px 14px; font-weight: 800; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease, transform .08s ease; }
.button:active, button:active { transform: translateY(0) scale(.98); }
.button:disabled, button:disabled { cursor: default; opacity: .58; transform: none; }
.button-primary { background: var(--blue); color: #fff; }
.button-primary:hover { background: var(--blue-dark); transform: translateY(-1px); }
.button-ghost { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.button-danger { background: var(--danger); color: #fff; }
.button-success { background: var(--success); color: #fff; }

.search-panel { padding: 0 0 16px; }
.search-box { height: 48px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; display: flex; align-items: center; gap: 10px; padding: 0 14px; box-shadow: var(--soft-shadow); }
.search-box input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; color: var(--text); }
.status-panel { margin-bottom: 14px; }
.state-card { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 28px; text-align: center; box-shadow: var(--soft-shadow); }
.state-card.compact { padding: 18px; }
.state-icon { font-size: 30px; margin-bottom: 8px; }

.board-shell { position: relative; }
.board { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: var(--board-column-width, minmax(300px, calc((100% - 32px) / 3))); gap: 16px; align-items: stretch; min-height: calc(100vh - 150px); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-padding-inline: 0; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.board::-webkit-scrollbar { height: 8px; }
.board::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.board.drag-scroll-active { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.board.drag-scroll-active * { cursor: grabbing !important; }
.board.pinching,
.board.touch-dragging { scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.board-scroll-button { position: absolute; top: 50%; z-index: 8; width: 42px; height: 52px; padding: 0; border: 1px solid rgba(148,163,184,.38); border-radius: 14px; background: rgba(255,255,255,.92); color: var(--text); box-shadow: var(--shadow); display: grid; place-items: center; font-size: 32px; line-height: 1; backdrop-filter: blur(8px); opacity: 0; pointer-events: none; }
.board-scroll-prev { left: -12px; transform: translateY(-50%); }
.board-scroll-next { right: -12px; transform: translateY(-50%); }
.board-scroll-button:not(:disabled),
.board-shell.hover-left .board-scroll-prev:not(:disabled),
.board-shell.hover-right .board-scroll-next:not(:disabled),
.board-scroll-button:focus-visible { opacity: .96; pointer-events: auto; }
.board-scroll-button:active { transform: translateY(-50%) scale(.96); }
.board-scroll-button:disabled { opacity: .34; cursor: default; box-shadow: var(--soft-shadow); pointer-events: none; }
.column { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 14px; min-height: 68vh; display: flex; flex-direction: column; box-shadow: var(--soft-shadow); transition: .18s ease; scroll-snap-align: start; }
.column.drag-over { outline: 3px solid rgba(79,141,247,.28); background: var(--card); transform: translateY(-2px); }
.column-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.column h2 { font-size: 15px; }
.counter { min-width: 30px; height: 28px; padding: 0 9px; border-radius: 999px; background: var(--subtle); color: var(--muted); display: grid; place-items: center; font-weight: 900; }
.cards { display: flex; flex-direction: column; gap: 12px; min-height: 180px; flex: 1; }

.card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 13px; box-shadow: var(--soft-shadow); cursor: grab; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card:active { cursor: grabbing; }
.card.syncing { cursor: default; border-color: rgba(16,185,129,.55); box-shadow: 0 0 0 3px rgba(16,185,129,.12), var(--soft-shadow); }
.card.dragging { opacity: .72; transform: rotate(1deg) scale(1.015); }
.card.touch-drag-source { opacity: 0; }
.touch-drag-placeholder { border: 2px dashed rgba(79,141,247,.55); border-radius: 16px; background: rgba(79,141,247,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); animation: placeholderPulse .9s ease-in-out infinite alternate; }
.touch-drag-ghost { position: fixed !important; z-index: 1000; margin: 0; pointer-events: none; cursor: grabbing; box-shadow: 0 24px 70px rgba(15, 23, 42, .28); transform: rotate(1.5deg) scale(1.04); opacity: .98; }
.touch-drag-lifted { animation: touchLift .18s ease-out; }
.cards.touch-has-placeholder .empty { display: none; }
.card.hot { border-color: #FDBA74; background: linear-gradient(90deg, var(--hot-soft), var(--card) 34%); }
.card.hot::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 99px; background: var(--hot); }
.card-top { display: flex; gap: 9px; align-items: flex-start; }
.card h3 { font-size: 13px; line-height: 1.22; font-weight: 800; white-space: pre-wrap; overflow-wrap: anywhere; flex: 1; }
.hot-button { width: 32px; height: 32px; padding: 0; border-radius: 12px; background: var(--subtle); border: 1px solid var(--border); filter: grayscale(1); flex: 0 0 auto; }
.hot-button.active { filter: none; background: #FFF1E8; border-color: #FDBA74; box-shadow: 0 0 0 3px rgba(249,115,22,.12); }
.hot-badge { display: inline-flex; margin-top: 8px; border-radius: 999px; background: #FFEDD5; color: #C2410C; font-weight: 800; font-size: 12px; padding: 3px 8px; }
.card-description { margin-top: 9px; color: var(--text); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.badge { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 8px; border-radius: 999px; background: var(--subtle); color: var(--text); font-size: 12px; }
.badge.accent { background: #EEF5FF; color: #1D4ED8; }
.badge.llm { background: #EEF2FF; color: #4338CA; }
.badge.llm-priority { background: linear-gradient(135deg, #FEF3C7, #FFEDD5); color: #9A3412; border: 1px solid rgba(245,158,11,.38); font-weight: 900; }
.badge.llm-status { background: #F3E8FF; color: #7E22CE; }
.badge.llm-status.retry { background: #FFF7ED; color: #C2410C; border: 1px solid #FDBA74; font-weight: 900; }
.badge.llm-status.working { gap: 6px; }
.badge.llm-status.working::before { content: ""; width: 11px; height: 11px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; flex: 0 0 auto; animation: spin .75s linear infinite; }
.badge.syncing { gap: 6px; background: #ECFDF5; color: #047857; }
.badge.syncing::before { content: ""; width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; flex: 0 0 auto; animation: spin .75s linear infinite; }
.badge.token-cost { background: transparent; border: 1px solid var(--border); color: var(--muted); opacity: .72; font-size: 11px; }
.badge.comment-badge { cursor: help; }
.badge.muted { color: var(--muted); }
.ticket-note { display: grid; gap: 4px; margin-top: 10px; border: 1px solid #BFDBFE; background: #EFF6FF; color: #1E3A8A; border-radius: 12px; padding: 9px; font-size: 12px; }
.ticket-note span { white-space: pre-wrap; overflow-wrap: anywhere; }
.ticket-note.danger { border-color: #FECACA; background: #FEF2F2; color: #991B1B; }
.markdown-doc { display: grid; gap: 6px; overflow-wrap: anywhere; }
.markdown-doc h1, .markdown-doc h2, .markdown-doc h3 { font-size: 13px; line-height: 1.25; margin-top: 4px; }
.markdown-doc p { white-space: pre-wrap; }
.markdown-doc ul, .markdown-doc ol { margin: 0; padding-left: 18px; }
.markdown-doc li { margin: 2px 0; }
.markdown-doc blockquote { margin: 2px 0; padding: 7px 10px; border-left: 3px solid var(--blue); border-radius: 8px; background: rgba(79, 141, 247, .08); color: var(--text); }
.markdown-doc code { background: rgba(15, 23, 42, .08); border-radius: 5px; padding: 1px 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.markdown-doc pre { max-width: 100%; overflow: auto; margin: 2px 0; padding: 8px; border-radius: 10px; background: rgba(15, 23, 42, .08); }
.markdown-doc pre code { background: transparent; padding: 0; }
.markdown-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.markdown-table-wrap table { width: 100%; border-collapse: collapse; font-size: .95em; }
.markdown-table-wrap th, .markdown-table-wrap td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.markdown-table-wrap th { background: var(--subtle); font-weight: 900; }
.markdown-table-wrap tr:last-child td { border-bottom: 0; }
.ai-result-preview-note { gap: 8px; cursor: pointer; }
.ai-result-preview-note:focus-visible { outline: 3px solid rgba(79,141,247,.25); outline-offset: 2px; }
.ai-result-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-result-preview-icon { color: inherit; opacity: .7; font-weight: 900; }
.ai-result-preview-text { color: inherit; font-size: 12px; line-height: 1.45; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.ai-result-preview-actions { display: flex; justify-content: flex-end; gap: 6px; }
.ai-result-expand,
.ai-result-copy { width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .78); font-size: 16px; }
.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.archive-card, .clear-done { margin-top: 10px; background: #ECFDF5; color: #047857; border: 1px solid #BBF7D0; width: 100%; font-size: 13px; line-height: 1.25; }
.clear-done { margin: 0 0 12px; }

.empty { border: 1px dashed var(--border); border-radius: 16px; padding: 20px; color: var(--muted); display: grid; gap: 4px; text-align: center; background: var(--empty); }
.empty strong { color: var(--text); }
.skeleton { height: 104px; border-radius: 18px; background: linear-gradient(90deg,var(--subtle),var(--card),var(--subtle)); background-size: 220% 100%; animation: pulse 1.2s infinite; }
.skeleton.short { height: 76px; }
@keyframes pulse { to { background-position: -220% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes touchLift { from { transform: scale(.96); opacity: .78; } to { transform: rotate(1.5deg) scale(1.04); opacity: .98; } }
@keyframes placeholderPulse { from { opacity: .72; } to { opacity: 1; } }

.modal { width: min(620px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; border: 0; border-radius: 24px; background: var(--card); color: var(--text); box-shadow: 0 24px 80px rgba(0,0,0,.24); padding: 18px; }
.archive-dialog { width: min(760px, calc(100vw - 28px)); }
.ai-result-dialog { width: min(920px, calc(100vw - 28px)); }
.text-input-dialog { width: min(520px, calc(100vw - 28px)); }
.modal::backdrop { background: rgba(15,23,42,.48); backdrop-filter: blur(3px); }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.icon-button { width: 36px; height: 36px; border-radius: 12px; background: var(--subtle); color: var(--text); padding: 0; font-size: 24px; }
.ai-result-header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.task-dialog form { display: grid; gap: 12px; }
.task-dialog label { display: grid; gap: 6px; color: var(--muted); font-weight: 700; }
.task-dialog label > * { color: var(--text); font-weight: 500; }
textarea, input, select { width: 100%; border: 1px solid var(--border); border-radius: 14px; padding: 11px 12px; background: var(--field); color: var(--text); outline: 0; }
select { min-height: 46px; cursor: pointer; appearance: auto; -webkit-appearance: menulist; }
textarea:focus, input:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(79,141,247,.13); }
textarea { resize: vertical; }
.text-input-error { color: #B91C1C; font-weight: 700; font-size: 13px; margin: -2px 0 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.llm-hint { border: 1px solid #C7D2FE; background: #EEF2FF; color: #3730A3; border-radius: 16px; padding: 11px 12px; font-size: 13px; }
.comments-panel, .ai-result-panel, .attachments-panel { border: 1px solid var(--border); border-radius: 16px; padding: 12px; display: grid; gap: 10px; }
.comments-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.comments-header h3 { font-size: 15px; }
.attachments-panel { background: linear-gradient(180deg, rgba(16,185,129,.08), transparent 90%); border-color: #BBF7D0; }
.attachments-panel.drag-over { border-color: #10B981; background: linear-gradient(180deg, rgba(16,185,129,.2), rgba(236,253,245,.72)); box-shadow: 0 0 0 3px rgba(16,185,129,.16); }
.attachments-list { display: grid; gap: 8px; }
.attachment-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 11px; background: var(--empty); }
.attachment-item div { min-width: 0; display: grid; gap: 2px; }
.attachment-item strong { overflow-wrap: anywhere; color: var(--text); font-size: 13px; }
.attachment-item span, .attachment-hint { color: var(--muted); font-size: 12px; }
.attachment-download, .attachment-delete { flex: 0 0 auto; border: 0; background: transparent; font-weight: 800; font-size: 12px; padding: 4px 0; }
.attachment-download { color: #047857; }
.attachment-delete { color: #B91C1C; }
.file-upload { border: 1px dashed #86EFAC; border-radius: 14px; padding: 11px 12px; background: rgba(236,253,245,.62); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.file-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-upload-button { border: 0; border-radius: 10px; padding: 8px 11px; background: #10B981; color: white; font-weight: 800; cursor: pointer; white-space: nowrap; user-select: none; }
.file-upload-button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.attachment-badge { background: #ECFDF5; color: #047857; }
.ai-result-panel { background: linear-gradient(180deg, rgba(79,141,247,.09), transparent 90%); border-color: #BFDBFE; }
.ai-result-body { padding: 0; }
.ai-result-body .ticket-note { margin-top: 0; }
.ai-result-document { padding: 18px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(180deg, var(--card), var(--empty)); }
.ai-result-document .markdown-doc { gap: 12px; font-size: 15px; line-height: 1.62; }
.ai-result-document .markdown-doc h1 { font-size: 25px; letter-spacing: -.03em; }
.ai-result-document .markdown-doc h2 { font-size: 20px; margin-top: 12px; }
.ai-result-document .markdown-doc h3 { font-size: 17px; margin-top: 8px; }
.ai-result-document .markdown-doc p,
.ai-result-document .markdown-doc li { color: var(--text); }
.ai-result-document .markdown-doc ul,
.ai-result-document .markdown-doc ol { padding-left: 24px; }
.ai-result-document .markdown-doc pre { padding: 14px; border-radius: 14px; }
.comments-list { display: grid; gap: 8px; max-height: 220px; overflow: auto; }
.comment-item { border: 1px solid var(--border); border-radius: 12px; padding: 10px 11px; background: var(--empty); display: grid; gap: 6px; }
.comment-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.comment-meta strong { color: var(--text); font-size: 13px; }
.comment-delete { margin-left: auto; border: 0; background: transparent; color: #B91C1C; font-weight: 800; font-size: 12px; padding: 3px 0; cursor: pointer; }
.comment-delete:hover { color: #7F1D1D; text-decoration: underline; }
.comment-text { white-space: normal; overflow-wrap: break-word; word-break: normal; color: var(--text); font-size: 14px; line-height: 1.45; }
.comment-empty { padding: 12px; }
.hot-toggle { display: flex !important; align-items: center; background: var(--hot-soft); border: 1px solid #FED7AA; border-radius: 16px; padding: 12px; }
.hot-toggle input { width: 18px; height: 18px; }
.dialog-actions { display: flex; gap: 9px; align-items: center; padding: 0; margin: 4px 0 0; }
.spacer { flex: 1; }
.agent-section { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 16px; }
.agent-section-header { display: grid; gap: 4px; margin-bottom: 12px; }
.agent-list { display: grid; gap: 10px; max-height: 42vh; overflow: auto; }
.agent-card { border: 1px solid var(--border); border-radius: 18px; padding: 14px; background: var(--card); box-shadow: var(--soft-shadow); }
.agent-card.disabled { opacity: .7; }
.agent-card h3 { font-size: 16px; }
.agent-card p { color: var(--muted); font-size: 13px; margin-top: 6px; }
.agent-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.agent-code-wrap { position: relative; margin-top: 10px; }
.agent-code { margin-top: 10px; background: #0F172A; color: #E5E7EB; border-radius: 14px; padding: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; overflow: auto; }
.copy-agent-code { position: absolute; top: 8px; right: 8px; padding: 7px 10px; border-radius: 10px; background: #E5E7EB; color: #0F172A; font-size: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.copy-agent-code:hover { transform: translateY(-1px); background: #FFFFFF; }
.agent-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.agent-switch { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); font-weight: 700; color: var(--text); }
.agent-switch input { position: absolute; opacity: 0; pointer-events: none; }
.agent-switch-label { font-size: 14px; }
.switch-control { position: relative; display: inline-flex; width: 46px; height: 28px; flex: 0 0 auto; }
.switch-slider { position: absolute; inset: 0; border-radius: 999px; background: #D1D5DB; transition: .18s ease; }
.switch-slider::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, .2); transition: .18s ease; }
.agent-switch input:checked + .switch-slider { background: #F59E0B; }
.agent-switch input:checked + .switch-slider::after { transform: translateX(18px); }
.agent-switch input:focus-visible + .switch-slider { box-shadow: 0 0 0 3px rgba(79,141,247,.18); }
.agent-status-note { margin-top: 8px; color: var(--muted); font-size: 12px; }
.archive-search { margin-bottom: 14px; }
.archive-mode-switch { margin-bottom: 14px; }
.archive-list { display: grid; gap: 10px; max-height: 62vh; overflow: auto; }
.archive-section { display: grid; gap: 10px; }
.archive-section-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 0; }
.archive-section-header h3 { font-size: 14px; }
.archive-section-empty { padding: 12px; }
.archive-item { display: flex; justify-content: space-between; gap: 14px; align-items: center; border: 1px solid var(--border); border-radius: 18px; padding: 13px; background: var(--card); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.archive-item:hover { transform: translateY(-1px); box-shadow: var(--soft-shadow); border-color: rgba(79,141,247,.42); }
.archive-item:focus-visible { outline: 3px solid rgba(79,141,247,.22); outline-offset: 2px; }
.archive-item.hot { border-color: #FDBA74; background: var(--hot-soft); }
.archive-item.favorite { border-color: #F59E0B; background: linear-gradient(180deg, rgba(245,158,11,.14), var(--card)); }
.archive-item h3 { font-size: 15px; }
.archive-item p { color: var(--muted); font-size: 13px; margin-top: 3px; }
.archive-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: #111827; color: #fff; padding: 11px 16px; border-radius: 999px; box-shadow: var(--shadow); z-index: 20; }

body.menu-collapsed .toolbar-panel,
body.menu-collapsed .search-panel { display: none; }
body.menu-collapsed .topbar { padding-bottom: 10px; }
body.menu-collapsed .topbar-actions .button:not(.menu-toggle) { display: none; }
body.menu-collapsed .board { min-height: calc(100vh - 96px); }

html[data-theme="dark"] .badge.llm { background: #273159; color: #BFCBFF; }
html[data-theme="dark"] .badge.llm-priority { background: #3A2B18; color: #FCD9A3; border-color: #7C4A16; }
html[data-theme="dark"] .badge.llm-status { background: #3A294C; color: #E5C8FF; }
html[data-theme="dark"] .badge.llm-status.retry { background: #3B2618; color: #FDBA74; border-color: #9A5A20; }
html[data-theme="dark"] .badge.syncing { background: #16382D; color: #A7F3D0; }
html[data-theme="dark"] .badge.accent { background: #193357; color: #B7D2FF; }
html[data-theme="dark"] .attachment-badge { background: #16382D; color: #A7F3D0; }
html[data-theme="dark"] .mode-switch { background: linear-gradient(135deg, rgba(27,31,39,.94), rgba(31,41,55,.82)); border-color: rgba(148,163,184,.18); box-shadow: var(--soft-shadow), inset 0 1px 0 rgba(255,255,255,.06); }
html[data-theme="dark"] .mode-chip { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); box-shadow: 0 5px 14px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255,255,255,.08); }
html[data-theme="dark"] .mode-chip:hover { box-shadow: 0 9px 18px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.1); }
html[data-theme="dark"] .attachments-panel { border-color: #1F6F55; background: linear-gradient(180deg, rgba(16,185,129,.12), transparent 90%); }
html[data-theme="dark"] .attachments-panel.drag-over { border-color: #34D399; background: linear-gradient(180deg, rgba(16,185,129,.2), rgba(16,185,129,.08)); }
html[data-theme="dark"] .file-upload { border-color: #1F6F55; background: rgba(16,185,129,.08); }
html[data-theme="dark"] .ticket-note { border-color: #2E5A8E; background: #172840; color: #CFE4FF; }
html[data-theme="dark"] .ticket-note.danger { border-color: #6F2F35; background: #35191D; color: #FFC9CF; }
html[data-theme="dark"] .ai-result-panel { background: linear-gradient(180deg, rgba(108,134,246,.13), transparent 90%); border-color: #394579; }
html[data-theme="dark"] .ai-result-expand,
html[data-theme="dark"] .ai-result-copy { background: rgba(21, 25, 34, .9); }
html[data-theme="dark"] .markdown-doc blockquote { background: rgba(108,134,246,.12); }
html[data-theme="dark"] .markdown-doc code,
html[data-theme="dark"] .markdown-doc pre { background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .markdown-doc pre code { background: transparent; }
html[data-theme="dark"] .llm-hint { border-color: #394579; background: #20284B; color: #C8D1FF; }
html[data-theme="dark"] .archive-card,
html[data-theme="dark"] .clear-done { background: #17352A; color: #A7F3D0; border-color: #23664E; }
html[data-theme="dark"] .board-scroll-button { background: rgba(27,31,39,.94); border-color: rgba(148,163,184,.28); }

@media (hover: none), (pointer: coarse) {
    .board-scroll-button:not(:disabled) { opacity: .9; pointer-events: auto; }
}

@media (max-width: 900px) {
    .app-shell { padding: 12px; }
    .topbar { align-items: flex-start; }
    .brand h1 { font-size: 21px; }
    .toolbar-panel { align-items: flex-start; }
    .scale-control { min-height: 42px; }
    .scale-button { width: 32px; min-width: 32px; border-radius: 11px; }
    .scale-label { min-width: 96px; padding: 4px 8px; }
    .board {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: var(--board-column-width, calc(100vw - 44px));
        gap: 10px;
        min-height: calc(100vh - 140px);
        margin: 0 -12px;
        padding: 0 12px 12px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-padding-inline: 12px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .board-scroll-button { top: 46vh; width: 38px; height: 48px; border-radius: 13px; font-size: 30px; }
    .board-scroll-prev { left: -6px; }
    .board-scroll-next { right: -6px; }
    .board::-webkit-scrollbar { height: 0; }
    .column { min-height: 66vh; padding: 9px; border-radius: 16px; scroll-snap-align: start; }
    .column-header { gap: 6px; margin-bottom: 9px; }
    .column-header p { display: none; }
    .column h2 { font-size: 14px; }
    .counter { min-width: 24px; height: 24px; padding: 0 7px; font-size: 12px; }
    .cards { gap: 8px; min-height: 140px; }
    .card { border-radius: 14px; padding: 9px; }
    .card-top { gap: 6px; }
    .card h3 { font-size: 13px; }
    .hot-button { width: 27px; height: 27px; border-radius: 10px; font-size: 13px; }
    .card-description { font-size: 12px; -webkit-line-clamp: 2; }
    .card-meta { gap: 4px; margin-top: 8px; }
    .badge { min-height: 20px; padding: 2px 6px; font-size: 11px; }
    .empty { padding: 12px 6px; font-size: 12px; }
    .clear-done, .archive-card { padding: 9px 6px; font-size: 12px; }
    .form-grid { grid-template-columns: 1fr; }
    .archive-item { align-items: flex-start; flex-direction: column; }
    .archive-actions { width: 100%; }
    .archive-item .button { width: 100%; }
}

@media (max-width: 520px) {
    .app-shell { padding: 10px; }
    .topbar { flex-direction: column; }
    .brand { flex-wrap: wrap; }
    .topbar-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
    .toolbar-panel { flex-direction: column; align-items: stretch; }
    .mode-switch { width: 100%; }
    .mode-chip { flex: 1 1 calc(50% - 6px); min-width: 0; padding-inline: 9px; }
    .scale-control { width: 100%; }
    .scale-label { flex: 1; }
    .board {
        grid-auto-columns: var(--board-column-width, calc(100vw - 36px));
        gap: 8px;
        margin: 0 -10px;
        padding: 0 10px 14px;
    }
    .board-scroll-button { top: 44vh; width: 34px; height: 46px; border-radius: 12px; font-size: 28px; }
    .board-scroll-prev { left: -7px; }
    .board-scroll-next { right: -7px; }
    .column { padding: 7px; border-radius: 14px; }
    .column-header { align-items: center; }
    .column h2 { font-size: 12px; letter-spacing: -.03em; }
    .counter { min-width: 21px; height: 21px; padding: 0 6px; font-size: 11px; }
    .cards { gap: 7px; }
    .card { padding: 7px; border-radius: 12px; }
    .card-top { gap: 5px; }
    .card h3 { font-size: 12px; line-height: 1.25; }
    .hot-button { width: 22px; height: 22px; border-radius: 8px; font-size: 11px; }
    .hot-badge { font-size: 11px; padding: 2px 7px; }
    .card-description { display: -webkit-box; font-size: 11px; -webkit-line-clamp: 2; }
    .card-meta { gap: 3px; margin-top: 6px; }
    .badge { max-width: 100%; min-height: 18px; border-radius: 9px; padding: 2px 5px; font-size: 10px; line-height: 1.15; }
    .ticket-note { padding: 7px; font-size: 11px; }
    .ai-result-preview-actions { gap: 5px; }
    .empty { padding: 12px 5px; font-size: 11px; }
    .button, button { padding: 9px 9px; }
    .search-box { height: 46px; }
    .dialog-actions { flex-wrap: wrap; }
    .dialog-actions .button { flex: 1 1 42%; }
    .spacer { display: none; }
}