:root {
    --bg:          #0F1420;
    --bg-mid:      #141926;
    --card:        #181E2C;
    --card-2:      #222838;
    --border:      #2A3040;
    --border-soft: #1E2536;
    --primary:     #1A56DB;
    --accent:      #7DD3FC;
    --accent-soft: rgba(125,211,252,.1);
    --text:        #F4F5F7;
    --text-body:   #D4D6DE;
    --text-quiet:  #8B90A0;
    --text-muted:  #5A5F6E;
    --green:       #4ade80;
    --cta-grad:    linear-gradient(135deg, #1A56DB 0%, #2563EB 100%);
}

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

html {
    height: -webkit-fill-available; /* iOS Safari: true viewport height */
}

body {
    height: 100%;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text-body);
    -webkit-font-smoothing: antialiased;
    /* overflow/position set dynamically by JS for iOS; left unset here to avoid breaking env() */
}

/* ─── LAYOUT ─── */
.app {
    display: flex;
    height: 100vh;                   /* absolute fallback */
    height: -webkit-fill-available;  /* iOS < 16 */
    height: 100dvh;                  /* dvh fallback */
    height: var(--app-h, 100dvh);   /* JS visualViewport: reliable on iOS 26 / Chrome Android */
    overflow: hidden;
}

/* ─── SIDEBAR ─── */
.sidebar {
    width: 256px;
    flex-shrink: 0;
    background: var(--bg-mid);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidebar-top {
    padding: 20px 16px 16px;
    border-bottom: 1px solid var(--border-soft);
}
.brand {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; margin-bottom: 16px;
}
.brand svg { width: 28px; height: 28px; flex-shrink: 0; }
.brand-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; }

.new-chat-btn {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 9px 12px;
    background: var(--accent-soft);
    border: 1px solid rgba(125,211,252,.18);
    border-radius: 8px;
    color: var(--accent); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background .15s;
    font-family: inherit;
}
.new-chat-btn:hover { background: rgba(125,211,252,.16); }
.new-chat-btn svg { flex-shrink: 0; }

/* Conversation list */
.conv-list { flex: 1; overflow-y: auto; padding: 8px; }
.conv-list::-webkit-scrollbar { width: 3px; }
.conv-list::-webkit-scrollbar-track { background: transparent; }
.conv-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.conv-section-label {
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--text-muted);
    padding: 8px 8px 4px;
}
.conv-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px; border-radius: 8px;
    cursor: pointer; transition: background .12s;
}
.conv-item:hover { background: var(--border-soft); }
.conv-item.active { background: var(--card); }
.conv-icon {
    width: 28px; height: 28px; border-radius: 6px;
    background: var(--border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.conv-icon svg { opacity: .55; }
.conv-meta { flex: 1; min-width: 0; }
.conv-title {
    font-size: 12px; font-weight: 500; color: var(--text-body);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.4;
}
.conv-item.active .conv-title { color: var(--text); font-weight: 600; }
.conv-time { font-size: 10px; color: var(--text-muted); }

/* Sidebar footer */
.sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--border-soft); }
.conn-status {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: var(--border-soft); border-radius: 8px;
}
.conn-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--green); flex-shrink: 0;
    box-shadow: 0 0 6px rgba(74,222,128,.5);
}
.conn-label { font-size: 11px; color: var(--text-quiet); flex: 1; line-height: 1.3; }
.conn-label strong { display: block; color: var(--text-body); font-weight: 600; font-size: 11px; }

/* ─── MAIN ─── */
.main {
    flex: 1; display: flex; flex-direction: column;
    overflow: hidden; background: var(--bg);
}

/* Chat header */
.chat-header {
    display: flex; align-items: center; gap: 12px;
    padding: 0 24px; height: 56px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.chat-header-av {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--cta-grad);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.chat-header-info { flex: 1; }
.chat-header-name { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1; }
.chat-header-sub { font-size: 11px; color: var(--green); margin-top: 2px; }
.header-actions { display: flex; align-items: center; gap: 4px; }
.icon-btn {
    width: 32px; height: 32px; border-radius: 7px;
    background: transparent; border: none;
    color: var(--text-quiet);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .12s, color .12s;
    font-family: inherit;
}
.icon-btn:hover { background: var(--card-2); color: var(--text-body); }

/* Messages */
.messages {
    flex: 1; overflow-y: auto;
    padding: 32px 24px;
    display: flex; flex-direction: column; gap: 24px;
}
.messages::-webkit-scrollbar { width: 4px; }
.messages::-webkit-scrollbar-track { background: transparent; }
.messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Message row */
.msg-row { display: flex; gap: 12px; max-width: 800px; }
.msg-row.user { align-self: flex-end; flex-direction: row-reverse; }
.msg-av {
    width: 28px; height: 28px; border-radius: 7px;
    flex-shrink: 0; margin-top: 2px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}
.msg-av.faber { background: var(--cta-grad); color: #fff; }
.msg-av.user { background: var(--card-2); border: 1px solid var(--border); color: var(--text-quiet); }
.msg-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg-sender { font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 0 2px; }
.msg-row.user .msg-sender { text-align: right; }

.bubble {
    padding: 10px 16px; border-radius: 12px;
    font-size: 13px; line-height: 1.65; word-break: break-word;
}
.bubble.faber {
    background: var(--card-2); border: 1px solid var(--border);
    color: var(--text-body); border-bottom-left-radius: 3px;
}
.bubble.user { background: var(--primary); color: #fff; border-bottom-right-radius: 3px; }
.bubble .hi { color: var(--accent); font-weight: 500; }
.bubble .warn { color: #fbbf24; font-weight: 500; }

/* Data table */
.data-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
.data-table th {
    text-align: left; padding: 5px 10px;
    background: rgba(255,255,255,.04); color: var(--text-quiet);
    font-weight: 600; border-bottom: 1px solid var(--border);
}
.data-table td { padding: 5px 10px; border-bottom: 1px solid var(--border-soft); color: var(--text-body); }
.data-table tr:last-child td { border-bottom: none; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.badge-ok   { background: rgba(74,222,128,.15); color: #4ade80; }
.badge-warn { background: rgba(251,191,36,.15);  color: #fbbf24; }

/* Typing indicator */
.typing { display: flex; gap: 4px; align-items: center; padding: 12px 16px; }
.typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-muted);
    animation: blink 1.2s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink {
    0%, 80%, 100% { opacity: .3; transform: scale(.85); }
    40%           { opacity: 1;  transform: scale(1); }
}

/* ─── INPUT ─── */
.input-area {
    padding: 8px 24px 24px;
    padding-bottom: max(24px, calc(16px + env(safe-area-inset-bottom)));
    flex-shrink: 0;
}
.input-hint {
    font-size: 11px; color: var(--text-muted);
    margin-bottom: 6px; padding: 0 4px;
}
.input-hint kbd {
    display: inline-block; padding: 1px 5px;
    background: var(--card-2); border: 1px solid var(--border);
    border-radius: 4px; font-size: 10px; font-family: inherit; color: var(--text-quiet);
}
.input-wrap {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px;
    display: flex; flex-direction: row; align-items: flex-end;
    gap: 8px; padding: 8px;
    transition: border-color .15s;
}
.input-wrap:focus-within { border-color: rgba(125,211,252,.4); }

textarea {
    flex: 1;
    background: transparent; border: none; outline: none;
    resize: none; padding: 6px 8px;
    font-size: 14px; color: var(--text); font-family: inherit;
    line-height: 1.6; min-height: 36px; max-height: 160px; overflow-y: auto;
}
textarea::placeholder { color: var(--text-muted); }
textarea::-webkit-scrollbar { width: 3px; }
textarea::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.send-btn {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    background: var(--cta-grad); border: none; border-radius: 7px;
    color: #fff; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: box-shadow .15s, opacity .15s;
    font-family: inherit;
}
.send-btn:hover { box-shadow: 0 4px 14px rgba(26,86,219,.35); }
.send-btn:disabled { opacity: .4; cursor: default; box-shadow: none; }

/* ─── SCREEN SWITCHING ─── */
.hidden { display: none !important; }
.screen { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ─── LOGIN ─── */
.login-wrap {
    flex: 1; display: flex; align-items: center; justify-content: center;
    background: var(--bg); padding: 24px;
}
.login-card {
    width: 100%; max-width: 380px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 20px; padding: 40px 36px;
}
.login-brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; margin-bottom: 28px;
    font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.3px;
}
.login-title {
    font-size: 22px; font-weight: 700; color: var(--text);
    letter-spacing: -.5px; margin-bottom: 4px;
}
.login-sub { font-size: 13px; color: var(--text-quiet); margin-bottom: 28px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-quiet); }
.field input {
    background: var(--card-2); border: 1px solid var(--border);
    border-radius: 8px; padding: 10px 14px;
    font-size: 14px; color: var(--text); font-family: inherit;
    outline: none; transition: border-color .15s;
}
.field input:focus { border-color: rgba(125,211,252,.4); }
.field input::placeholder { color: var(--text-muted); }
.field-error { font-size: 12px; color: #f87171; margin-top: 2px; }
.login-btn {
    margin-top: 4px; padding: 12px;
    background: var(--cta-grad); border: none; border-radius: 9px;
    color: #fff; font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: box-shadow .15s;
}
.login-btn:hover { box-shadow: 0 4px 16px rgba(26,86,219,.4); }
.login-footer {
    margin-top: 20px; font-size: 12px; color: var(--text-muted);
    text-align: center;
}
.login-footer a { color: var(--accent); text-decoration: none; }

/* ─── FACTORY SELECTOR ─── */
.factory-wrap {
    flex: 1; display: flex; flex-direction: column;
    background: var(--bg); overflow-y: auto;
}
.factory-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 32px; border-bottom: 1px solid var(--border-soft);
    flex-shrink: 0;
}
.brand-sm {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; font-size: 14px; font-weight: 700;
    color: var(--text); letter-spacing: -.3px;
}
.logout-sm {
    background: none; border: 1px solid var(--border);
    border-radius: 7px; padding: 6px 14px;
    color: var(--text-quiet); font-size: 12px; font-weight: 500;
    cursor: pointer; font-family: inherit; transition: border-color .15s, color .15s;
}
.logout-sm:hover { border-color: var(--accent); color: var(--text); }
.factory-body { flex: 1; padding: 40px 32px; max-width: 800px; margin: 0 auto; width: 100%; }
.factory-greeting {
    display: flex; align-items: center; gap: 16px; margin-bottom: 40px;
}
.user-av-lg {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--cta-grad); color: #fff;
    font-size: 18px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.user-greeting-name { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.4px; }
.user-greeting-email { font-size: 12px; color: var(--text-quiet); margin-top: 2px; }
.factory-heading { margin-bottom: 24px; }
.factory-heading h2 {
    font-size: 18px; font-weight: 700; color: var(--text);
    letter-spacing: -.3px; margin-bottom: 4px;
}
.factory-heading p { font-size: 13px; color: var(--text-quiet); }
.factory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.factory-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 16px; padding: 24px;
    transition: border-color .15s, box-shadow .15s; cursor: default;
}
.factory-card:hover { border-color: rgba(125,211,252,.3); box-shadow: 0 4px 24px rgba(0,0,0,.2); }
.factory-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.factory-name { font-size: 16px; font-weight: 700; color: var(--text); }
.factory-online-badge {
    font-size: 11px; font-weight: 600; padding: 3px 9px;
    background: rgba(74,222,128,.12); color: var(--green);
    border-radius: 20px;
}
.factory-areas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.area-chip {
    padding: 6px 14px; border-radius: 8px;
    background: var(--card-2); border: 1px solid var(--border);
    color: var(--text-body); font-size: 12px; font-weight: 500;
    cursor: pointer; font-family: inherit;
    transition: background .12s, border-color .12s, color .12s;
}
.area-chip:hover {
    background: var(--accent-soft); border-color: rgba(125,211,252,.35);
    color: var(--accent);
}
.factory-card-footer { font-size: 11px; color: var(--text-muted); }

/* ─── SIDEBAR ADDITIONS ─── */
.sidebar-user {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
}
.user-av {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--cta-grad); color: #fff;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.user-meta { flex: 1; min-width: 0; }
.user-name { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; }
.user-email {
    font-size: 10px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.factory-ctx {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--border-soft); border-radius: 8px;
    padding: 7px 10px; margin-bottom: 12px;
}
.factory-ctx-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.factory-ctx-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); flex-shrink: 0;
    box-shadow: 0 0 5px rgba(74,222,128,.5);
}
.factory-ctx-text {
    font-size: 11px; color: var(--text-body); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctx-sep { color: var(--text-muted); }
.switch-btn {
    flex-shrink: 0; background: none; border: none;
    color: var(--accent); font-size: 10px; font-weight: 600;
    cursor: pointer; font-family: inherit; padding: 0 0 0 8px;
    transition: opacity .15s;
}
.switch-btn:hover { opacity: .7; }

/* ─── MOBILE BOTTOM SHEET ─── */
.mobile-menu-btn { display: none; }

.sheet-overlay {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(2px);
}
.sheet {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--card); border-top: 1px solid var(--border);
    border-radius: 20px 20px 0 0;
    padding: 0 20px calc(24px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.32,.72,0,1);
}
.sheet.sheet-open { transform: translateY(0); }
.sheet-handle {
    width: 36px; height: 4px; border-radius: 2px;
    background: var(--border); margin: 12px auto 20px;
}
.sheet-user {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
}
.sheet-user .user-av { width: 36px; height: 36px; border-radius: 9px; font-size: 14px; }
.sheet-divider { height: 1px; background: var(--border-soft); margin: 12px 0; }
.sheet-ctx { margin-bottom: 4px; }
.sheet-ctx-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.sheet-ctx-value { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-body); font-weight: 500; }
.sheet-btn {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 14px 4px;
    background: none; border: none;
    color: var(--text-body); font-size: 14px; font-weight: 500;
    cursor: pointer; font-family: inherit;
    transition: color .12s;
}
.sheet-btn:hover { color: var(--text); }
.sheet-btn-danger { color: #f87171; }
.sheet-btn-danger:hover { color: #fca5a5; }

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
    .sidebar { display: none; }
    .mobile-menu-btn { display: flex; }
    .chat-header {
        padding-left:  max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    .messages {
        padding: 24px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
    }
    .input-area {
        padding-left:  max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    .input-hint { display: none; }
    .input-wrap { border-radius: 10px; }
}