/* Shared joined choice control: same geometry as the DDScore segmented selector. */
.roger-choice-field { display: grid; justify-items: start; gap: 8px; margin-bottom: 12px; }
/* A multi-choice is its own control, not a row of action buttons (Mikko 26.10.): the video editor's segmented
   picker (video-creator.css .vc-segmented). One frame drawn once around the group, borderless options inside,
   the chosen option filled with the accent and a soft glow. Hover = the video editor's tag hover (lighter
   surface, brighter text, accent outline) and a small grow. */
.roger-choice-segment { display: inline-flex; flex-wrap: nowrap; gap: 2px; max-width: 100%; overflow-x: auto; vertical-align: middle;
    padding: 3px; border: 1px solid rgba(141, 120, 255, 0.16); border-radius: 5px; background: #0b0e1b; }
.roger-choice-option { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; flex: 0 0 auto; height: 32px;
    margin: 0; padding: 0 0.85rem; border: 0; border-radius: 3px; background: transparent; color: #a3abcc;
    font-size: 0.84rem; font-weight: 600; white-space: nowrap; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; }
.roger-choice-option:hover:not([aria-pressed="true"]):not([aria-selected="true"]):not(:disabled) { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(141, 120, 255, 0.5); color: #eceefe; }
.roger-choice-option[aria-pressed="true"]:hover, .roger-choice-option[aria-selected="true"]:hover { background: #8c6fff; }
.roger-choice-option:hover:not(:disabled) { transform: scale(1.04); position: relative; z-index: 1; }
.roger-choice-option[aria-pressed="true"], .roger-choice-option[aria-selected="true"] { background: #7c5cff; color: #fff; box-shadow: 0 4px 14px rgba(124, 92, 255, 0.42); }
.roger-choice-option:disabled { opacity: .5; cursor: not-allowed; }
.roger-choice-option:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.roger-dictation { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.roger-dictation small { color: var(--dialog-text-muted); font-size: .75rem; }
.roger-dictation .btn { min-height: 36px; }
.roger-dictation [hidden] { display: none !important; }
.roger-status-tag { display: inline-block; padding: 2px 6px; border: 1px solid var(--dialog-border); border-radius: 4px; color: var(--dialog-text-muted); font-size: .7rem; white-space: nowrap; }
/* Bootstrap status colours must not replace the application's dark shared surfaces. */
.alert.alert-warning, .alert.alert-danger, .alert.alert-info, .alert.alert-success,
.notification.Warning, .notification.Maintenance, .mobile-error-message {
    background: var(--dialog-surface-raised);
    color: var(--body-text);
    border: 1px solid var(--dialog-border-strong);
    border-left: 3px solid var(--trial-button-border);
    border-radius: 5px;
}
.alert.alert-danger { border-left-color: var(--error); }
.alert a { color: inherit; text-decoration: underline; }
/* Shared rich option layout, used by both an open list and its selected value. */
.roger-choice-picker { width: 100%; min-width: 0; height: auto; }
.roger-choice-picker .k-input-inner { min-width: 0; height: auto; white-space: normal; }
.roger-choice-popup .k-list-item { height: auto; align-items: flex-start; padding: .65rem .75rem; }
.roger-choice-popup .k-list-item-text { width: 100%; min-width: 0; }
.roger-choice-popup .k-list-item + .k-list-item { border-top: 1px solid var(--dialog-border); }
.roger-option-content { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; text-align: left; }
.roger-option-icon { width: 28px; height: 32px; object-fit: contain; flex: 0 0 28px; }
.roger-option-text { display: grid; gap: 3px; flex: 1; min-width: 0; }
.roger-option-title, .roger-option-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.roger-option-title { font-size: .9rem; font-weight: 600; }
.roger-option-description { font-size: .8rem; color: var(--dialog-text-muted); }
.roger-choice-popup .k-selected .roger-option-description { color: inherit; }
.btn.roger-icon-action { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn.roger-icon-action > .oi { top: 0; display: inline-block; line-height: 1; flex: 0 0 auto; }

/* Image editor choice groups (Image style / Image lighting / Camera position) are Telerik radio groups: the same
   video-editor segmented look as .roger-choice-segment above (Mikko 26.10.). IDs in app.css need !important here. */
.image-settings .k-radio-list.k-list-horizontal { display: inline-flex !important; flex-wrap: nowrap; gap: 2px !important; max-width: 100%;
    padding: 3px; border: 1px solid rgba(141, 120, 255, 0.16); border-radius: 5px; background: #0b0e1b; box-sizing: border-box; }
.image-settings .k-radio-list-item { height: 32px !important; margin: 0 !important; padding: 0 0.6rem !important; border: 0 !important;
    border-radius: 3px !important; background: transparent !important; color: #a3abcc !important; font-weight: 600;
    transform: none !important; box-shadow: none; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important; }
.image-settings .k-radio-list-item:hover { transform: scale(1.04) !important; position: relative; z-index: 1; }
.image-settings .k-radio-list-item .k-radio-label { color: inherit !important; font-size: 0.84rem; white-space: nowrap; cursor: pointer; }
.image-settings .k-radio-list-item:hover:not(.checked) { background: rgba(255, 255, 255, 0.06) !important; box-shadow: inset 0 0 0 1px rgba(141, 120, 255, 0.5); color: #eceefe !important; }
.image-settings .k-radio-list-item.checked:hover { background: #8c6fff !important; }
.image-settings .radio-style-combo:hover:not(.checked) { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(141, 120, 255, 0.5) !important; }
.image-settings .k-radio-list-item.checked { background: #7c5cff !important; color: #fff !important; font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(124, 92, 255, 0.42); }
/* "More" styles: the combo sits as the last segment of the style group. */
.image-settings .style-options-container { gap: 0; }
.image-settings .radio-style-combo { margin-left: 4px; height: 38px; border: 1px solid rgba(141, 120, 255, 0.16) !important; border-radius: 5px !important;
    background: #0b0e1b !important; transform: none !important; }
.image-settings .radio-style-combo.checked { background: #7c5cff !important; box-shadow: 0 4px 14px rgba(124, 92, 255, 0.42); }
.image-settings .radio-style-combo .button-style-combo.k-combobox { border: 0 !important; }