:root {
    --bg: #15181d;
    --panel: #1b1f26;
    --panel-2: #21262e;
    --border: #2c3442;
    --text: #f0f3f7;
    --muted: #b0bac7;
    --accent: #6ee7ff;
    --accent-2: #4cc9f0;
    --success: #22c55e;
    --error: #ef4444;
    --copy: #5b3570;
    --copy-border: #7a4a94;
}

* { box-sizing: border-box; }

html {
    /* Belt-and-suspenders with the viewport meta tag: iOS Safari ignores
       user-scalable=no for some gestures, but still honors touch-action.
       pan-y = vertical scrolling only, no pinch-zoom, no double-tap zoom. */
    touch-action: pan-y;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
}

.wrapper { max-width: 960px; margin: 0 auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; min-height: 100vh; }

/* ---------- Login screen ---------- */

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.login-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-card h1 {
    margin: 0;
    font-size: 1.4rem;
}

.login-card .muted {
    color: var(--muted);
    margin: 0;
}

.login-card .error {
    color: var(--error);
    margin: 0;
}

.login-card input[type="password"] {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    font-size: 1rem;
}

.login-card input[type="password"]:focus {
    outline: none;
    border-color: var(--accent-2);
}

.login-card .btn-block {
    width: 100%;
}

/* ---------- Header / module tabs ---------- */

.header { display: flex; flex-wrap: wrap; gap: 6px; }

.tab {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 16px 10px 10px; color: var(--text); font-weight: 700; cursor: pointer;
    transition: .2s; font-size: 13px; letter-spacing: .3px;
}
.tab:hover { background: #262c36; }
.tab.active { background: rgba(76,201,240,.18); border-color: var(--accent-2); color: var(--accent); }

.logout-tab { margin-left: auto; text-decoration: none; color: var(--muted); font-weight: 600; }
.logout-tab:hover { color: var(--text); }
/* Icon is visually larger than the tab's text line, so it's given negative
   vertical margin to cancel the extra height it would otherwise add to the
   flex row — the tab's own height (set by its padding) stays unchanged. */
.tab-icon { width: auto; height: 2.4em; object-fit: contain; flex-shrink: 0; margin: -0.4em 0; }

.container { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }

/* ---------- Shared buttons ---------- */

.btn { appearance: none; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 10px 14px; font-weight: 600; cursor: pointer; transition: .2s; height: 44px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; }
.btn:hover { background: #262c36; }
.btn:focus,
.btn:focus-visible { outline: none; }
.btn:disabled { background: var(--panel-2); border-color: var(--border); color: var(--muted); cursor: not-allowed; }
.btn.danger { background: rgba(239,68,68,.15); border-color: #523637; }
.btn.danger:hover { background: rgba(239,68,68,.28); }
.btn.jira { background: rgba(32,124,247,.18); border-color: #2e5fa3; }
.btn.jira:hover { background: rgba(32,124,247,.32); }
.btn.success { background: rgba(34,197,94,.15); border-color: #2e493b; color: var(--success); }
.btn.success:hover { background: rgba(34,197,94,.25); }
.btn.big { font-size: 14px; padding: 4px 10px; border-radius: 12px; background: rgba(76,201,240,.18); border: 2px solid var(--accent-2); white-space: normal; line-height: 1.15; text-align: center; }
.btn.big:hover { background: rgba(110,231,255,.25); }

.ta { width: 100%; resize: none; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); outline: none; padding: 10px; font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.6; border-radius: 8px; scrollbar-width: thin; scrollbar-color: #3a4452 #21262e; }
.ta::-webkit-scrollbar { width: 12px; }
.ta::-webkit-scrollbar-track { background: #21262e; border-radius: 6px; }
.ta::-webkit-scrollbar-thumb { background: #3a4452; border-radius: 6px; border: 2px solid #21262e; }

/* ---------- Config bar / model picker (shared by any module needing LM Studio) ---------- */

.config-bar { display: flex; align-items: center; gap: 16px; padding: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; flex-wrap: wrap; }
.config-section { display: flex; flex-direction: column; gap: 6px; }
.config-section.grow { flex: 1; }
.config-label-row { display: flex; align-items: center; gap: 8px; }
.config-label { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .5px; }
.config-content { display: flex; flex-direction: column; gap: 8px; }
.config-content-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.model-dropdown { position: relative; height: 32px; flex: 1; min-width: 160px; z-index: 100; }
.model-dropdown-trigger { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 0 28px 0 10px; font-size: 14px; cursor: pointer; height: 32px; display: flex; align-items: center; width: 100%; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.model-dropdown-trigger::after { content: '▾'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); pointer-events: none; }
.model-dropdown-trigger.loaded-model { font-weight: bold; color: var(--success); }
.model-dropdown-list { position: absolute; top: calc(100% + 4px); left: 0; width: 100%; min-width: 220px; max-height: 260px; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; z-index: 999; display: none; }
.model-dropdown-list.open { display: block; }
.model-dropdown-item { padding: 7px 12px; font-size: 14px; cursor: pointer; color: var(--text); white-space: nowrap; }
.model-dropdown-item:hover { background: #2e3a48; }
.model-dropdown-item.selected { background: #263040; }
.model-dropdown-item.favorite { color: #f59e0b; }
.model-dropdown-item.favorite.loaded-model { color: var(--success); }
.model-dropdown-item.loaded-model { font-weight: bold; color: var(--success); }
.model-dropdown-sep { height: 1px; background: var(--border); margin: 4px 0; }

.load-model-btn { appearance: none; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; height: 32px; white-space: nowrap; width: 140px; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.load-model-btn:hover { background: #262c36; }
.load-model-btn.loaded { background: rgba(34,197,94,.15); border-color: #2e493b; color: var(--success); cursor: default; pointer-events: none; }
.load-model-btn:disabled { opacity: .5; cursor: not-allowed; }
.unload-all-btn, .refresh-btn { appearance: none; border-radius: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; height: 32px; color: var(--text); white-space: nowrap; width: 130px; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.unload-all-btn { background: rgba(239,68,68,.12); border: 1px solid #523637; }
.unload-all-btn:hover { background: rgba(239,68,68,.22); }
.refresh-btn { background: rgba(76,201,240,.1); border: 1px solid #344457; }
.refresh-btn:hover { background: rgba(76,201,240,.2); }
.unload-all-btn:disabled, .refresh-btn:disabled { opacity: .5; cursor: not-allowed; }

.model-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--success); }
.model-status::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background-color: currentColor; }
.model-status.loading { color: var(--accent-2); }
.model-status.available { color: var(--success); }
.model-status.error { color: var(--error); }

/* ---------- Modal (shared by any module needing a dialog) ---------- */

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.modal-overlay.open { display: flex; }
.modal-box { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 420px; max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.modal-title { font-weight: 700; color: var(--text); letter-spacing: .3px; }
.modal-close { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 22px; padding: 4px; line-height: 1; }
.modal-body {
    padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; flex: 1;
    scrollbar-width: thin; scrollbar-color: #3a4452 var(--panel);
}
.modal-body::-webkit-scrollbar { width: 10px; }
.modal-body::-webkit-scrollbar-track { background: var(--panel); border-radius: 6px; }
.modal-body::-webkit-scrollbar-thumb { background: #3a4452; border-radius: 6px; border: 2px solid var(--panel); }
.modal-body::-webkit-scrollbar-thumb:hover { background: #4a5568; }
.modal-actions { display: flex; padding: 16px; gap: 8px; flex-shrink: 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.modal-actions .btn { flex: 1 1 0; min-width: 0; }

.field-label { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .5px; margin-top: 6px; }

/* ---------- Mobile fixed top bar (MODULES dropdown + logout) ---------- */
/* Hidden by default (desktop tab row is used instead); the media query
   below switches it on below 480px. Rules here must precede the media
   query so its `display: flex` override actually wins the cascade. */

.mobile-topbar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 12px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
}

.mobile-modules-dropdown { position: relative; }

.mobile-modules-btn {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
    color: var(--text); font-weight: 700; font-size: 12px; letter-spacing: .3px;
    padding: 8px 12px;
}

.mobile-caret { font-size: 10px; color: var(--muted); }

.mobile-modules-list {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    z-index: 101;
}

.mobile-modules-list.open { display: block; }

.mobile-modules-item {
    display: flex; align-items: center; gap: 6px; width: 100%;
    appearance: none; cursor: pointer; text-align: left;
    background: none; border: none; border-bottom: 1px solid var(--border);
    color: var(--text); font-weight: 600; font-size: 13px;
    padding: 10px 12px; text-decoration: none; box-sizing: border-box;
}

.mobile-modules-item:last-child { border-bottom: none; }
.mobile-modules-item.active { background: rgba(76,201,240,.18); color: var(--accent); }

/* "Wyloguj" is the last item, visually split off from the module list
   above it with an extra-thick separator instead of the thin per-item one. */
.mobile-modules-logout { border-top: 1px solid var(--border); color: var(--muted); }
.mobile-modules-logout:hover { color: var(--text); }

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
    .wrapper { padding: 10px; gap: 10px; }
    .tab { font-size: 12px; padding: 8px 12px; }

    /* Below this width the module tab row + logout link no longer fit on
       one line and wrap badly (logout-tab's margin-left:auto still applies
       per-line, leaving an empty gap before it on the wrapped line). Swap
       to a fixed top bar with a MODULES dropdown instead. */
    .header { display: none; }
    .wrapper { padding-top: 62px; }
    .mobile-topbar { display: flex; }
}