/* ── iON PWA Global Styles ─────────────────────────────────────────────── */
/* DM Sans · Black & White · Mobile First · v1.0                           */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,300;1,9..40,400&display=swap');

/* ── CSS Variables ─────────────────────────────────────────────────────── */
:root {
    --font: 'DM Sans', sans-serif;

    /* Dark Mode (default) */
    --bg:           #0a0a0a;
    --bg-elevated:  #111111;
    --surface:      #161616;
    --surface-hover:#1e1e1e;
    --border:       #2a2a2a;
    --border-strong:#404040;
    --fg:           #f0f0f0;
    --fg-muted:     #888888;
    --fg-subtle:    #555555;
    --accent:       #ffffff;
    --accent-muted: #cccccc;
    --error:        #ff4444;
    --success:      #44ff88;
    --warning:      #ffcc44;

    --radius-sm:  .375rem;
    --radius:     .625rem;
    --radius-lg:  1rem;
    --radius-xl:  1.5rem;

    --shadow-sm:  0 1px 3px rgba(0,0,0,.5);
    --shadow:     0 4px 16px rgba(0,0,0,.6);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.7);

    --nav-h:      56px;
    --sidebar-w:  280px;
    --header-h:   52px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top:    env(safe-area-inset-top, 0px);
}

[data-theme="light"] {
    --bg:           #fafafa;
    --bg-elevated:  #f5f5f5;
    --surface:      #ffffff;
    --surface-hover:#f0f0f0;
    --border:       #e5e5e5;
    --border-strong:#cccccc;
    --fg:           #0a0a0a;
    --fg-muted:     #666666;
    --fg-subtle:    #aaaaaa;
    --accent:       #000000;
    --accent-muted: #333333;
    --error:        #cc0000;
    --success:      #008833;
    --warning:      #aa7700;
    --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
    --shadow:     0 4px 16px rgba(0,0,0,.12);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.16);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html {
    font-size:16px;
    -webkit-text-size-adjust:100%;
    height:100%;
    scroll-behavior:smooth;
}

body {
    font-family: var(--font);
    font-size:.9rem;
    font-weight:400;
    line-height:1.6;
    color: var(--fg);
    background: var(--bg);
    min-height:100dvh;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* ── Typography ────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font);
    font-weight:700;
    line-height:1.2;
    letter-spacing:-.02em;
}
h1 { font-size:clamp(1.6rem,4vw,2.4rem); }
h2 { font-size:clamp(1.2rem,3vw,1.75rem); }
h3 { font-size:1.1rem; }
h4 { font-size:.95rem; }

p { line-height:1.7; }

a { color:var(--fg); text-decoration:none; }
a:hover { color:var(--accent); }

code, pre {
    font-family:'JetBrains Mono','Fira Code',monospace;
    font-size:.82rem;
}

pre {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1rem;
    overflow-x:auto;
    line-height:1.5;
}

/* ── Layout ────────────────────────────────────────────────────────────── */
.app-shell {
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:var(--header-h) 1fr var(--nav-h);
    height:100dvh;
    overflow:hidden;
}

/* Desktop: sidebar + main */
@media (min-width:768px) {
    .app-shell {
        grid-template-columns:var(--sidebar-w) 1fr;
        grid-template-rows:1fr;
    }
    .app-sidebar { display:flex !important; }
    .app-bottom-nav { display:none !important; }
    .app-header { display:none !important; }
    .app-main { grid-column:2; }
}

.app-header {
    grid-row:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 1rem;
    border-bottom:1px solid var(--border);
    background:var(--bg);
    position:sticky;
    top:0;
    z-index:100;
    padding-top:var(--safe-top);
}

.app-sidebar {
    display:none;
    flex-direction:column;
    background:var(--bg-elevated);
    border-right:1px solid var(--border);
    height:100dvh;
    overflow-y:auto;
    overflow-x:hidden;
    position:sticky;
    top:0;
    z-index:200;
}

.app-main {
    grid-row:2;
    overflow-y:auto;
    overflow-x:hidden;
    position:relative;
}

.app-bottom-nav {
    grid-row:3;
    display:flex;
    align-items:center;
    justify-content:space-around;
    border-top:1px solid var(--border);
    background:var(--bg);
    padding-bottom:var(--safe-bottom);
    position:sticky;
    bottom:0;
    z-index:100;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar-logo {
    padding:1.25rem 1.25rem .75rem;
    display:flex;
    align-items:center;
    gap:.625rem;
    border-bottom:1px solid var(--border);
}
.sidebar-logo .logo-glyph {
    font-size:1.3rem;
    font-weight:800;
    letter-spacing:-.04em;
}
.sidebar-logo .logo-sub {
    font-size:.65rem;
    font-weight:500;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--fg-muted);
}

.sidebar-section {
    padding:.5rem 0;
}
.sidebar-section-label {
    font-size:.65rem;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--fg-subtle);
    padding:.5rem 1.25rem .25rem;
}

.sidebar-nav-item {
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.625rem 1.25rem;
    cursor:pointer;
    border-radius:0;
    transition:background .1s;
    color:var(--fg-muted);
    font-size:.875rem;
    font-weight:500;
    text-decoration:none;
    border:none;
    background:none;
    width:100%;
    text-align:left;
}
.sidebar-nav-item:hover { background:var(--surface); color:var(--fg); }
.sidebar-nav-item.active { background:var(--surface); color:var(--fg); }
.sidebar-nav-item .nav-icon {
    width:18px;
    height:18px;
    flex-shrink:0;
    opacity:.7;
}
.sidebar-nav-item.active .nav-icon { opacity:1; }

.sidebar-footer {
    margin-top:auto;
    padding:1rem 1.25rem;
    border-top:1px solid var(--border);
}

/* ── Bottom Nav ─────────────────────────────────────────────────────────── */
.bottom-nav-item {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.2rem;
    padding:.6rem .5rem;
    cursor:pointer;
    color:var(--fg-muted);
    font-size:.6rem;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    text-decoration:none;
    border:none;
    background:none;
    min-width:56px;
    transition:color .1s;
}
.bottom-nav-item.active { color:var(--fg); }
.bottom-nav-item svg { width:22px; height:22px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    padding:.625rem 1.125rem;
    border-radius:var(--radius);
    font-family:var(--font);
    font-size:.875rem;
    font-weight:500;
    cursor:pointer;
    transition:all .15s ease;
    border:1.5px solid transparent;
    text-decoration:none;
    white-space:nowrap;
    user-select:none;
    -webkit-user-select:none;
}
.btn:disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }

.btn-primary   { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.btn-primary:hover { background:var(--fg-muted); }
.btn-secondary { background:var(--surface); color:var(--fg); border-color:var(--border); }
.btn-secondary:hover { background:var(--surface-hover); border-color:var(--border-strong); }
.btn-ghost     { background:transparent; color:var(--fg-muted); border-color:transparent; }
.btn-ghost:hover { background:var(--surface); color:var(--fg); }
.btn-icon      { padding:.5rem; border-radius:var(--radius-sm); }
.btn-sm        { padding:.4rem .75rem; font-size:.8rem; }
.btn-lg        { padding:.875rem 1.5rem; font-size:1rem; }

/* ── Input / Form ───────────────────────────────────────────────────────── */
.input {
    width:100%;
    background:var(--surface);
    border:1.5px solid var(--border);
    border-radius:var(--radius);
    padding:.625rem .875rem;
    font-family:var(--font);
    font-size:.9rem;
    color:var(--fg);
    outline:none;
    transition:border-color .15s;
    resize:none;
}
.input:focus { border-color:var(--border-strong); }
.input::placeholder { color:var(--fg-subtle); }

.input-wrap { position:relative; }
.input-wrap .input { padding-right:2.5rem; }

/* ── Chat Styles ────────────────────────────────────────────────────────── */
.chat-view {
    display:flex;
    flex-direction:column;
    height:100%;
    position:relative;
}

.chat-messages {
    flex:1;
    overflow-y:auto;
    padding:1rem 1rem 1.5rem;
    display:flex;
    flex-direction:column;
    gap:.875rem;
    scroll-behavior:smooth;
}

.msg {
    display:flex;
    gap:.625rem;
    max-width:100%;
    animation: msgIn .2s ease forwards;
}
@keyframes msgIn {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
}

.msg-user { flex-direction:row-reverse; }

.msg-avatar {
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--surface);
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.7rem;
    font-weight:700;
    flex-shrink:0;
    overflow:hidden;
}
.msg-avatar img { width:100%; height:100%; object-fit:cover; }

.msg-bubble {
    max-width:80%;
    padding:.625rem .875rem;
    border-radius:var(--radius);
    line-height:1.6;
    font-size:.875rem;
}
.msg-assistant .msg-bubble {
    background:var(--surface);
    border:1px solid var(--border);
    border-bottom-left-radius:var(--radius-sm);
    color:var(--fg);
}
.msg-user .msg-bubble {
    background:var(--fg);
    color:var(--bg);
    border-bottom-right-radius:var(--radius-sm);
}
.msg-bubble p:last-child { margin-bottom:0; }
.msg-bubble p + p { margin-top:.5rem; }
.msg-bubble code {
    background:rgba(255,255,255,.1);
    padding:.1em .3em;
    border-radius:3px;
}
.msg-user .msg-bubble code { background:rgba(0,0,0,.2); }

.msg-meta {
    font-size:.65rem;
    color:var(--fg-subtle);
    margin-top:.25rem;
    padding:0 .25rem;
}

/* Typing indicator */
.typing-indicator {
    display:flex;
    gap:.25rem;
    padding:.625rem .875rem;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    border-bottom-left-radius:var(--radius-sm);
    width:fit-content;
}
.typing-dot {
    width:6px;
    height:6px;
    background:var(--fg-muted);
    border-radius:50%;
    animation:typingBounce 1.2s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay:.2s; }
.typing-dot:nth-child(3) { animation-delay:.4s; }
@keyframes typingBounce {
    0%,60%,100% { transform:translateY(0); }
    30%          { transform:translateY(-5px); }
}

/* ── Chat Input ─────────────────────────────────────────────────────────── */
.chat-input-area {
    padding:.75rem 1rem;
    border-top:1px solid var(--border);
    background:var(--bg);
    position:sticky;
    bottom:0;
}

.chat-input-wrap {
    display:flex;
    align-items:flex-end;
    gap:.5rem;
    background:var(--surface);
    border:1.5px solid var(--border);
    border-radius:var(--radius-lg);
    padding:.5rem .5rem .5rem .875rem;
    transition:border-color .15s;
}
.chat-input-wrap:focus-within { border-color:var(--border-strong); }

.chat-input {
    flex:1;
    background:transparent;
    border:none;
    outline:none;
    font-family:var(--font);
    font-size:.9rem;
    color:var(--fg);
    resize:none;
    max-height:150px;
    line-height:1.5;
    padding:.25rem 0;
}
.chat-input::placeholder { color:var(--fg-subtle); }

.chat-input-actions {
    display:flex;
    align-items:center;
    gap:.25rem;
    flex-shrink:0;
}

.chat-send-btn {
    width:34px;
    height:34px;
    border-radius:.5rem;
    background:var(--fg);
    color:var(--bg);
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:opacity .15s;
    flex-shrink:0;
}
.chat-send-btn:disabled { opacity:.3; cursor:not-allowed; }
.chat-send-btn:hover:not(:disabled) { opacity:.8; }

/* ── Cards & Surfaces ───────────────────────────────────────────────────── */
.card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:1.25rem;
}
.card-sm { padding:.875rem 1rem; border-radius:var(--radius); }
.card:hover { border-color:var(--border-strong); }

/* ── miniON Grid ────────────────────────────────────────────────────────── */
.minion-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    gap:.75rem;
    padding:1rem;
}

.minion-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:1rem .875rem;
    cursor:pointer;
    transition:all .15s ease;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.5rem;
    text-decoration:none;
    color:var(--fg);
}
.minion-card:hover {
    border-color:var(--border-strong);
    background:var(--surface-hover);
    transform:translateY(-2px);
    box-shadow:var(--shadow);
}
.minion-card.active {
    border-color:var(--fg);
    background:var(--surface-hover);
}

.minion-symbol {
    font-size:1.75rem;
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1;
}
.minion-name {
    font-size:.8rem;
    font-weight:600;
    letter-spacing:.02em;
}
.minion-role {
    font-size:.68rem;
    color:var(--fg-muted);
    font-weight:400;
}

/* ── Conversation List ──────────────────────────────────────────────────── */
.conv-list { display:flex; flex-direction:column; }
.conv-item {
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.625rem 1.25rem;
    cursor:pointer;
    transition:background .1s;
    border:none;
    background:none;
    text-align:left;
    width:100%;
    color:var(--fg-muted);
    font-size:.82rem;
    font-weight:400;
}
.conv-item:hover { background:var(--surface); color:var(--fg); }
.conv-item.active { background:var(--surface); color:var(--fg); }
.conv-item-title {
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.conv-item-meta {
    font-size:.65rem;
    color:var(--fg-subtle);
    flex-shrink:0;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
    display:inline-flex;
    align-items:center;
    padding:.15rem .5rem;
    border-radius:100px;
    font-size:.65rem;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--fg-muted);
}
.badge-active { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.badge-soon { opacity:.5; }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.7);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    z-index:1000;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:0;
    animation:fadeIn .15s ease;
}
@media (min-width:640px) {
    .modal-overlay { align-items:center; padding:1.5rem; }
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.modal {
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    width:100%;
    max-width:520px;
    max-height:90dvh;
    overflow-y:auto;
    padding:1.5rem;
    animation:slideUp .2s ease;
}
@media (min-width:640px) {
    .modal { border-radius:var(--radius-xl); }
}
@keyframes slideUp {
    from { transform:translateY(20px); opacity:0; }
    to   { transform:translateY(0); opacity:1; }
}

.modal-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:1.25rem;
}
.modal-title { font-size:1.1rem; font-weight:700; letter-spacing:-.02em; }
.modal-close {
    width:28px; height:28px;
    display:flex; align-items:center; justify-content:center;
    border:none; background:none; cursor:pointer;
    color:var(--fg-muted); border-radius:var(--radius-sm);
    transition:all .1s;
}
.modal-close:hover { background:var(--surface); color:var(--fg); }

/* ── Toast ──────────────────────────────────────────────────────────────── */
#toast-container {
    position:fixed;
    bottom:calc(var(--nav-h) + 1rem);
    left:50%;
    transform:translateX(-50%);
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:.5rem;
    pointer-events:none;
    width:calc(100% - 2rem);
    max-width:380px;
}
@media (min-width:768px) { #toast-container { bottom:1.5rem; } }

.toast {
    background:var(--fg);
    color:var(--bg);
    padding:.75rem 1rem;
    border-radius:var(--radius);
    font-size:.85rem;
    font-weight:500;
    pointer-events:auto;
    animation:toastIn .2s ease, toastOut .2s ease 3.8s forwards;
    box-shadow:var(--shadow-lg);
}
.toast-error { background:var(--error); color:#fff; }
.toast-success { background:var(--success); color:#000; }
@keyframes toastIn  { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes toastOut { from{opacity:1} to{opacity:0;transform:translateY(8px)} }

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:100px; }
::-webkit-scrollbar-thumb:hover { background:var(--fg-subtle); }

/* ── Utilities ──────────────────────────────────────────────────────────── */
.flex { display:flex; }
.flex-col { display:flex; flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-1 { gap:.25rem; }
.gap-2 { gap:.5rem; }
.gap-3 { gap:.75rem; }
.gap-4 { gap:1rem; }
.p-1 { padding:.25rem; }
.p-2 { padding:.5rem; }
.p-3 { padding:.75rem; }
.p-4 { padding:1rem; }
.px-4 { padding-left:1rem; padding-right:1rem; }
.py-2 { padding-top:.5rem; padding-bottom:.5rem; }
.mt-1 { margin-top:.25rem; }
.mt-2 { margin-top:.5rem; }
.mt-4 { margin-top:1rem; }
.mb-2 { margin-bottom:.5rem; }
.w-full { width:100%; }
.text-muted { color:var(--fg-muted); }
.text-subtle { color:var(--fg-subtle); }
.text-sm { font-size:.82rem; }
.text-xs { font-size:.72rem; }
.font-bold { font-weight:700; }
.font-medium { font-weight:500; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hidden { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ── Loading / Skeleton ─────────────────────────────────────────────────── */
.skeleton {
    background:linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 50%, var(--surface) 75%);
    background-size:200% 100%;
    animation:skeletonShimmer 1.5s infinite;
    border-radius:var(--radius-sm);
}
@keyframes skeletonShimmer {
    0%   { background-position:200% 0; }
    100% { background-position:-200% 0; }
}

.spinner {
    width:20px; height:20px;
    border:2px solid var(--border);
    border-top-color:var(--fg);
    border-radius:50%;
    animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty-state {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.75rem;
    padding:3rem 1.5rem;
    text-align:center;
    color:var(--fg-muted);
}
.empty-state-icon { font-size:2.5rem; opacity:.4; }
.empty-state-title { font-size:1rem; font-weight:600; color:var(--fg); }
.empty-state-desc { font-size:.85rem; max-width:280px; }

/* ── Welcome Banner ─────────────────────────────────────────────────────── */
.welcome-banner {
    padding:2rem 1rem 1.5rem;
    text-align:center;
}
.welcome-glyph {
    font-size:3rem;
    font-weight:800;
    letter-spacing:-.04em;
    line-height:1;
    margin-bottom:.5rem;
}
.welcome-tagline {
    font-size:.82rem;
    color:var(--fg-muted);
    font-weight:400;
    letter-spacing:.04em;
}

/* ── Section Header ─────────────────────────────────────────────────────── */
.section-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.875rem 1rem .5rem;
}
.section-title {
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--fg-subtle);
}

/* ── Drawer (mobile sidebar) ────────────────────────────────────────────── */
.drawer-overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:300;
    display:none;
}
.drawer-overlay.open { display:block; }
.app-sidebar.drawer-open { display:flex; position:fixed; z-index:400; height:100dvh; width:var(--sidebar-w); }

/* ── Conversation Context Menu ──────────────────────────────────────────── */
.ctx-menu-item {
    padding:.4rem .75rem;
    font-size:.82rem;
    cursor:pointer;
    border-radius:4px;
    transition:background .1s;
    color:var(--fg);
}
.ctx-menu-item:hover { background:var(--surface-hover); }
.ctx-menu-danger { color:var(--fg-muted); }
.ctx-menu-danger:hover { background:var(--surface-hover); color:#e55; }