:root {
    color-scheme: dark;
    --bg: #0c0c0e;
    --bg-glow: #07140c;        /* subtle green wash behind hero */
    --fg: #f0f0f3;
    --muted: #8a8f99;
    --muted-2: #5a5e68;
    --red: #3f7d55;
    --red-bright: #5fa775;
    --link-red: #8cc79a;
    --red-deep: #254a32;
    --card-dark: #1a1c20;
    --card-border: #2a2d33;
    --green: #4ade80;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--fg);
    background: var(--bg);
    /* Subtle red glow in the top-right corner — matches the mockup. */
    background-image:
        radial-gradient(ellipse 60% 40% at 75% 0%, rgba(212, 0, 0, 0.18), transparent 70%),
        linear-gradient(to bottom, var(--bg-glow), var(--bg) 30%);
    background-attachment: fixed;
}

main#root {
    max-width: 620px;
    margin: 0 auto;
    padding: 28px 28px 24px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---- Brand mark ---- */
.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 4px;
}
.brand h1 {
    font: 600 16px/1 'Segoe UI Semibold', 'Segoe UI', sans-serif;
    letter-spacing: 0.5px;
    margin: 0;
}
.brand-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--red), transparent);
}
.brand-sub {
    margin: 0 0 22px;
    color: var(--muted);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
}

/* ---- Hero ---- */
.hero {
    margin: 0 0 6px;
    font: 700 30px/1.1 'Segoe UI', sans-serif;
    letter-spacing: -0.5px;
}
.hero .accent {
    background: linear-gradient(120deg, var(--red-bright), var(--red));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}
.hero-sub {
    color: var(--muted);
    margin: 0 0 24px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 400px;
}

/* ---- Card row ---- */
.card-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
.card {
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 18px 16px 16px;
    color: var(--fg);
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    transition: transform 100ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.card-ico {
    width: 22px;
    height: 22px;
    fill: rgba(255, 255, 255, 0.85);
}
.card-title {
    font-weight: 600;
    font-size: 15px;
    margin-top: auto;
}
.card-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}
.card:hover {
    transform: translateY(-1px);
}
.card:active {
    transform: translateY(0);
}
/* Primary share card — the red gradient one in the mockup. */
.card-primary {
    background: linear-gradient(135deg, var(--red-bright) 0%, var(--red) 55%, var(--red-deep) 100%);
    box-shadow: 0 6px 18px rgba(212, 0, 0, 0.28);
}
.card-primary .card-ico {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    padding: 6px;
    width: 32px;
    height: 32px;
    box-sizing: content-box;
}
.card-primary:hover {
    box-shadow: 0 8px 24px rgba(212, 0, 0, 0.36);
}
/* Secondary connect card — dark with subtle border. */
.card-secondary {
    background: var(--card-dark);
    border-color: var(--card-border);
}
.card-secondary .card-ico {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 6px;
    width: 32px;
    height: 32px;
    box-sizing: content-box;
    fill: var(--muted);
}
.card-secondary:hover {
    border-color: #3a3f47;
    background: #1f2126;
}

/* ---- Status bar ---- */
.status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--card-dark);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    font-size: 12px;
    color: var(--muted);
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted-2);
    flex: 0 0 auto;
}
.status-bar.online .status-dot   { background: var(--green); box-shadow: 0 0 6px rgba(74, 222, 128, 0.6); }
.status-bar.offline .status-dot  { background: var(--red); }
.status-bar.online .status-label { color: var(--fg); }
.status-label {
    color: inherit;
}
.status-meta {
    margin-left: auto;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
    color: var(--muted-2);
}

.machine-row {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--card-dark);
    border: 1px solid var(--card-border);
    border-radius: 10px;
}
.machine-id {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.machine-label {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--muted);
}
.machine-code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 18px;
    color: var(--fg);
    user-select: all;
}
.machine-row .secondary { padding: 6px 14px; }

/* "Create invite" — subtle dashed call-to-action under the status bar.
   Filled red on hover so it reads as primary intent without competing
   with the share/connect cards above it. */
.invite-btn {
    appearance: none;
    -webkit-appearance: none;
    margin-top: 12px;
    width: 100%;
    padding: 11px 14px;
    background: transparent;
    border: 1px dashed var(--card-border);
    color: var(--muted);
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    letter-spacing: 0.3px;
    transition: border-color 120ms, color 120ms, background 120ms;
}
.invite-btn:hover {
    border-style: solid;
    border-color: var(--red);
    color: var(--fg);
    background: rgba(212, 0, 0, 0.08);
}

/* Floating toast for short status messages ("invite copied to clipboard"
   etc). Positioned along the bottom centre of the viewport, slides up
   slightly on appear so the motion reads as "something happened". */
.toast {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: rgba(26, 28, 32, 0.96);
    color: var(--fg);
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid var(--card-border);
    font-size: 13px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index: 100;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Version stamp anchored to the bottom-left of the page. Sits behind UI
   so a stray click can't hit it; user-select disabled so it's not
   accidentally copied. */
.version-tag {
    position: fixed;
    bottom: 8px;
    left: 12px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--muted-2);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* ---- Generic panels (share / connect / active screens) ---- */
.panel {
    background: var(--card-dark);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 22px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.panel h2 {
    font-size: 18px;
    margin: 0 0 4px;
}
.panel p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.hidden { display: none; }

/* ---- Inputs / buttons ---- */
button {
    font: inherit;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 80ms, border-color 80ms;
}
button.primary {
    background: linear-gradient(135deg, var(--red-bright), var(--red));
    color: white;
}
button.primary:hover { filter: brightness(1.07); }
button.secondary {
    background: transparent;
    color: var(--fg);
    border-color: var(--card-border);
}
button.secondary:hover { background: #1f2126; }

input {
    font: inherit;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    background: #0f1014;
    color: var(--fg);
    text-transform: lowercase;
    font-family: ui-monospace, Consolas, monospace;
}

#name,
#email,
#organization {
    text-transform: none;
}

select {
    font: inherit;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    background: #0f1014;
    color: var(--fg);
}

.code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 22px;
    text-align: center;
    background: #0f1014;
    padding: 16px;
    border-radius: 8px;
    user-select: all;
    word-break: break-all;
}

.status {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}

.row {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #1f2126;
    border: 1px solid var(--card-border);
    color: var(--fg);
    border-radius: 8px;
    cursor: pointer;
}
.icon-btn:hover { background: #2a2d33; }
.icon-btn svg { fill: currentColor; stroke: currentColor; }
.icon-btn[aria-pressed="false"]              { color: #c8c8c8; }
.icon-btn[aria-pressed="false"] #mic-slash   { stroke: #f08080; }
.icon-btn[aria-pressed="true"]               { color: #c8f0d4; background: #1f5631; border-color: #2c8a4a; }
.icon-btn[aria-pressed="true"]  #mic-slash   { display: none; }

#active-controls { justify-content: space-between; flex: 0 0 auto; flex-wrap: nowrap; }
#active-controls button { white-space: nowrap; }

/* Active session panel fills the remaining vertical space inside main#root
   so the chat input form sticks to the bottom of the window and #chat-log
   grows/shrinks as the user resizes. */
#active {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
}
#active > h2, #active > p { flex: 0 0 auto; }
#chat-form { flex: 0 0 auto; }

#chat-log {
    background: #0f1014;
    border-radius: 8px;
    padding: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}
.chat-msg { padding: 4px 8px; border-radius: 6px; max-width: 90%; word-wrap: break-word; }
.chat-msg.me   { background: var(--red); align-self: flex-end; }
.chat-msg.them { background: #2a2d33; align-self: flex-start; }

#chat-input { flex: 1; letter-spacing: 0; text-transform: none; }

.bottom-center-img {
    /* Pins the image to the viewport */
    position: fixed;

    /* Aligns it to the very bottom */
    bottom: 5px;

    /* Moves the left edge of the image to the center of the screen */
    left: 50%;

    /* Shifts the image back to the left by exactly half of its own width */
    transform: translateX(-50%);
}

.bottom-right-link {
    /* Pin the wrapping anchor so the click target sits exactly on the image. */
    position: fixed;
    bottom: 5px;
    right: 5px;
    line-height: 0;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 120ms ease;
}
.bottom-right-link:hover { opacity: 1; }
.bottom-right-img {
    display: block;
}
.license-strip { margin-top: 10px; display:flex; flex-direction:column; gap: 6px; font-size: 12px; color: var(--muted); }
.license-links { display:flex; gap: 14px; align-items:center; }
.license-strip a { color: var(--link-red); }

/* ---- Licensing pages ---- */
.license-page label { display:block; margin: 10px 0 6px; color: var(--muted); font-size: 13px; }
.license-page select, .license-page input { width: 100%; }
.plan-grid { display: grid; gap: 8px; }
.plan-grid label { padding: 10px; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card-dark); color: var(--fg); }
.plan-grid input { width: auto; margin-right: 8px; }
.plan-grid small { display: block; margin-left: 24px; color: var(--muted); }
.member-row { display:flex; justify-content:space-between; align-items:center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--card-border); }
.member-row small { color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--card-border); margin: 16px 0; }
a { color: var(--link-red); }

/* Modal file-receive dialog. Shared by chat.html and menu.html. */
dialog.file-dialog {
    color: var(--fg);
    background: var(--card-dark);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 20px 24px;
    min-width: 360px;
    max-width: 90vw;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
dialog.file-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}
dialog.file-dialog h3 {
    margin: 0 0 8px;
    font-size: 16px;
}
dialog.file-dialog .file-name {
    color: var(--muted);
    margin: 0 0 14px;
    word-break: break-all;
    font-size: 13px;
}
dialog.file-dialog progress {
    width: 100%;
    height: 14px;
    accent-color: var(--green);
}
dialog.file-dialog .file-bytes {
    color: var(--muted);
    font-size: 12px;
    margin: 8px 0 16px;
}
dialog.file-dialog .row {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}


.hidden { display: none !important; }

.wait {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 13px;
}
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--card-border);
    border-top-color: var(--red-bright);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

button:disabled,
button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(45%);
    box-shadow: none !important;
    transform: none !important;
}
button:disabled:hover,
button[disabled]:hover {
    background: inherit;
    border-color: var(--card-border);
}