/* public/app/css/dash-compose.css
 * Synopsis: Coque zone de dictée.
 * Objectif: Dock chars / égaliseur / RESET.
 */

.dash .dash-compose {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: clamp(10rem, 28vh, 17rem);
    min-width: 0;
    position: relative;
}

.dash .dash-compose #ws-input {
    background: var(--dash-input-bg);
    border: 1px solid var(--dash-line);
    border-radius: var(--dash-radius);
    box-shadow: inset 0 0 0 1px rgba(93, 255, 194, .04);
    color: var(--dash-text);
    flex: 1 1 auto;
    font-size: clamp(1.15rem, 1.65vw, 1.4rem);
    line-height: 1.5;
    margin: 0;
    max-width: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4.6rem 7.6rem 3.85rem 1.05rem;
    resize: none;
    width: 100%;
}

.dash .dash-compose #ws-input::placeholder {
    color: var(--dash-muted);
}

.dash .dash-compose #ws-input:focus {
    border-color: color-mix(in srgb, var(--dash-accent) 45%, transparent);
    box-shadow: 0 0 0 3px var(--dash-accent-dim);
    outline: none;
}

.dash .dash-compose__dock {
    align-items: stretch;
    bottom: .45rem;
    display: grid;
    gap: .4rem;
    grid-template-columns: auto minmax(3.5rem, 1fr) auto;
    left: .55rem;
    pointer-events: none;
    position: absolute;
    right: .55rem;
    z-index: 3;
}

.dash .dash-compose__dock .dash-chars,
.dash .dash-compose__dock .dash-compose__eq,
.dash .dash-compose__dock .dash-clock {
    pointer-events: auto;
}

.dash .dash-compose__dock .dash-chars {
    max-width: none;
}

.dash .dash-compose__eq {
    min-width: 0;
}