:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bg: #06101d;
    --panel: rgba(13, 26, 45, 0.94);
    --panel-strong: #0d1b2e;
    --line: rgba(255, 255, 255, 0.11);
    --muted: #98aabe;
    --text: #f0f6ff;
    --accent: #5d96ff;
    --accent-strong: #397af2;
    --danger: #e45362;
    --success: #3bd192;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    background:
        radial-gradient(circle at 14% 0%, rgba(54, 113, 222, 0.28), transparent 34rem),
        radial-gradient(circle at 92% 15%, rgba(42, 184, 157, 0.12), transparent 26rem),
        var(--bg);
    color: var(--text);
}

button, input, textarea { font: inherit; }
button, label[for="fileInput"] { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.page-shell { min-height: 100vh; }
.login-view {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.brand-mark {
    position: fixed;
    top: 1.5rem;
    left: 1.5rem;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.9rem;
    background: linear-gradient(145deg, #78adff, #3273ed);
    color: white;
    font-weight: 900;
    box-shadow: 0 1rem 2rem rgba(31, 91, 207, 0.28);
}

.login-card {
    width: min(100%, 34rem);
    padding: clamp(1.5rem, 5vw, 3rem);
    border: 1px solid var(--line);
    border-radius: 1.75rem;
    background: var(--panel);
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(18px);
}

.eyebrow {
    margin: 0 0 0.45rem;
    color: #91baff;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
.login-card h1 { margin-bottom: 0.55rem; font-size: clamp(2.4rem, 8vw, 4.25rem); letter-spacing: -0.045em; }
.lead { margin-bottom: 1.6rem; color: #b8c7d9; line-height: 1.65; }

.notice {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 0.9rem;
    line-height: 1.5;
}
.notice-warning { border: 1px solid rgba(255, 190, 82, 0.35); background: rgba(255, 190, 82, 0.1); color: #ffe0a4; }
.notice a { color: inherit; font-weight: 800; }

.login-form { display: grid; gap: 1rem; }
.login-form label { display: grid; gap: 0.45rem; color: #dce8f8; font-weight: 750; }
input, textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.9rem;
    background: #081525;
    color: #fff;
}
input { padding: 0.9rem 1rem; }
textarea { min-height: 3.2rem; max-height: 10rem; resize: vertical; padding: 0.75rem 0.85rem; }
input:focus, textarea:focus, button:focus-visible, .file-button:focus-visible {
    outline: 3px solid rgba(91, 151, 255, 0.34);
    outline-offset: 2px;
    border-color: var(--accent);
}

.button {
    border: 0;
    border-radius: 0.9rem;
    padding: 0.9rem 1.1rem;
    font-weight: 850;
    cursor: pointer;
}
.button-primary { background: var(--accent-strong); color: white; }
.button-primary:hover:not(:disabled) { background: var(--accent); }
.button:disabled { cursor: not-allowed; opacity: 0.45; }
.form-error { margin: 0; color: #ff9ba6; line-height: 1.45; }
.privacy-note { margin: 1.25rem 0 0; color: var(--muted); font-size: 0.86rem; line-height: 1.55; }

.app-view { min-height: 100vh; padding: 1rem; }
.topbar {
    max-width: 1550px;
    margin: 0 auto 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0.4rem;
}
.topbar h1 { margin: 0; font-size: 1.45rem; }
.connection-summary { display: flex; align-items: center; gap: 0.55rem; color: #c8d5e5; font-size: 0.9rem; }
.status-dot { width: 0.68rem; height: 0.68rem; border-radius: 999px; background: #68778a; box-shadow: 0 0 0 0.28rem rgba(104, 119, 138, 0.15); }
.status-dot.connected { background: var(--success); box-shadow: 0 0 0 0.28rem rgba(59, 209, 146, 0.14); }
.status-dot.connecting { background: #ffbd59; box-shadow: 0 0 0 0.28rem rgba(255, 189, 89, 0.14); }
.status-dot.error { background: var(--danger); box-shadow: 0 0 0 0.28rem rgba(228, 83, 98, 0.14); }

.workspace {
    max-width: 1550px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(21rem, 0.72fr);
    gap: 1rem;
    min-height: calc(100vh - 6.5rem);
}
.video-panel, .chat-panel {
    border: 1px solid var(--line);
    border-radius: 1.35rem;
    background: var(--panel);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.24);
    overflow: hidden;
}
.video-panel { display: flex; flex-direction: column; padding: 0.85rem; }
.video-grid { position: relative; flex: 1; min-height: 28rem; }
.video-tile { position: relative; overflow: hidden; border-radius: 1rem; background: #02060d; }
.video-tile video { display: block; width: 100%; height: 100%; object-fit: cover; background: #02060d; }
.remote-tile { width: 100%; height: 100%; min-height: 28rem; }
.local-tile {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: min(28%, 17rem);
    aspect-ratio: 4 / 3;
    border: 2px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.48);
    z-index: 2;
}
.local-tile video { transform: scaleX(-1); }
.local-tile video.screen-preview { transform: none; object-fit: contain; }
.video-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.4rem;
    padding: 1.5rem;
    text-align: center;
    background: radial-gradient(circle, #182942, #050a11 72%);
    color: #c8d6e8;
}
.video-placeholder strong { color: #f3f7fc; font-size: 1.15rem; }
.video-placeholder.compact strong { font-size: 0.9rem; }
.video-label {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    gap: 0.55rem;
    align-items: center;
    padding: 0.4rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.6rem;
    background: rgba(2, 8, 16, 0.72);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 0.78rem;
}
.video-label span:last-child { color: #a9bbd0; }

.call-controls { display: flex; justify-content: center; gap: 0.65rem; flex-wrap: wrap; padding: 0.85rem 0 0.15rem; }
.control-button {
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    padding: 0.72rem 1rem;
    background: #17263a;
    color: #eaf3ff;
    font-weight: 750;
    cursor: pointer;
}
.control-button:hover { background: #20344d; }
.control-button.off { background: #3b2530; color: #ffc8ce; }
.control-button.sharing { border-color: rgba(75, 225, 158, 0.4); background: #176345; color: #ecfff7; }
.control-button.sharing:hover { background: #1d7854; }
.control-button:disabled { cursor: wait; opacity: 0.62; }
.control-button.danger { border-color: rgba(255, 97, 113, 0.32); background: #b53b49; color: #fff; }
.control-button.danger:hover { background: #cd4655; }
.inline-status { min-height: 1.3rem; margin: 0.45rem 0 0; text-align: center; color: var(--muted); font-size: 0.84rem; }

.chat-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; min-height: 0; }
.chat-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.chat-header h2 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.chat-header p { margin: 0; color: var(--muted); font-size: 0.78rem; }
.file-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.75rem;
    padding: 0.58rem 0.72rem;
    color: #dce9f8;
    background: #17273b;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}
.file-button:hover { background: #20344d; }
.file-button.disabled { pointer-events: none; opacity: 0.45; }

.messages {
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem;
    scrollbar-color: #31465e transparent;
}
.message {
    align-self: flex-start;
    max-width: 88%;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.95rem 0.95rem 0.95rem 0.3rem;
    padding: 0.68rem 0.8rem;
    background: #17263a;
    overflow-wrap: anywhere;
}
.message.mine { align-self: flex-end; border-radius: 0.95rem 0.95rem 0.3rem 0.95rem; background: #275fbd; }
.message.system { align-self: center; max-width: 95%; border: 0; background: transparent; color: var(--muted); font-size: 0.78rem; text-align: center; }
.message-meta { display: flex; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.28rem; color: #afc0d5; font-size: 0.67rem; }
.message.mine .message-meta { color: #d4e4ff; }
.message-body { margin: 0; white-space: pre-wrap; line-height: 1.45; font-size: 0.92rem; }
.file-message { display: grid; gap: 0.35rem; }
.file-message a { color: #fff; font-weight: 800; text-decoration-thickness: 0.08em; text-underline-offset: 0.14em; }
.file-message small { color: #bed0e5; }
.chat-image-link { display: block; overflow: hidden; border-radius: 0.72rem; background: rgba(0, 0, 0, 0.22); }
.chat-image-preview { display: block; width: min(100%, 24rem); max-height: 20rem; object-fit: contain; margin: 0 auto; }
.file-message.mine .chat-image-link { background: rgba(0, 0, 0, 0.18); }

.transfer-box { margin: 0 1rem 0.7rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: 0.85rem; background: #0a1727; }
.transfer-copy { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; color: #c8d6e7; font-size: 0.76rem; }
progress { width: 100%; height: 0.55rem; accent-color: var(--accent); }

.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.65rem; padding: 0.8rem 1rem; border-top: 1px solid var(--line); }
.chat-form .button { padding-inline: 0.9rem; }
.file-limit { margin: -0.2rem 1rem 0.8rem; color: var(--muted); font-size: 0.72rem; }

@media (max-width: 980px) {
    .workspace { grid-template-columns: 1fr; min-height: auto; }
    .video-panel { min-height: 62vh; }
    .chat-panel { min-height: 32rem; }
}

@media (max-width: 620px) {
    .app-view { padding: 0.5rem; }
    .topbar { padding-inline: 0.3rem; }
    .connection-summary { max-width: 50%; text-align: right; }
    .video-panel, .chat-panel { border-radius: 1rem; }
    .video-grid, .remote-tile { min-height: 23rem; }
    .local-tile { width: 38%; right: 0.6rem; bottom: 0.6rem; }
    .call-controls { gap: 0.45rem; }
    .control-button { padding: 0.65rem 0.78rem; font-size: 0.8rem; }
    .chat-header { align-items: flex-start; }
    .chat-form { grid-template-columns: 1fr; }
    .chat-form .button { width: 100%; }
}

.room-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}

.button-secondary {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #17273b;
    color: #e7f1ff;
}

.button-secondary:hover:not(:disabled) { background: #20344d; }
.room-hint { min-height: 1.25rem; margin: -0.2rem 0 0; color: #9fb8d5; font-size: 0.82rem; line-height: 1.45; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.85rem; }
.compact-button { padding: 0.58rem 0.78rem; border-radius: 0.75rem; font-size: 0.8rem; }

@media (max-width: 620px) {
    .room-actions { grid-template-columns: 1fr; }
    .topbar-actions { align-items: flex-end; flex-direction: column-reverse; gap: 0.45rem; }
    .compact-button { padding: 0.48rem 0.65rem; }
}