/* HoTTY UI kit — local stylesheet (depends on ../../colors_and_type.css for tokens) */

* { box-sizing: border-box; }
body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--bg-primary); color: var(--text-primary); font-family: var(--ui-font-family); font-size: var(--font-size-base); }

/* Title bar (Tauri window chrome stand-in) */
.titlebar { height: 32px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; padding: 0 12px; gap: 12px; -webkit-app-region: drag; user-select: none; flex-shrink: 0; }
.titlebar img { width: 20px; height: 20px; padding: 2px; box-sizing: border-box; }
.titlebar .title { font-size: 12px; color: var(--text-secondary); font-weight: 500; flex: 1; }
.titlebar .theme-switch { display: flex; gap: 2px; background: var(--bg-tertiary); padding: 2px; border-radius: 6px; }
.titlebar .theme-switch button { background: transparent; border: none; color: var(--text-secondary); padding: 3px 10px; font-size: 11px; border-radius: 4px; cursor: pointer; font-family: inherit; }
.titlebar .theme-switch button.active { background: var(--accent-color); color: var(--text-on-accent); }
.titlebar .win-btns { display: flex; gap: 4px; }
.titlebar .win-btns span { width: 12px; height: 12px; border-radius: 50%; background: var(--text-tertiary); }

/* Root layout */
.app-root { display: flex; flex-direction: column; height: 100vh; width: 100vw; }
.app-container { flex: 1; display: flex; min-height: 0; }
.main-layout { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.content-area { flex: 1; display: flex; min-height: 0; min-width: 0; }
.center-column { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* App sidebar */
.app-sidebar { width: 50px; background: var(--sidebar-bg); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 6px 0; flex-shrink: 0; }
.app-sidebar-top, .app-sidebar-bottom { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 2px; }
.app-sidebar-btn { background: transparent; border: none; padding: 0; color: var(--sidebar-btn-color); width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.5; transition: all 0.2s; }
.app-sidebar-btn:hover { opacity: 0.8; background: var(--sidebar-btn-hover-bg); color: var(--sidebar-btn-hover-color); }
.app-sidebar-btn-active { opacity: 1; background: var(--sidebar-btn-active-bg); color: var(--accent-color); filter: drop-shadow(0 0 4px var(--glow-accent, transparent)); }
.app-sidebar-separator { width: 24px; height: 1px; background: var(--border-color); opacity: 0.5; margin: 2px 0; }

/* Side rail (host tree container) */
.sidebar-rail { width: 230px; background: var(--sidebar-bg); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; flex-shrink: 0; }

/* Tab bar */
.tab-bar { display: flex; background: var(--sidebar-bg); min-height: 35px; align-items: flex-start; user-select: none; border-bottom: 1px solid var(--border-color); }
.tab-list { display: flex; align-items: flex-start; overflow-x: auto; min-width: 0; }
.tab { display: flex; align-items: center; padding: 0 10px; height: 35px; background: var(--tab-bg); color: var(--tab-text); border-right: 1px solid var(--border-color); cursor: pointer; font-size: 13px; min-width: 130px; max-width: 200px; position: relative; transition: background-color 0.2s; border-top-left-radius: 8px; border-top-right-radius: 8px; gap: 8px; }
.tab:hover { background: var(--bg-primary); }
.tab.active { background: var(--bg-primary); color: var(--tab-active-text); }
.tab.active-pane-tab { background: var(--accent-color); color: var(--text-on-accent); }
.tab.connecting { background: var(--tab-connecting-bg); color: var(--tab-connecting-text); animation: tab-connecting-pulse 1.6s infinite ease-in-out; }
.tab.is-ai-tab { background: linear-gradient(90deg, var(--accent-light), var(--accent-color), var(--accent-secondary)) !important; color: var(--text-on-accent) !important; border: none !important; }
.tab.gemini-linked-tab::before { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background: linear-gradient(90deg, var(--accent-light), var(--accent-color), var(--accent-secondary)); }
.tab-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.tab-close { width: 16px; height: 16px; border-radius: 50%; background: var(--tab-close-bg); color: var(--text-on-accent); display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; font-size: 11px; line-height: 1; }
.tab-close:hover { background: var(--tab-close-hover-bg); }
.new-tab-btn { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); cursor: pointer; }
.new-tab-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
@keyframes tab-connecting-pulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.18)} }

/* Tab bar actions (New Session + Features) */
.tab-bar-actions { display: flex; align-items: center; flex-shrink: 0; height: 35px; position: relative; }
.new-tab-btn svg { transition: transform 0.2s; }
.new-tab-btn:hover svg { transform: scale(1.1); }
.features-btn { position: relative; width: 35px; height: 35px; flex-shrink: 0; }
.features-btn-icon { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); cursor: pointer; }
.features-btn-icon:hover, .features-btn-icon.active { background: var(--bg-tertiary); color: var(--text-primary); }
.features-btn-icon svg { transition: transform 0.2s; }
.features-btn-icon:hover svg { transform: scale(1.1); }
.features-dropdown { position: absolute; top: 35px; right: 0; background: var(--sidebar-bg); border: 1px solid var(--border-color); border-radius: 6px; padding: 4px; min-width: 150px; z-index: 1000; box-shadow: 0 4px 12px var(--modal-shadow, rgba(0,0,0,0.3)); }
.features-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 4px; cursor: pointer; color: var(--text-primary); font-size: calc(var(--font-size-base) - 1px); white-space: nowrap; }
.features-dropdown-item:hover { background: var(--bg-primary); }
.features-dropdown-item svg { flex-shrink: 0; color: var(--text-secondary); }

/* AI Chat color tokens (not present in the base theme file) */
:root { --ai-header-bg: var(--bg-secondary); --chat-msg-user-bg: var(--accent-secondary); --chat-msg-user-text: #fff; --chat-msg-model-text: var(--text-primary); }

/* New Session dialog (popup) */
.connection-dialog-overlay { position: fixed; inset: 0; background: var(--modal-overlay-bg); display: flex; align-items: center; justify-content: center; z-index: 2000; }
.connection-dialog { position: relative; width: 840px; max-width: 92%; height: 500px; max-height: 86%; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 12px 48px var(--modal-shadow); display: flex; flex-direction: column; padding: 16px 18px; box-sizing: border-box; }
.session-dialog-close { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border: none; background: transparent; color: var(--text-secondary); font-size: 14px; cursor: pointer; border-radius: 4px; line-height: 1; }
.session-dialog-close:hover { background: var(--hover-bg); color: var(--text-primary); }
.session-dialog-title { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--text-primary); }
.dialog-body { flex: 1; display: flex; min-height: 0; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; }
.host-panel { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; background: var(--sidebar-bg); }
.host-panel-tabs { display: flex; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.host-panel-tab { flex: 1; padding: 8px; background: transparent; border: none; color: var(--text-secondary); font-size: 12px; cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; }
.host-panel-tab.active { color: var(--text-primary); border-bottom-color: var(--accent-color); }
.hosts-tab-tree { flex: 1; min-height: 0; overflow: auto; }
.panel-divider { width: 1px; background: var(--border-color); flex-shrink: 0; }
.form-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 14px 16px; overflow: auto; background: var(--bg-primary); }
.form-status-banner { margin-bottom: 14px; }
.banner-new { display: inline-flex; align-items: center; font-size: 12px; color: var(--accent-color); font-weight: 500; }
.form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.form-row { display: flex; gap: 10px; }
.form-group > label { font-size: 11px; color: var(--text-secondary); }
.form-group input, .form-group select { background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 4px; padding: 6px 8px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box; }
.form-group input:focus, .form-group select:focus { border-color: var(--accent-color); }
.dialog-connect-btn { margin-top: 6px; align-self: flex-start; background: var(--accent-color); color: var(--text-on-accent); border: none; border-radius: 4px; padding: 8px 20px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; }
.dialog-connect-btn:hover { background: var(--accent-hover); }

/* ── AI Chat — real layout (tab strip / header / input card) ── */
.aicp-tabstrip { position: relative; display: flex; align-items: stretch; height: 32px; background: var(--sidebar-bg); border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.aicp-tabstrip::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--provider-gemini-1), var(--provider-gemini-2), var(--provider-gemini-3)); }
.aicp-tab { display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 12px; color: var(--text-primary); background: var(--bg-primary); border-right: 1px solid var(--border-color); border-top-left-radius: 8px; border-top-right-radius: 8px; }
.aicp-tab .x { color: var(--text-tertiary); font-size: 13px; cursor: pointer; }
.aicp-newtab { display: flex; align-items: center; justify-content: center; width: 30px; color: var(--text-secondary); cursor: pointer; font-size: 16px; }
.aicp-newtab:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.aicp-header { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--ai-header-bg); border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.aicp-logo { display: flex; align-items: center; }
.aicp-newchat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--btn-bg); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-size: 12px; cursor: pointer; font-family: inherit; }
.aicp-newchat:hover { background: var(--btn-hover-bg); }
.aicp-linkchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--accent-color) 55%, transparent); border-radius: 6px; color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 8%, transparent); font-size: 12px; cursor: pointer; font-family: inherit; }
.aicp-menu { margin-left: auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); cursor: pointer; border-radius: 4px; }
.aicp-menu:hover { background: var(--hover-bg); color: var(--text-primary); }
.aicp-termout-block { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--code-bg); border: 1px solid var(--border-color); border-radius: 8px; font-size: 12px; color: var(--text-primary); }
.aicp-termout-block .chev { color: var(--text-secondary); }
.aicp-termout-block strong { font-weight: 600; }
.aicp-termout-block .cmd { color: var(--text-secondary); font-family: var(--font-family); font-size: 11px; }
.aicp-termout-block .meta { margin-left: auto; color: var(--text-tertiary); font-size: 11px; white-space: nowrap; }
.aicp-inputcard { margin: 8px 10px 0; padding: 10px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.aicp-input { width: 100%; background: transparent; border: none; outline: none; resize: none; color: var(--text-primary); font-size: 13px; font-family: inherit; line-height: 1.4; padding: 0; }
.aicp-input::placeholder { color: var(--placeholder-color); }
.aicp-input-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aicp-model { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--text-secondary); font-size: 12px; cursor: pointer; font-family: inherit; padding: 2px 4px; border-radius: 4px; }
.aicp-model:hover { color: var(--text-primary); }
.aicp-input-right { display: flex; align-items: center; gap: 8px; }
.aicp-execmode { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--success-color) 55%, var(--border-color)); border-radius: 999px; color: var(--success-color); background: transparent; font-size: 11px; cursor: pointer; font-family: inherit; }
.aicp-send { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-color); color: var(--text-on-accent); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.aicp-send:hover { background: var(--accent-hover); }
.aicp-tokens { padding: 5px 12px 8px; font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; }

/* Settings modal */
.settings-overlay { position: fixed; inset: 0; background: var(--modal-overlay-bg); display: flex; align-items: center; justify-content: center; z-index: 2100; }
.settings-modal { width: 600px; max-width: 92%; max-height: 86%; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 12px 48px var(--modal-shadow); display: flex; flex-direction: column; overflow: hidden; }
.settings-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.settings-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.settings-close { width: 26px; height: 26px; border: none; background: transparent; color: var(--text-secondary); font-size: 14px; cursor: pointer; border-radius: 4px; line-height: 1; }
.settings-close:hover { background: var(--hover-bg); color: var(--text-primary); }
.settings-tabs { display: flex; gap: 4px; padding: 0 14px; border-bottom: 1px solid var(--border-color); }
.settings-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); font-size: 13px; padding: 8px 12px; cursor: pointer; font-family: inherit; }
.settings-tab.active { color: var(--text-primary); border-bottom-color: var(--accent-color); }
.settings-tab:hover { color: var(--text-primary); }
.settings-body { padding: 20px; overflow: auto; }
.settings-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); margin: 0 0 10px; }
.settings-row { margin-bottom: 20px; }
.theme-swatches { display: flex; gap: 10px; }
.theme-swatch { flex: 1; border: 1px solid var(--border-color); border-radius: 6px; padding: 10px; cursor: pointer; text-align: center; font-size: 12px; color: var(--text-secondary); }
.theme-swatch.active { border-color: var(--accent-color); color: var(--text-primary); box-shadow: 0 0 0 1px var(--accent-color); }
.theme-swatch .sw { height: 36px; border-radius: 4px; margin-bottom: 6px; border: 1px solid var(--border-color); }
.settings-placeholder { color: var(--text-tertiary); font-size: 13px; padding: 20px 0; }
.settings-link-btn { background: transparent; border: none; color: var(--accent-color); font-size: 12px; cursor: pointer; padding: 0; font-family: inherit; }
.settings-link-btn:hover { text-decoration: underline; }
.settings-primary-btn { background: var(--accent-color); color: var(--text-on-accent); border: none; border-radius: 4px; padding: 7px 16px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; }
.settings-primary-btn:hover { background: var(--accent-hover); }
.settings-fakeselect { display: flex; align-items: center; justify-content: space-between; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 4px; padding: 6px 10px; color: var(--text-primary); font-size: 13px; }

/* Pane grid */
.pane-grid { flex: 1; display: grid; gap: 1px; background: var(--border-color); padding: 1px; min-height: 0; min-width: 0; }
.pane { display: flex; flex-direction: column; height: 100%; width: 100%; min-width: 0; min-height: 0; border: 1px solid transparent; box-sizing: border-box; background: var(--bg-primary); cursor: pointer; }
.pane.pane-active { border-color: var(--accent-color); box-shadow: 0 0 var(--glow-blur) var(--glow-accent), inset 0 0 8px var(--glow-accent); }
.pane-body { flex: 1; min-height: 0; display: flex; }
.pane-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--accent-color); }
.pane-empty .pane-label { font-size: calc(var(--font-size-base) * 2.3); font-weight: bold; opacity: 0.2; font-family: var(--font-family); }
.pane-empty .drop-hint { font-size: 12px; opacity: 0.6; }

/* Host tree */
.host-tree-container { display: flex; flex-direction: column; height: 100%; background: var(--bg-secondary); user-select: none; }
.host-tree-toolbar { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.tree-toolbar-btn { background: var(--btn-bg); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 4px; padding: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.tree-toolbar-btn:hover { background: var(--btn-hover-bg); border-color: var(--accent-color); transform: translateY(-1px); }
.host-tree-body { flex: 1; overflow-y: auto; padding: 4px 0; }
.host-tree-row { display: flex; align-items: center; gap: 3px; padding: 2px 6px; cursor: pointer; border-radius: 4px; margin: 0px 4px; font-size: 12px; color: var(--text-primary); transition: background 0.12s; min-height: 22px; }
.host-tree-row:hover { background: var(--hover-bg); }
.host-tree-row.selected { background: var(--accent-color); color: #fff; }
.tree-icon { flex-shrink: 0; width: 16px; display: flex; align-items: center; justify-content: center; }
.tree-icon-emoji { font-size: 13px; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.tree-chevron { color: var(--text-secondary); transition: transform 0.15s ease-in-out; width: 12px; }
.tree-chevron.expanded { transform: rotate(90deg); }
.tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-meta { font-size: 11px; color: var(--tree-meta-color); flex-shrink: 0; font-family: var(--font-family); opacity: 0.85; }
.host-tree-row.selected .tree-meta { color: #fff; opacity: 0.7; }

/* Terminal */
.terminal-view { position: relative; width: 100%; height: 100%; flex: 1; min-height: 0; background: var(--bg-primary); overflow: hidden; }
.terminal-content { padding: 6px 8px; font-family: var(--font-family); font-size: 13px; line-height: 1.45; color: #e0e0e0; height: 100%; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.theme-light .terminal-content { color: #000; }
.terminal-prompt-active { color: var(--terminal-prompt-active); }
.terminal-prompt-default { color: var(--terminal-prompt-default); }
.term-g { color: #4ade80; }
.term-y { color: #d4b86a; }
.term-r { color: #ef4444; }
.term-c { color: #9cdcfe; }
.term-gray { color: #888; }
.term-cursor { background: var(--accent-color); color: var(--bg-primary); animation: cursor-blink 1.1s steps(2) infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }

/* AI Chat pane */
.ai-pane { display: flex; flex-direction: column; height: 100%; background: var(--bg-primary); }
.ai-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ai-header-bg, rgba(0,0,0,0.1)); border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.ai-header .provider { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.ai-header .provider .dot { width: 8px; height: 8px; border-radius: 50%; }
.ai-header .model { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-family); margin-left: auto; }
.ai-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.ai-msg { max-width: 100%; }
.ai-msg.user { align-self: flex-end; background: var(--chat-msg-user-bg); color: var(--chat-msg-user-text); padding: 8px 12px; border-radius: 10px; max-width: 85%; font-size: 13px; line-height: 1.5; }
.ai-msg.model { color: var(--chat-msg-model-text); font-size: 13px; line-height: 1.55; }
.ai-msg.model code { background: var(--code-bg); color: var(--code-text); padding: 1px 5px; border-radius: 3px; font-family: var(--font-family); font-size: 12px; }
.ai-msg.model pre { background: var(--code-bg); color: var(--code-text); padding: 10px 12px; border-radius: 4px; font-family: var(--font-family); font-size: 12px; overflow-x: auto; margin: 6px 0; line-height: 1.5; border: 1px solid var(--border-color); }
.ai-msg .role { font-size: 10px; font-family: var(--font-family); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.ai-composer { border-top: 1px solid var(--border-color); padding: 10px 12px; display: flex; gap: 8px; flex-shrink: 0; background: var(--bg-secondary); }
.ai-composer textarea { flex: 1; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); padding: 6px 8px; font-size: 13px; font-family: var(--ui-font-family); resize: none; min-height: 32px; max-height: 100px; outline: none; }
.ai-composer textarea:focus { border-color: var(--accent-color); }
.ai-composer button { background: var(--accent-color); color: var(--text-on-accent); border: none; border-radius: 4px; padding: 0 14px; font-size: 13px; cursor: pointer; font-family: inherit; }
.ai-composer button:hover { background: var(--accent-hover); }
.ai-tokens { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-family); padding: 0 12px 6px; background: var(--bg-secondary); }