/* ---------- Page heading ---------- */

.page-head {
    margin-bottom: 1.25rem;
}

.page-head h1 {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.page-head p {
    max-width: 46rem;
    margin-top: 0.25rem;
    color: var(--text-muted);
}

/* ---------- Create / join ---------- */

.connect {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.connect-option {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
}

.connect-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
}

.connect-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius);
    background-color: var(--accent-soft);
    color: var(--accent);
}

.connect-text {
    flex: 1;
    color: var(--text-muted);
}

.connect-divider {
    position: relative;
    width: 1px;
    margin: 1.25rem 0;
    background-color: var(--border);
}

.connect-divider span {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0.25rem 0;
    transform: translate(-50%, -50%);
    background-color: var(--surface);
    color: var(--text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.join-row {
    display: flex;
    gap: 0.5rem;
    max-width: 26rem;
}

.code-input {
    font-family: var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.code-input::placeholder {
    letter-spacing: 0.12em;
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    margin-top: 1.5rem;
    padding: 0;
    list-style: none;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.steps li {
    display: flex;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 2px solid var(--border);
}

.steps strong {
    display: block;
    color: var(--text);
    font-weight: 600;
}

.step-no {
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.6;
}

.capacity-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    background-color: var(--warning-soft);
    color: var(--warning);
    font-size: 0.875rem;
}

.capacity-note ::deep .icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: 0.1875rem;
}

/* ---------- Queue ---------- */

.queue-position {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.queue-number {
    display: grid;
    place-items: center;
    min-width: 3.5rem;
    height: 3.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background-color: var(--surface-2);
    font-family: var(--mono);
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.queue-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.queue-text strong {
    font-weight: 600;
}

.queue-text .muted {
    font-size: 0.875rem;
}

/* ---------- Waiting for the peer ---------- */

.waiting {
    max-width: 44rem;
}

.waiting-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
}

.code-display {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
}

.code-chars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--mono);
    user-select: all;
}

.code-char {
    display: grid;
    place-items: center;
    width: 2.25rem;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background-color: var(--surface-2);
    font-size: 1.375rem;
    font-weight: 600;
}

.code-sep {
    padding: 0 0.25rem;
    color: var(--text-muted);
    font-size: 1.25rem;
}

.waiting-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.625rem;
}

.waiting-status .spinner {
    color: var(--accent);
}

.waiting-expiry {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.countdown {
    margin-top: -0.75rem;
}

.countdown .progress-bar {
    transition: width 1s linear;
}

.countdown.is-low .progress-bar {
    background-color: var(--warning);
}

/* ---------- Session status ---------- */

.session {
    margin-bottom: 1rem;
}

.session-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 2rem;
    padding: 0.875rem 1rem;
}

.session-state {
    min-width: 8.5rem;
    font-size: 1rem;
}

.session-facts {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 0.5rem 2.25rem;
}

.session-facts dt {
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.safety-code {
    font-weight: 600;
    letter-spacing: 0.03em;
}

.session-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background-color: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.session-hint ::deep .icon {
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
    color: var(--success);
}

.session-closed {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.session-closed .muted {
    font-size: 0.8125rem;
}

/* ---------- Workspace ---------- */

.workspace {
    display: grid;
    grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.workspace.is-closed {
    grid-template-columns: minmax(0, 1fr);
}

/* ---------- Send ---------- */

.send-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: 10rem;
    padding: 1.25rem 1rem;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius);
    background-color: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-align: center;
    transition: border-color 0.12s, background-color 0.12s;
}

.dropzone strong {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.dropzone.is-dragging {
    border-color: var(--accent);
    background-color: var(--accent-soft);
}

@media (hover: hover) {
    .dropzone:not(.is-busy):hover {
        border-color: var(--accent);
        background-color: var(--accent-soft);
    }
}

.dropzone:has(:focus-visible) {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.dropzone.is-busy {
    border-style: solid;
    border-color: var(--border);
    background-color: var(--surface-2);
}

.dropzone-browse {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dropzone ::deep .dropzone-icon {
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--accent);
    stroke-width: 1.75;
}

.dropzone-spinner {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.625rem;
    color: var(--accent);
}

/* The native file input covers the whole zone, so clicking and dropping both work without JavaScript. */
.dropzone ::deep .dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dropzone.is-busy ::deep .dropzone-input {
    cursor: progress;
}

.send-message {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.send-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.hint {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* ---------- Transfer log ---------- */

.log {
    display: flex;
    flex-direction: column;
    height: min(70vh, 40rem);
    min-height: 22rem;
    overflow: hidden;
}

.log-summary {
    display: flex;
    gap: 1rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.log-summary > span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.log-summary ::deep .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.log-scroll {
    display: flex;
    flex: 1;
    flex-direction: column-reverse;
    overflow-y: auto;
}

.log-entries {
    /* Keeps short logs at the top while column-reverse anchors the scroll position at the newest entry. */
    margin-bottom: auto;
    padding: 0;
    list-style: none;
}

.log-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    max-width: 22rem;
    margin: auto;
    padding: 2rem 1.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
}

.log-empty strong {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.log-empty ::deep .icon {
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.5rem;
    color: var(--border-strong);
    stroke-width: 1.5;
}

.entry {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto 5.5rem;
    grid-template-areas: "dir body meta action";
    align-items: start;
    gap: 0.25rem 1rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--border);
}

@media (hover: hover) {
    .entry:not(.entry-system):hover {
        background-color: var(--surface-2);
    }
}

.entry-dir {
    grid-area: dir;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius);
}

.entry-dir ::deep .icon {
    width: 1rem;
    height: 1rem;
}

.entry-out .entry-dir {
    background-color: var(--accent-soft);
    color: var(--accent);
}

.entry-in .entry-dir {
    background-color: var(--success-soft);
    color: var(--success);
}

.entry-body {
    grid-area: body;
    min-width: 0;
    padding-top: 0.1875rem;
}

.entry-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.entry-file ::deep .icon {
    width: 1rem;
    height: 1rem;
    color: var(--text-muted);
}

.entry-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entry-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.entry-progress {
    margin-top: 0.5rem;
}

.entry-error {
    margin-top: 0.125rem;
    color: var(--danger);
    font-size: 0.8125rem;
}

.entry-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 0.25rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--warning);
    border-radius: var(--radius);
    background-color: var(--warning-soft);
    color: var(--text);
    font-size: 0.8125rem;
}

.entry-warning ::deep .icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: 0.0625rem;
    color: var(--warning);
}

.entry-meta {
    grid-area: meta;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 0.3125rem;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.entry-size {
    min-width: 4.75rem;
    text-align: right;
}

.entry-time {
    min-width: 3.25rem;
    text-align: right;
}

.entry-action {
    grid-area: action;
    display: flex;
    justify-content: flex-end;
    padding-top: 0.125rem;
}

.entry-action .tag {
    margin-top: 0.0625rem;
}

.entry-system {
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    grid-template-areas: "dir body meta";
    background-color: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.875rem;
}

.entry-system.is-error {
    background-color: var(--danger-soft);
    color: var(--danger);
}

/* ---------- Small screens ---------- */

@media (max-width: 860px) {
    .workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .log {
        height: auto;
        min-height: 16rem;
        max-height: 70vh;
    }
}

@media (max-width: 720px) {
    .connect {
        grid-template-columns: minmax(0, 1fr);
    }

    .connect-option {
        padding: 1.25rem;
    }

    .connect-divider {
        width: auto;
        height: 1px;
        margin: 0 1.25rem;
    }

    .connect-divider span {
        padding: 0 0.5rem;
    }

    .join-row {
        max-width: none;
    }

    .steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .waiting-body {
        padding: 1.25rem 1rem;
    }

    .code-chars {
        gap: 0.1875rem;
    }

    .code-char {
        width: clamp(1.5rem, 6.8vw, 2.25rem);
        font-size: clamp(1rem, 4.6vw, 1.375rem);
    }

    .code-sep {
        padding: 0 0.125rem;
    }

    .waiting-expiry {
        margin-left: 0;
        flex-basis: 100%;
    }

    .session-main {
        gap: 0.75rem 1.5rem;
    }

    .session-facts {
        flex-basis: 100%;
        order: 1;
        gap: 0.5rem 1.5rem;
    }

    .session-closed {
        flex-basis: 100%;
        order: 1;
    }

    .session-state {
        flex: 1;
    }
}

@media (max-width: 560px) {
    .entry {
        grid-template-columns: 1.75rem minmax(0, 1fr) auto;
        grid-template-areas:
            "dir body action"
            "dir meta action";
        column-gap: 0.75rem;
        padding: 0.625rem 0.75rem;
    }

    .entry-system {
        grid-template-areas:
            "dir body"
            "dir meta";
        grid-template-columns: 1.75rem minmax(0, 1fr);
    }

    .entry-meta {
        justify-content: flex-start;
        gap: 0.75rem;
        padding-top: 0;
        font-size: 0.75rem;
    }

    .entry-size,
    .entry-time {
        min-width: 0;
        text-align: left;
    }

    .entry-size:empty {
        display: none;
    }

    .entry-action {
        align-self: center;
        padding-top: 0;
    }
}