/* ===========================================================================
   AetherisPortal - "AI ecosystem" theme, dark by default with a light mode
   Deep navy field, glass panels, cyan / violet neon edges.

   Every colour that differs between the two modes is a token below. :root is
   dark; :root[data-theme="light"] redefines the tokens. Add new colours as
   tokens in both blocks, never as a literal in a rule, or light mode breaks.
   =========================================================================== */

:root {
    --bg-deep:     #04070f;
    --bg-panel:    rgba(13, 20, 38, 0.72);
    --bg-panel-2:  rgba(18, 27, 48, 0.9);
    --bg-input:    rgba(6, 12, 26, 0.85);

    --line:        rgba(56, 189, 248, 0.16);
    --line-strong: rgba(56, 189, 248, 0.38);

    --cyan:        #22d3ee;
    --violet:      #a855f7;
    --amber:       #f59e0b;
    --emerald:     #34d399;
    --rose:        #f43f5e;

    --text:        #e6f1ff;
    --text-dim:    #8da5c4;
    --text-faint:  #5b708f;

    --radius:      14px;
    --radius-sm:   9px;
    --glow-cyan:   0 0 22px rgba(34, 211, 238, 0.30);
    --glow-violet: 0 0 22px rgba(168, 85, 247, 0.28);

    /* Noto Nastaliq Urdu sits straight after Inter: Inter has no Urdu letters,
       so any Urdu falls through to Nastaleeq before a system Naskh font can
       claim it. Google serves it by character range, so pages with no Urdu on
       them never download it. */
    --font: 'Inter', 'Noto Nastaliq Urdu', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    --font-urdu: 'Noto Nastaliq Urdu', 'Inter', 'Segoe UI', sans-serif;

    color-scheme: dark;

    --strong:        #ffffff;            /* headings and emphasised text */
    --on-accent:     #04070f;            /* text on a cyan / violet fill */
    --hover:         rgba(34, 211, 238, 0.07);
    --hover-soft:    rgba(34, 211, 238, 0.04);
    --row-line:      rgba(56, 189, 248, 0.07);
    --grid-line:     rgba(56, 189, 248, 0.05);
    --grid-opacity:  0.35;
    --ambient-opacity: 1;

    --sidebar-bg:    linear-gradient(180deg, rgba(10, 16, 32, 0.9), rgba(6, 10, 22, 0.75));
    --drawer-bg:     linear-gradient(180deg, rgba(11, 18, 35, .98), rgba(7, 12, 25, .98));
    --tab-bg:        rgba(10, 17, 33, 0.7);
    --cnt-bg:        rgba(255, 255, 255, 0.07);
    --btn-bg:        rgba(15, 23, 42, .8);
    --option-bg:     #0b1426;
    --scrim:         rgba(2, 5, 12, .66);
    --msg-bg:        rgba(9, 15, 30, .8);
    --dev-bg:        rgba(30, 16, 46, .55);
    --dev-line:      rgba(168, 85, 247, .34);
    --bub-me-bg:     linear-gradient(180deg, rgba(30, 16, 46, .92), rgba(22, 14, 38, .92));
    --convo-bg:      rgba(6, 11, 24, .5);
    --sys-bg:        rgba(8, 14, 30, .7);

    --shadow-panel:  0 18px 46px rgba(0, 0, 0, 0.45);
    --shadow-card:   0 14px 34px rgba(0, 0, 0, .5);
    --shadow-drawer: -30px 0 70px rgba(0, 0, 0, .6);
    --shadow-login:  0 30px 80px rgba(0, 0, 0, .6);
    --shadow-bub:    0 1px 10px rgba(0, 0, 0, .28);

    --alert-err:     #ffc9d2;
    --alert-ok:      #b9f5dd;
    --alert-info:    #bdeaf7;
    --errui-bg:      #1b1230;
    --errui-text:    #ffd7d7;

    /* Pill text is the pill's own colour pushed towards the ink: lighter on
       dark, darker on light, so a pale status colour stays readable. */
    --pill-ink:      #ffffff;
    --pill-strength: 82%;
}

:root[data-theme="light"] {
    color-scheme: light;

    --bg-deep:     #eef3f9;
    --bg-panel:    rgba(255, 255, 255, 0.88);
    --bg-panel-2:  #ffffff;
    --bg-input:    #f7fafd;

    --line:        rgba(15, 60, 110, 0.14);
    --line-strong: rgba(8, 145, 178, 0.45);

    --cyan:        #0891b2;
    --violet:      #7c3aed;
    --amber:       #b45309;
    --emerald:     #047857;
    --rose:        #e11d48;

    --text:        #0f1b2d;
    --text-dim:    #3f5373;
    --text-faint:  #5f7190;

    --glow-cyan:   0 0 14px rgba(8, 145, 178, 0.18);
    --glow-violet: 0 0 14px rgba(124, 58, 237, 0.16);

    --strong:        #0b1220;
    --on-accent:     #ffffff;
    --hover:         rgba(8, 145, 178, 0.08);
    --hover-soft:    rgba(8, 145, 178, 0.05);
    --row-line:      rgba(15, 60, 110, 0.08);
    --grid-line:     rgba(15, 60, 110, 0.06);
    --grid-opacity:  0.5;
    --ambient-opacity: 0.5;

    --sidebar-bg:    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 248, 252, 0.9));
    --drawer-bg:     #ffffff;
    --tab-bg:        #ffffff;
    --cnt-bg:        rgba(15, 40, 80, 0.07);
    --btn-bg:        #ffffff;
    --option-bg:     #ffffff;
    --scrim:         rgba(15, 27, 45, .35);
    --msg-bg:        #f7fafd;
    --dev-bg:        #f6f1ff;
    --dev-line:      rgba(124, 58, 237, .3);
    --bub-me-bg:     linear-gradient(180deg, #f4edff, #efe5ff);
    --convo-bg:      rgba(238, 243, 249, .6);
    --sys-bg:        #ffffff;

    --shadow-panel:  0 8px 24px rgba(15, 40, 80, 0.08);
    --shadow-card:   0 10px 26px rgba(15, 40, 80, .12);
    --shadow-drawer: -20px 0 50px rgba(15, 40, 80, .15);
    --shadow-login:  0 20px 50px rgba(15, 40, 80, .15);
    --shadow-bub:    0 1px 6px rgba(15, 40, 80, .08);

    --alert-err:     #9f1239;
    --alert-ok:      #065f46;
    --alert-info:    #155e75;
    --errui-bg:      #fff1f2;
    --errui-text:    #9f1239;

    --pill-ink:      #0b1220;
    --pill-strength: 60%;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: var(--font);
    font-size: 14px;
    color: var(--text);
    background: var(--bg-deep);
    -webkit-font-smoothing: antialiased;
}

/* Ambient glow field - the "holographic room" backdrop from the references. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    opacity: var(--ambient-opacity);
    background:
        radial-gradient(900px 620px at 12% -8%,  rgba(34, 211, 238, 0.16), transparent 60%),
        radial-gradient(820px 560px at 92% 4%,   rgba(168, 85, 247, 0.16), transparent 62%),
        radial-gradient(1100px 700px at 50% 108%, rgba(59, 130, 246, 0.12), transparent 60%),
        var(--bg-deep);
}

/* Faint grid, like the console screens in the reference images. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--grid-opacity);
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }

/* ------------------------------------------------------------------ shell */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 246px;
    flex: 0 0 246px;
    padding: 22px 16px;
    border-right: 1px solid var(--line);
    background: var(--sidebar-bg);
    backdrop-filter: blur(14px);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; padding: 0 6px; }

.brand .mark {
    width: 38px; height: 38px; flex: none;
    border-radius: 11px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(168, 85, 247, 0.22));
    border: 1px solid var(--line-strong);
    box-shadow: var(--glow-cyan);
    font-weight: 800; font-size: 17px;
    color: var(--strong);
}

.brand .name { font-size: 15px; font-weight: 700; line-height: 1.15; }
.brand .tag  { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.14em; text-transform: uppercase; }

.nav-group { margin-bottom: 20px; }
.nav-group .label {
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-faint); padding: 0 10px; margin-bottom: 8px;
}

.nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; margin-bottom: 3px;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 13.5px; font-weight: 500;
    border: 1px solid transparent;
    transition: all .16s ease;
}
.nav-link:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.nav-link.active {
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.16), rgba(168, 85, 247, 0.10));
    border-color: var(--line-strong);
    color: var(--strong);
    box-shadow: inset 0 0 18px rgba(34, 211, 238, 0.10);
}
.nav-link .ico { width: 18px; text-align: center; opacity: .9; }

.sidebar-foot {
    margin-top: auto; padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 12px; color: var(--text-faint);
}

.main { flex: 1 1 auto; min-width: 0; padding: 22px 26px 40px; }

.topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.topbar h1 { font-size: 21px; }
.topbar .sub { color: var(--text-dim); font-size: 12.5px; margin-top: 3px; }

.who {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--bg-panel);
}
.who .av {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--cyan), var(--violet));
    color: var(--on-accent); font-weight: 800; font-size: 12px;
}
.who .nm { font-size: 12.5px; font-weight: 600; line-height: 1.1; }
.who .rl { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .1em; }

/* ------------------------------------------------------------------ panel */

.panel {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-panel);
}
.panel-head {
    padding: 14px 18px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.panel-head h3 { font-size: 14.5px; }
.panel-body { padding: 16px 18px; }

/* ------------------------------------------------------------------- tabs */

.tabs {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding-bottom: 14px; margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--tab-bg);
    color: var(--text-dim);
    font-size: 12.8px; font-weight: 600;
    cursor: pointer;
    transition: all .16s ease;
    white-space: nowrap;
}
.tab:hover { color: var(--text); border-color: var(--line-strong); }
.tab .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tab .cnt {
    min-width: 21px; padding: 1px 6px; border-radius: 999px;
    background: var(--cnt-bg);
    font-size: 11px; font-weight: 700; text-align: center;
}
.tab.on {
    color: var(--strong);
    border-color: var(--tab-color, var(--cyan));
    background: color-mix(in srgb, var(--tab-color, #22d3ee) 16%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--tab-color, #22d3ee) 34%, transparent);
}
.tab.on .cnt { background: color-mix(in srgb, var(--tab-color, #22d3ee) 32%, transparent); }

/* ------------------------------------------------------------------ cards */

.cards { display: grid; gap: 12px; }

.card {
    position: relative;
    padding: 14px 16px 14px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-panel);
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
    overflow: hidden;
}
.card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--accent, var(--cyan));
    box-shadow: 0 0 16px var(--accent, var(--cyan));
}
.card:hover {
    transform: translateY(-2px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-card), 0 0 0 1px rgba(34, 211, 238, .12);
}
.card.sel { border-color: var(--accent, var(--cyan)); box-shadow: 0 0 0 1px var(--accent, var(--cyan)); }

.card-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.code {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
    color: var(--cyan);
}
.card h4 { font-size: 14px; line-height: 1.35; margin-bottom: 7px; color: var(--strong); }
.card .meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-faint); }
.card .meta b { color: var(--text-dim); font-weight: 600; }

.pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2.5px 9px; border-radius: 999px;
    font-size: 10.6px; font-weight: 700; letter-spacing: .03em;
    border: 1px solid color-mix(in srgb, var(--pill, #22d3ee) 48%, transparent);
    background: color-mix(in srgb, var(--pill, #22d3ee) 15%, transparent);
    color: color-mix(in srgb, var(--pill, #22d3ee) var(--pill-strength), var(--pill-ink));
    white-space: nowrap;
}

/* ------------------------------------------------------------- drawer/detail */

.scrim {
    position: fixed; inset: 0; z-index: 60;
    background: var(--scrim);
    backdrop-filter: blur(3px);
}
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
    width: min(760px, 94vw);
    background: var(--drawer-bg);
    border-left: 1px solid var(--line-strong);
    box-shadow: var(--shadow-drawer);
    display: flex; flex-direction: column;
    animation: slidein .2s ease;
}
@keyframes slidein { from { transform: translateX(28px); opacity: .4; } to { transform: none; opacity: 1; } }

.drawer-head {
    padding: 16px 20px; border-bottom: 1px solid var(--line);
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.drawer-body { padding: 18px 20px 26px; overflow-y: auto; flex: 1 1 auto; }
.drawer-body h5 {
    font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
    color: var(--text-faint); margin: 20px 0 8px;
}
.drawer-body h5:first-child { margin-top: 0; }
.readout {
    white-space: pre-wrap; line-height: 1.55; font-size: 13px; color: var(--text);
    background: var(--bg-input); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 12px 14px;
}

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
.kv .k { font-size: 10.4px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px; }
.kv .v { font-size: 13px; }

/* -------------------------------------------------------------- follow-ups */

.thread { display: flex; flex-direction: column; gap: 10px; }
.msg {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 11px 13px; background: var(--msg-bg);
}
.msg.dev { border-color: var(--dev-line); background: var(--dev-bg); }
.msg-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; font-size: 11.5px; }
.msg-head .au { font-weight: 700; color: var(--strong); }
.msg-head .tm { color: var(--text-faint); }
.msg .bd { white-space: pre-wrap; font-size: 13px; line-height: 1.5; }

.timeline { border-left: 1px solid var(--line); padding-left: 14px; display: flex; flex-direction: column; gap: 11px; }
.timeline .ev { position: relative; font-size: 12.2px; color: var(--text-dim); }
.timeline .ev::before {
    content: ""; position: absolute; left: -19px; top: 5px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--evc, var(--cyan)); box-shadow: 0 0 10px var(--evc, var(--cyan));
}

/* ------------------------------------------------------------------ forms */

label.fl {
    display: block; font-size: 10.6px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-faint); margin-bottom: 5px;
}

.inp, select.inp, textarea.inp {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-input);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    outline: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.inp:focus, select.inp:focus, textarea.inp:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .13);
}
textarea.inp { resize: vertical; min-height: 92px; line-height: 1.5; }
select.inp option { background: var(--option-bg); color: var(--text); }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 13px; }
.field { margin-bottom: 13px; }

.btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: var(--btn-bg);
    color: var(--text);
    font-family: var(--font); font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}
.btn:hover { border-color: var(--cyan); color: var(--strong); box-shadow: var(--glow-cyan); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.btn.primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--cyan), var(--violet));
    color: var(--on-accent); font-weight: 700;
}
.btn.primary:hover { filter: brightness(1.1); box-shadow: 0 0 24px rgba(34, 211, 238, .42); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--text-dim); }
.btn.ghost:hover { color: var(--strong); }
.btn.sm { padding: 6px 11px; font-size: 12px; }

.search {
    position: relative; flex: 1 1 260px; max-width: 420px;
}
.search .inp { padding-left: 34px; }
.search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); }

/* ------------------------------------------------------------------ stats */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 13px; margin-bottom: 20px; }
.stat {
    padding: 16px 18px; border-radius: var(--radius);
    border: 1px solid var(--line); background: var(--bg-panel);
    position: relative; overflow: hidden;
}
.stat::after {
    content: ""; position: absolute; right: -30px; top: -30px;
    width: 110px; height: 110px; border-radius: 50%;
    background: radial-gradient(circle, var(--accent, rgba(34,211,238,.22)), transparent 68%);
}
.stat .n { font-size: 30px; font-weight: 750; line-height: 1; color: var(--strong); }
.stat .l { margin-top: 6px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint); }

/* ------------------------------------------------------------------ table */

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th {
    text-align: left; padding: 9px 11px;
    font-size: 10.4px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-faint); border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
table.grid td { padding: 9px 11px; border-bottom: 1px solid var(--row-line); }
table.grid tr:hover td { background: var(--hover-soft); }

/* ------------------------------------------------------------------ login */

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card {
    width: min(420px, 100%);
    padding: 34px 32px;
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    background: var(--bg-panel-2);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-login), var(--glow-cyan);
}
.login-card .brand { justify-content: center; margin-bottom: 8px; }
.login-card .hello { text-align: center; color: var(--text-dim); font-size: 13px; margin-bottom: 24px; }

.alert {
    padding: 10px 13px; border-radius: var(--radius-sm); font-size: 12.6px;
    border: 1px solid rgba(244, 63, 94, .42); background: rgba(244, 63, 94, .12);
    color: var(--alert-err); margin-bottom: 14px;
}
.alert.ok { border-color: rgba(52, 211, 153, .42); background: rgba(52, 211, 153, .12); color: var(--alert-ok); }
.alert.info { border-color: var(--line-strong); background: rgba(34, 211, 238, .1); color: var(--alert-info); }

.empty { text-align: center; padding: 54px 20px; color: var(--text-faint); }
.empty .big { font-size: 34px; margin-bottom: 10px; opacity: .5; }

.muted { color: var(--text-faint); }
.right { text-align: right; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }

/* Blazor's own error UI, restyled so it does not appear as a white bar. */
#blazor-error-ui {
    background: var(--errui-bg); color: var(--errui-text);
    border-top: 1px solid var(--rose);
    bottom: 0; box-shadow: 0 -1px 20px rgba(0,0,0,.5);
    display: none; left: 0; padding: 10px 16px; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 7px; }

@media (max-width: 880px) {
    .shell { flex-direction: column; }
    .sidebar { width: 100%; flex: none; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--line); }
    .main { padding: 18px 15px 34px; }
}


/* ===========================================================================
   Conversation - a requirement read as a chat.
   =========================================================================== */

.convo {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 96px);
    min-height: 460px;
}

.convo-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
    backdrop-filter: blur(9px);
}

.convo-head .back {
    font-size: 20px;
    line-height: 1;
    color: var(--text-dim);
    text-decoration: none;
    padding: 4px 8px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
}
.convo-head .back:hover { color: var(--strong); border-color: var(--line-strong); }

.convo-head .who { flex: 1 1 auto; min-width: 0; }
.convo-head .line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.convo-head h2 {
    margin: 5px 0 3px;
    font-size: 17px;
    line-height: 1.3;
}
.convo-head .sub { font-size: 12px; color: var(--text-dim); }
.convo-head .acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.convo-head .inp.sm { padding: 6px 10px; font-size: 12px; max-width: 190px; }

/* ------------------------------------------------------------------ thread */

.convo-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--convo-bg);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
}

.bub {
    max-width: 74%;
    padding: 10px 13px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--bg-panel-2);
    box-shadow: var(--shadow-bub);
}
.bub.them { align-self: flex-start; border-bottom-left-radius: 5px; }
.bub.me {
    align-self: flex-end;
    border-bottom-right-radius: 5px;
    background: var(--bub-me-bg);
    border-color: var(--dev-line);
}
.bub.first { max-width: 100%; border-color: var(--line-strong); }

.bub-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: 11.5px;
}
.bub-head .au { font-weight: 700; color: var(--strong); }
.bub-head .tm { color: var(--text-faint); }
.bub-head .tag {
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-faint);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1px 7px;
}
.bub-head .tag.ok { color: var(--emerald); border-color: rgba(52, 211, 153, .4); }
.pill.sm { font-size: 10px; padding: 1px 7px; }

.bub .bd { white-space: pre-wrap; font-size: 13.2px; line-height: 1.55; }
.bub .bd.trans {
    margin-top: 8px;
    padding-left: 10px;
    border-left: 2px solid rgba(34, 211, 238, .45);
    color: var(--text-dim);
    font-size: 12.6px;
}
.bub .lnk { display: inline-block; margin-top: 7px; font-size: 12.5px; }

.bub .shot {
    display: block;
    max-width: 100%;
    max-height: 340px;
    border-radius: 9px;
    border: 1px solid var(--line);
}

.bub .filecard {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--bg-input);
    text-decoration: none;
    color: var(--text);
}
.bub .filecard:hover { border-color: var(--cyan); }
.bub .filecard .ic { font-size: 19px; }
.bub .filecard b { display: block; font-size: 12.8px; }
.bub .filecard i { font-style: normal; font-size: 11px; color: var(--text-faint); }

.voice { display: flex; align-items: center; gap: 10px; }
.voice audio { height: 34px; max-width: 100%; }
.voice .dur { font-size: 11.5px; color: var(--text-faint); }

.linkbtn {
    margin-top: 7px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--cyan);
    font-size: 11.8px;
    cursor: pointer;
    font-family: inherit;
}
.linkbtn:hover { text-decoration: underline; }
.linkbtn.promote { display: block; color: var(--text-faint); }
.linkbtn.promote:hover { color: var(--emerald); }

/* A line the portal wrote itself - a status move, or a message folded in. */
.sysline {
    align-self: center;
    max-width: 82%;
    text-align: center;
    font-size: 11.4px;
    color: var(--text-faint);
}
.sysline span {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--sys-bg);
}
.sysline i { font-style: normal; opacity: .7; margin-left: 5px; }

/* ---------------------------------------------------------------- composer */

.composer {
    padding: 12px 14px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
    backdrop-filter: blur(9px);
}

.composer-row { display: flex; align-items: flex-end; gap: 9px; }

.msgbox {
    flex: 1 1 auto;
    resize: none;
    max-height: 140px;
    padding: 11px 13px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--bg-input);
    color: var(--text);
    font-family: inherit;
    font-size: 13.4px;
    line-height: 1.45;
}
.msgbox:focus { outline: none; border-color: var(--line-strong); box-shadow: var(--glow-cyan); }

.iconbtn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--bg-input);
    color: var(--text-dim);
    cursor: pointer;
}
.iconbtn:hover { color: var(--strong); border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.iconbtn.mic:hover { border-color: var(--rose); box-shadow: 0 0 20px rgba(244, 63, 94, .35); }
.iconbtn.send {
    background: linear-gradient(135deg, var(--cyan), #3b82f6);
    border-color: transparent;
    color: var(--on-accent);
}

.micnote { margin-top: 8px; font-size: 12px; color: var(--amber); }

/* recording in progress */
.recbar {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
}
.recbar .dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--rose);
    animation: pulse 1.1s ease-in-out infinite;
    flex: 0 0 auto;
}
@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(244, 63, 94, .55); }
    50%      { opacity: .55; box-shadow: 0 0 0 7px rgba(244, 63, 94, 0); }
}
.recbar .rt { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; }
.recbar .heard {
    flex: 1 1 240px;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text-dim);
    max-height: 42px;
    overflow-y: auto;
}

.review audio { height: 34px; }

/* ------------------------------------------------------------------ phones */

@media (max-width: 720px) {
    .convo { height: calc(100vh - 70px); }
    .convo-head { flex-wrap: wrap; padding: 11px 13px; }
    .convo-head .acts { width: 100%; }
    .convo-head .inp.sm { max-width: none; flex: 1 1 auto; }
    .convo-head h2 { font-size: 15.5px; }
    .convo-body { padding: 13px; }
    .bub { max-width: 90%; }
}

/* unread marker on the requirement cards */
.unread {
    background: var(--rose);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tab .unread { margin-left: 6px; }

/* Screenshots: in a thread, and the thumbnail on the request form while one
   is waiting to be attached. Both are capped so a large paste cannot push the
   conversation off the screen; clicking opens the full size. */
.shot {
    display: block;
    max-width: min(420px, 100%);
    max-height: 300px;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: 8px;
    cursor: zoom-in;
}
.shot-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 6px;
}

/* --------------------------------------------------- dashboard as a menu */

/* Every count on the dashboard opens the board filtered to what it counted.
   These keep a link or a clickable row looking like the text it replaced. */
a.stat, a.statline {
    display: block;
    color: inherit;
    text-decoration: none;
}
a.stat:hover, a.statline:hover { text-decoration: none; }
a.stat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
a.statline:hover .pill { filter: brightness(1.15); }

tr.linkrow { cursor: pointer; }
tr.linkrow:hover td { background: var(--hover-soft); }
td.linkcell { cursor: pointer; }
tr:hover td.linkcell:hover { background: var(--hover); }

/* ------------------------------------------------------------------ urdu */

/* Urdu written anywhere reads right to left. Display elements carry
   dir="auto", so a line that starts in Urdu turns itself around and an English
   one stays put. Nastaleeq climbs and hangs well beyond Latin letters, so it
   needs much taller lines or the dots and tails are clipped. */
[dir="auto"]:dir(rtl) {
    font-family: var(--font-urdu);
    line-height: 2.2;
    text-align: right;
}

/* A box being typed into in Urdu turns around straight away, before its
   first letter, which is how the writer can see Urdu is on. */
html[data-urdu="on"] [data-urdu] {
    direction: rtl;
    text-align: right;
    font-family: var(--font-urdu);
    line-height: 2.2;
}
html[data-urdu="on"] .msgbox[data-urdu] { max-height: 180px; }

/* The box and its switch travel together. */
.urdu-field { position: relative; }
.fl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fl-row label.fl { margin-bottom: 5px; }

.urdu-ctl { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.urdu-toggle, .urdu-keys {
    border: 1px solid var(--line);
    background: var(--bg-input);
    color: var(--text-dim);
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font);
    font-size: 11.5px;
    line-height: 1;
    padding: 4px 10px;
    margin-bottom: 5px;
}
.urdu-toggle .to-ur { font-family: var(--font-urdu); font-size: 13px; line-height: 1.2; }
.urdu-keys { padding: 4px 8px; }
.urdu-toggle:hover, .urdu-keys:hover { color: var(--strong); border-color: var(--cyan); }

/* The label names what a click switches TO, like the theme button. */
.urdu-toggle .to-en { display: none; }
html[data-urdu="on"] .urdu-toggle .to-ur { display: none; }
html[data-urdu="on"] .urdu-toggle .to-en { display: inline; }
html[data-urdu="on"] .urdu-toggle { border-color: var(--cyan); color: var(--cyan); }

/* In the chat composer the switch sits in the row with the other round
   buttons rather than above the box. */
.composer-row .urdu-ctl { align-self: center; }
.composer-row .urdu-toggle, .composer-row .urdu-keys { margin-bottom: 0; }

.urdu-chart {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 900;
    width: min(420px, calc(100vw - 36px));
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--bg-panel-2);
    box-shadow: var(--shadow-panel);
}
.urdu-chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.urdu-chart-close { background: none; border: 0; color: var(--text-dim); font-size: 18px; cursor: pointer; }
.urdu-chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 5px; }
.urdu-chart .uk {
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px;
}
.urdu-chart kbd { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; color: var(--cyan); }
.urdu-chart .uk i { font-style: normal; font-family: var(--font-urdu); font-size: 16px; line-height: 1.9; }
.urdu-chart-foot { margin-top: 8px; font-size: 11.5px; color: var(--text-faint); }

/* ------------------------------------------------------------ theme switch */

/* Lives in the sidebar. The label shows the mode you would switch TO, and is
   picked by CSS from data-theme, so the button needs no state of its own. */
.theme-toggle {
    width: 100%;
    background: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.theme-toggle .to-dark { display: none; }
:root[data-theme="light"] .theme-toggle .to-light { display: none; }
:root[data-theme="light"] .theme-toggle .to-dark  { display: inline; }