/* The box you type in, with its suggestions, reply context and poll form. */

.composer {
    position: relative;             /* the emoji picker hangs above it */
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0 var(--space-8) var(--space-8);
}

/* The icons and the text share one box, so it reads as one field. */
.composer-row {
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
}

.composer-row:focus-within {
    border-color: var(--color-accent);
}

.composer .poll-form .form-row {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    flex-wrap: wrap;
}

.composer textarea {
    flex: 1;
    resize: none;
    min-height: var(--control-size);
    max-height: 200px;
    font: inherit;
    color: var(--color-text);
    background: none;
    border: 0;
    outline: 0;
    padding: var(--space-3) var(--space-4);
}

.composer .context {
    font-size: var(--text-s);
    color: var(--color-text-muted);
}


.composer .attach input {
    display: none;
}

.suggest {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.suggest button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.poll-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    padding: var(--space-5);
}

/* What was pasted, held above the box until it is sent or let go. */
.pasted {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-l);
    font-size: var(--text-s);
}

.pasted-file {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    max-width: 100%;
}

.pasted-file img {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: var(--radius-m);
    flex: none;
}

.pasted-file .label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pasted-actions {
    display: inline-flex;
    gap: var(--space-4);
    margin-left: auto;
}

/* Files are being dragged over the room: it says where they will go. */
.room-main.dropping::after {
    content: "Drop to attach";
    position: absolute;
    inset: var(--space-5);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--color-accent);
    border-radius: var(--radius-l);
    background: color-mix(in srgb, var(--color-bg) 85%, transparent);
    color: var(--color-text);
    font-size: var(--text-l);
    font-weight: 600;
    pointer-events: none;
}