/* Device choices stay beside the call controls and leave the conversation visible. */
.call-view[data-role] .toolbar-media .device-settings-button { padding-inline: 9px; }
.call-view[data-role] .device-settings-button .icon { font-size: 14px; }
.call-view[data-role] .device-settings-button[aria-expanded="true"] { background: #e7eedf; color: #425e37; }
.call-device-settings {
    position: fixed; inset: auto; z-index: 35; width: min(340px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px); margin: 0; padding: 22px;
    overflow: auto; overscroll-behavior: contain; border: 1px solid #dce2d3; border-radius: 20px;
    background: #fcfcf6; color: var(--ink); box-shadow: 0 12px 42px #24392324;
}
.device-settings-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.device-settings-eyebrow { display: block; font: 500 9px/1.5 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: #738367; }
.call-device-settings h2 { margin: 7px 0 0; font: 400 29px/1.1 var(--serif); letter-spacing: -.025em; }
.call-device-settings .chat-icon-button { --chat-icon-size: 34px; margin: -7px -7px 0 0; border-radius: 50%; }
.call-device-settings > p { margin: 12px 0 20px; color: #6a7960; font: 12px/1.7 var(--sans); }
/* Long device names must shrink within the panel, rather than size its grid column. */
.device-settings-inputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.device-setting-field { min-width: 0; }
.device-setting-field label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 500 12px/1.4 var(--sans); }
.device-setting-field label > .icon { width: 15px; font-size: 12px; color: #7c8e6c; }
.device-setting-field label > span { margin-left: auto; font: 400 10px/1.4 var(--sans); color: #76816c; }
.device-setting-field select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #dce2d3; border-radius: 10px; background: #fffef9; color: #405739; font: 12px/1.5 var(--sans); text-overflow: ellipsis; }
.device-setting-field select:focus-visible { outline: 2px solid #82986e; outline-offset: 2px; }
.device-setting-field select:disabled { opacity: .6; }
.device-noise-reduction { padding: 14px; border: 1px solid #e1e6d8; border-radius: 14px; background: #f3f5ec; }
.device-noise-reduction[hidden] { display: none; }
.device-noise-heading { display: flex; align-items: center; gap: 10px; }
.device-noise-emblem { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 11px; background: #e6ebdc; color: #678159; font-size: 13px; }
.device-noise-heading > div { flex: 1; }
.device-noise-heading label { display: block; color: #405739; font: 500 12px/1.4 var(--sans); }
.device-noise-heading div > span { display: block; margin-top: 2px; color: #75836a; font: 10px/1.4 var(--sans); }
.device-noise-switch { display: flex; align-items: center; flex: 0 0 40px; height: 24px; padding: 3px; border: 0; border-radius: 20px; background: #cdd5c6; cursor: pointer; transition: background .18s ease; }
.device-noise-switch > span { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: #fffef9; box-shadow: 0 1px 3px #34452c26; transition: transform .18s ease; }
.device-noise-switch[aria-checked="true"] { background: #648052; }
.device-noise-switch[aria-checked="true"] > span { transform: translateX(16px); }
.device-noise-switch:disabled { cursor: default; opacity: .55; }
.device-noise-reduction p { margin: 11px 0 7px; color: #6a7960; font: 11px/1.6 var(--sans); }
.device-noise-reduction small { display: flex; align-items: center; gap: 5px; color: #839075; font: 9px/1.5 var(--sans); }
.device-noise-reduction small .fa-lock { font-size: 8px; }
@media (prefers-reduced-motion: reduce) { .device-noise-switch, .device-noise-switch > span { transition: none; } }
.call-device-settings > .device-settings-status { min-height: 32px; margin: 17px 0; font-size: 11px; }
.call-device-settings > .device-settings-status.is-error { color: #925d49; }
.call-device-settings footer { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid #e4e7db; }
.call-device-settings footer > span { flex: 1; font: 10px/1.7 var(--sans); color: #75836a; }
.call-device-settings footer > button { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 36px; padding: 6px 0 6px 8px; border: 0; background: transparent; color: #587149; font: 11px/1.4 var(--sans); }
.call-device-settings button:focus-visible { outline: 2px solid #82986e; outline-offset: 2px; }
@media (max-width: 620px) { .device-setting-field select { font-size: 16px; } }
@media (max-width: 480px) {
    .call-view[data-role="client"][data-device="face"] .call-toolbar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
    .call-view[data-role="client"][data-device="face"] .toolbar-media { grid-column: 1 / -1; grid-row: 1; }
    .call-view[data-role="client"][data-device="face"] .session-conversation { grid-column: 1; grid-row: 2; }
    .call-view[data-role="client"][data-device="face"] .toolbar-end { grid-column: 2; grid-row: 2; }
}