/* FSRAILWAY fallback setup */
@font-face {
    font-family: 'FSRAILWAY';
    src: local('Arial'); /* Placeholder until actual font is loaded if needed, falling back to safe fonts */
}

:root {
    --primary-red: #f74843;
    --hover-red: #eb4440;
    --active-red: #d93f3b;
    --disabled-btn: #f2f2f3;
    --disabled-text: #c3c3c4;
    --dark-text: #27344b;
    --gray-text: #505f79;
    --bg-light: #f1f3f8;
    --white: #ffffff;
    --btn-hover-red: #ffebee;

    --font-inter: "Inter", sans-serif;
    --font-display: "Inter", sans-serif;
    --font-fsrailway: "FSRAILWAY", Arial, sans-serif;

    --gap-blocks: 8rem;
}

@media (width >= 40rem) {
    :root {
        --gap-blocks: 7rem;
    }
}

@media (width >= 64rem) {
    :root {
        --gap-blocks: 6rem;
    }
}

*,
::after,
::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0 solid;
}

body {
    font-family: var(--font-inter);
    background-color: var(--bg-light);
    color: var(--dark-text);
    min-height: 100vh;
    font-size: 16px;
}

.text-red {
    color: var(--primary-red);
}

.blue-link {
    color: #3b82f6; /* Blue matching the screenshot */
    text-decoration: none;
}

.blue-link:hover {
    text-decoration: underline;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hidden {
    display: none;
}

:focus-visible {
    outline: 2px solid var(--primary-red);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--primary-red);
    color: var(--white);
    padding: 0.5rem 1rem;
    z-index: 2000;
    transition: top 0.2s;
    text-decoration: none;
    font-weight: 500;
    border-bottom-right-radius: 0.25rem;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--white);
    outline-offset: -2px;
}

/* LAYOUT */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (width >= 48rem) {
    .container {
        padding: 0 1.5rem;
    }
}

@media (width >= 64rem) {
    .container {
        max-width: calc(1120px + 4rem);
        padding: 0 2rem;
    }
}

/* HEADER */
.rzd-header {
    padding-top: 1.5rem;
}

.rzd-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-logo-img {
    height: 3rem;
    width: auto;
    max-width: 100%;
}

.btn-help {
    display: none;
    width: 3rem;
    height: 3rem;
    background-color: var(--white);
    border-radius: 50%;
    color: var(--gray-text);
    font-weight: 700;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease,
    box-shadow 0.2s ease;
}

.btn-help:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

@media (width >= 40rem) {
    .btn-help {
        display: block;
    }
}

/* MAIN */
.hero-section {
    margin-top: 4rem;
    position: relative;
}

@media (width >= 64rem) {
    .hero-section {
        display: flex;
        justify-content: space-between;
        /*align-items: flex-end;*/
        padding-top: 24rem;
    }
}

.hero-text-block {
}

@media (width >= 64rem) {
    .hero-text-block {
        width: 45%;
        padding-top: 10rem;
        /*padding-bottom: 3rem;*/
    }
}

.hero-title {
    color: var(--dark-text);
    font-size: 1.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 110%;
}

@media (width >= 40rem) {
    .hero-title {
        font-size: 2rem;
    }
}

@media (width >= 64rem) {
    .hero-title {
        font-size: 3.5rem;
    }
}

#bgimg {
}

@media (width >= 40rem) {
    #bgimg {
        max-width: 40rem;
        margin: 0 auto;
    }
}

@media (width >= 64rem) {
    #bgimg {
        position: absolute;
        top: 0;
        z-index: -1;
        max-width: none;
    }
}

#bgimg img {
    width: 100%;
}

@media (width >= 64rem) {
    #bgimg img {
        width: calc(100% / 6 * 5);
    }
}

/* RESTORE */
.restore-prompt {
    display: none; /* Hidden by default to prevent flash */
    background-color: #fff;
    border: 1px solid #ddd;
    border-left: 0.25rem solid var(--primary-red);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    animation: slideDown 0.3s ease-out;
}

.restore-prompt:not(.hidden) {
    display: flex;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.restore-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--dark-text);
}

.restore-icon {
    font-size: 1.2rem;
}

.restore-content .mono {
    color: var(--gray-text);
}

.restore-time {
    color: var(--gray-text);
    font-size: 0.875rem;
    margin-left: 0.25rem;
}

.restore-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-text {
    background: none;
    border: none;
    color: var(--primary-red);
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: background 0.2s;
}

.btn-text:hover {
    background-color: var(--btn-hover-red);
}

.btn-icon-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
    transition: color 0.2s;
}

.btn-icon-close:hover {
    color: var(--primary-red);
}

/* WIDGET */

.new-widget-card {
    /*width: 100%;*/
    /*max-width: 600px;*/
    background-color: var(--white);
    border-radius: 2.5rem;
    padding: 2rem 1.5rem;
    margin-top: 1rem;
}

@media (width >= 64rem) {
    .new-widget-card {
        padding: 2.5rem;
        box-shadow: 0 8px 32px rgba(39, 52, 75, 0.08);
        margin-top: 0;
    }
}

/* TODO: check flex */
.new-widget-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/*.form-group{*/
/*    margin-bottom: 1.25rem;*/
/*}*/

.file-upload-zone {
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    position: relative;
    transition: background-color 0.2s,
    border-color 0.2s;
    box-sizing: border-box;
    text-align: center;
}

@media (width >= 64rem) {
    .file-upload-zone {
        gap: 1.5rem;
        border: 1px dashed rgba(39, 52, 75, 0.24);
        height: 420px;
        padding: 2rem;
        cursor: pointer;
    }
}

.file-upload-zone:hover,
.file-upload-zone.dragover,
.file-upload-zone:has(input:focus-visible) {
    background: rgba(39, 52, 75, 0.02);
    border-color: var(--primary-red);
}

.file-upload-zone:has(input:focus-visible) {
    outline: 2px solid var(--primary-red);
    outline-offset: 2px;
}

.file-upload-text-group {
    display: none;
    font-family: var(--font-display);
}

@media (width >= 64rem) {
    .file-upload-text-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
}

.widget-title {
    color: var(--dark-text);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 120%;
}

.widget-subtitle {
    font-weight: 500;
    color: var(--gray-text);
}

/* TODO: hide input */
.file-input-hidden {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.file-input-hidden:focus-visible {
    outline: none;
}

.btn-primary-upload {
    padding: 1rem 1.5rem;
    background: var(--primary-red);
    border-radius: 1rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 120%;
    /*pointer-events: none; !* Let clicks pass to input *!*/
    transition: background-color 0.2s;
    width: 100%;
}

.file-upload-zone:hover .btn-primary-upload {
    background: var(--hover-red);
}

@media (width >= 64rem) {
    .btn-primary-upload {
        width: auto;
    }
}

.file-upload-text-mobile {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 140%;
    color: var(--gray-text);
}

@media (width >= 64rem) {
    .file-upload-text-mobile {
        display: none;
    }
}

/* PREVIEW */
.preview-box {
    margin-top: 1rem;
    padding: 1rem;
    /* TODO: variable*/
    background-color: #fafafa;
    /* TODO: variable */
    border: 1px dashed #ccc;
    border-radius: 1rem;
}

.status-row-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.preview-file {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--dark-text);
    font-size: 0.875rem;
    overflow: hidden;
    max-width: calc(100% - 30px);
}

.preview-file-and-size {
    min-width: 0;
    overflow: hidden;
}

#previewFilename {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-file-size {
    color: var(--gray-text);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.btn-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid var(--gray-text);
    color: var(--gray-text);
    padding: 0.5rem 0.7rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: #f0f0f0;
    color: var(--dark-text);
    border-color: var(--dark-text);
}

.btn-icon:active {
    background: #e0e0e0;
}

.btn-icon:disabled {
    background-color: #e0e0e0;
    color: var(--gray-text);
    border-color: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-icon svg {
    width: 16px;
    height: 16px;
}

.btn-icon-clear {
    padding: 4px;
    height: auto;
    flex-shrink: 0;
    margin-left: auto;
}

.preview-file-player {
    width: 100%;
}

/* FORM */
.form-group {
    margin-bottom: 1rem;
}

.new-input,
.new-textarea,
.new-select {
    width: 100%;
    padding: 1rem;
    /*background: rgba(39, 52, 75, 0.04);*/
    border: 1px solid color-mix(in srgb, var(--dark-text), transparent 75%);
    border-radius: 1rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 130%;
    color: var(--dark-text);
    transition: border-color 0.2s;
}

.new-textarea {
    resize: vertical;
    min-height: 112px;
}

.new-input:focus,
.new-textarea:focus,
.new-select:focus {
    outline: none;
    border-color: var(--primary-red);
    background: var(--white);
}

.new-input::placeholder,
.new-textarea::placeholder {
    color: color-mix(in srgb, var(--dark-text), transparent);
}

/* Custom Checkbox */
.checkbox-group > div:not(:last-child) {
    margin-bottom: 1rem;
}

.new-checkbox-group {
    display: flex;
    /*align-items: st;*/
    gap: 0.5rem;
}

.new-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--dark-text), transparent 75%);
    border-radius: 0.25rem;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.new-checkbox:checked {
    background: var(--primary-red);
    border-color: var(--primary-red);
}

.new-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.new-checkbox-label {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    color: var(--dark-text);
    cursor: pointer;
    line-height: 140%;
}

/* SELECT */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}

.custom-select-trigger {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    background: rgba(39, 52, 75, 0.04);
    border: 1px solid rgba(39, 52, 75, 0.24);
    border-radius: 16px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 18px;
    color: var(--dark-text);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.custom-select-trigger span {
    color: color-mix(in srgb, var(--dark-text), transparent);
}

.custom-select-trigger.has-value span {
    color: var(--dark-text);
}

.custom-select-arrow {
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

.custom-select-trigger.open .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid rgba(39, 52, 75, 0.24);
    /* Rounded corners as requested */
    border-radius: 16px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    max-height: 250px;
    overflow-y: auto;
    transition: opacity 0.2s, visibility 0.2s;
}

.custom-select-wrapper.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.custom-option {
    padding: 12px 18px;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--dark-text);
    cursor: pointer;
    transition: background-color 0.2s;
}

.custom-option:hover, .custom-option.selected {
    background-color: rgba(39, 52, 75, 0.04);
}

.custom-option.placeholder {
    display: none;
}

/* Customize scrollbar for options */
.custom-options::-webkit-scrollbar {
    width: 6px;
}

.custom-options::-webkit-scrollbar-track {
    background: transparent;
}

.custom-options::-webkit-scrollbar-thumb {
    background: rgba(39, 52, 75, 0.2);
    border-radius: 3px;
}

.custom-options::-webkit-scrollbar-thumb:hover {
    background: rgba(39, 52, 75, 0.4);
}

.docTypeHint {
    font-size: 0.875rem;
    color: var(--gray-text);
    margin-top: 0.5rem;
}

#promptInput {
    resize: none;
    overflow-y: hidden;
    min-height: 5rem;
    transition: height 0.1s ease-out;
}

.form-helper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--gray-text);
}

.prompt-input-hint {
    opacity: 0.7;
}

/* MAIN BUTTON */
.btn-primary-action {
    background: var(--disabled-btn);
    color: var(--disabled-text);
    border: none;
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
    cursor: not-allowed;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-primary-action:not(:disabled) {
    background: var(--primary-red);
    color: var(--white);
    cursor: pointer;
}

.btn-primary-action:not(:disabled):hover {
    background: var(--hover-red);
}

.btn-primary-action:not(:disabled):active {
    background: var(--active-red);
}


/* PROGRESS */
.upload-progress-container {
    position: relative;
    width: 100%;
    height: 56px; /* Match submit button height */
    background: #f2f4f8; /* Light gray-blue background from screenshot */
    border-radius: 16px; /* Match input border radius */
    margin-top: 10px;
    overflow: hidden; /* For progress fill */
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
}

.upload-progress-container.hidden {
    display: none !important;
}

.upload-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: #dce2f0; /* Slightly darker shade for filled area */
    transition: width 0.1s linear;
    z-index: 1;
}

.upload-progress-content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 20px;
    height: 100%;
}

.upload-progress-left {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}

.upload-progress-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.upload-progress-icon svg {
    width: 24px;
    height: 24px;
}

.upload-progress-filename {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 16px;
    color: var(--dark-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px; /* Prevent filename from squishing progress text on smaller screens */
}

.upload-progress-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.upload-progress-text {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 16px;
    color: var(--dark-text);
    white-space: nowrap;
}

.btn-icon-cancel {
    background: transparent;
    border: none;
    color: var(--dark-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s,
    color 0.2s;
}

.btn-icon-cancel:hover {
    background-color: rgba(39, 52, 75, 0.1);
}

.btn-icon-cancel svg {
    width: 16px;
    height: 16px;
}

/* NO AUDIO */
.no-audio-content {
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.no-audio-content .file-upload-text-group{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.no-audio-icon {
    margin: 0 auto 1rem;
    display: block;
}

.no-audio-title {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.no-audio-text {
    color: var(--gray-text);
    line-height: 1.5;
}

.no-audio-btn {
    margin-top: 2rem;
    display: inline-flex;
}

.top-upload-btn-container {
    margin-top: 1rem;
    width: 100%;
}

.top-upload-btn {
    font-weight: 600;
    padding: 1rem;
    width: 100%;
}


/* STATUS */
.status-area{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.status-area.hidden{
    display: none !important;
}

.status-row {
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
    gap: 1rem;
}

.id-container{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#taskIdDisplay{
    color: var(--gray-text);
}

.id-container .btn-icon{
    padding: 0.25rem;
}

/* Palette: Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 1rem;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.status-badge.status-pending {
    background-color: #f5f5f5;
    color: var(--gray-text);
}

.status-badge.status-processing {
    background-color: #fff3e0;
    color: #ed6c02;
    border: 1px solid #ffe0b2;
}

.status-badge.status-processing::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: currentColor;
    animation: status-pulse 1.5s infinite;
}

@keyframes status-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.status-badge.status-success {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.status-badge.status-error {
    background-color: #ffebee;
    color: var(--primary-red);
    border: 1px solid #ffcdd2;
}

/* Loader */
.loader {
    height: 6px;
    width: 100%;
    background-color: #e0e0e0;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
    border-radius: 3px;
}

.loader::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 30%;
    background-color: var(--primary-red);
    animation: slide 2s infinite ease-in-out;
    /* ⚡ Bolt: Use transform instead of left to prevent layout thrashing */
    will-change: transform;
}

@keyframes slide {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(333.333%);
    }
}




/* RESULT AREA */
#resultArea{
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /*align-items: center;*/
}

#resultArea.hidden{
    display: none !important;
}

.result-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.right-aligned-header{
    display: flex;
    flex-direction: column;
   gap: 0.5rem;
    border-bottom: 2px solid var(--primary-red);
    padding-bottom: 0.5rem;
    justify-content: space-between;
}

@media(width >= 64rem){
    .right-aligned-header{
        display: grid;
        grid-template-columns: 1fr auto 1fr;
         gap: 1.25rem;
    }
}

.right-aligned-header .result-title {
    grid-column: 2;
    justify-self: center;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none; /* override default h3 border */
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--dark-text);
}

.action-buttons-group{
    grid-column: 3;
    justify-self: end;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-design {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--white);
    border: 1px solid rgba(39, 52, 75, 0.24);
    color: var(--gray-text);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1rem;
    transition: all 0.2s;
    line-height: 1;
}

.btn-design svg {
    width: 1rem;
    height: 1rem;
    color: var(--gray-text);
}

.btn-design:hover {
    background: rgba(39, 52, 75, 0.04);
    border-color: var(--dark-text);
    color: var(--dark-text);
}

.btn-design:hover svg {
    color: var(--dark-text);
}

.btn-design.success {
    border-color: #2e7d32;
    color: #2e7d32;
    background-color: #e8f5e9;
}
.btn-design.success svg {
    color: #2e7d32;
}

.action-buttons-group .btn-design {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(39, 52, 75, 0.24);
    background: #fff;
    color: var(--dark-text);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
}
.action-buttons-group .btn-design svg {
    stroke-width: 1.5;
    color: var(--dark-text);
}

.action-buttons-group .btn-design:hover {
    border-color: var(--dark-text);
    background: rgba(39, 52, 75, 0.04);
}

#transcriptionResult,
#summaryResult,
.result-box {
    width: 100%;
    min-height: 12rem;
    border: 1px solid #ddd;
    background: #fafafa;
    padding: 1rem;
    font-family: inherit;
    line-height: 1.6;
    box-sizing: border-box; /* Ensure padding doesn't overflow width */
}

/* Better typography for markdown results in summary */
.result-box h1, .result-box h2, .result-box h3, .result-box h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--dark-text);
    font-family: inherit;
    border-bottom: none;
    padding-bottom: 0;
    text-transform: none;
    display: block;
}

.result-box h1:first-child, .result-box h2:first-child, .result-box h3:first-child, .result-box h4:first-child {
    margin-top: 0;
}

.result-box h1 { font-size: 1.4rem; border-bottom: 1px solid #eee; padding-bottom: 0.3rem; text-align: center; }
.result-box h2 { font-size: 1.25rem; text-align: center; }
.result-box h3 { font-size: 1.1rem; }
.result-box h4 { font-size: 1rem; }

.result-box p {
    margin-top: 0;
    margin-bottom: 1rem;
    white-space: pre-line; /* Respect newlines within paragraphs */
}
.result-box p:last-child {
    margin-bottom: 0;
}

.result-box ul, .result-box ol {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}
.result-box li {
    margin-bottom: 0.3rem;
}
.result-box strong {
    font-weight: 700;
    color: #000;
}
.result-box li strong::before {
    /* Force strong elements inside list items to start on a new line visually */
    content: "\A";
    white-space: pre;
}

.result-box blockquote {
    border-left: 4px solid var(--primary-red);
    margin: 1rem 0;
    padding-left: 1rem;
    color: var(--gray-text);
    background: #f9f9f9;
    padding: 0.6rem 1rem;
}

.summary-error-box {
    color: #d32f2f;
    margin-top: 1rem;
    padding: 1rem;
    background: #ffebee;
    border: 1px solid #ffcdd2;
    text-align: center;
}

.hr-separator {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid #eee;
}



/* BENEFITS */
.benefits-section {
    /*margin-top: var(--gap-blocks);*/
    margin-top: 4rem;
}

.benefits-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1rem;
    margin: 0 -1rem;
    padding: 0 1rem 3rem;
    overflow-y: hidden;
}


@media (width >= 48rem) {
    .benefits-row {
        margin: 0 -1.5rem;
        padding: 0 1.5rem 3rem;
    }
}

@media (width >= 64rem) {
    .benefits-row {
        margin: 0 -2rem;
        padding: 0 2rem 3rem;
        flex-wrap: wrap;
        gap: 3rem;
    }
}


.benefit-card {
    background-color: var(--white);
    padding: 1.5rem 2rem 8rem;
    flex-direction: column;
    border-radius: 2.5rem;
    max-width: 90%;
    position: relative;
    flex: none;
}

@media (width >= 64rem) {
    .benefit-card {
        max-width: 100%;
        padding: 2.5rem;
    }

    .benefit-card-large {
        flex: 1 1 0;
    }

    .benefit-card-small {
        width: 480px;
    }
}

.benefit-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (width >= 64rem) {
    .benefit-content {
        gap: 1rem;
    }
}

.benefit-title {
    color: var(--dark-text);
    font-weight: 700;
    font-family: var(--font-display);
    font-size: 1.125rem;
    line-height: 120%;
}

@media (width >= 40rem) {
    .benefit-title {
        /* TODO: check */
        font-size: 1.5rem;
    }
}

.benefit-desc {
    color: var(--gray-text);
    font-size: 0.875rem;
    line-height: 160%;
}

@media (width >= 40rem) {
    .benefit-desc {
        font-size: 1rem;
        padding-right: 8rem;
    }
}

.benefit-desc ul {
    padding-left: 1rem;
}

.benefit-img {
    position: absolute;
    right: 1rem;
    bottom: -2.5rem;
    z-index: 10;
    max-height: 9rem;
}

@media (width >= 40rem) {
    .benefit-img {
        bottom: -1.2rem;
    }
}

.benefit-img-def {
    transform: rotate(9deg);
}

.benefit-img-anl {
    transform: rotate(10deg);
}


/* FAQ */
#faq-section {
    margin-top: var(--gap-blocks);
}

.faq-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 110%;
    color: var(--dark-text);
    margin-bottom: 1rem;
}

@media (width >= 40rem) {
    .faq-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
}

@media (width >= 48rem) {
    .faq-title {
        font-size: 3rem;
    }
}

@media (width >= 64rem) {
    .faq-title {
        font-size: 3.5rem;
        margin-bottom: 3rem;
    }
}


@media (width >= 48rem) {
    .faq-container {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 40px;
    }
}

.faq-items {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-button {
    background-color: var(--white);
    border-radius: 2.5rem;
    padding: 2.5rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.2s;

    font-family: var(--font-display);
    font-size: 1rem;

}

.faq-button:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.faq-question {
    font-weight: 700;
    line-height: 120%;
    color: var(--dark-text);
    flex: 1;
    font-size: 1.125rem;
}

@media (width >= 32rem) {
    .faq-question {
        font-size: 1.2rem;
    }
}

@media (width >= 48rem) {
    .faq-question {
        font-size: 1.4rem;
    }
}

@media (width >= 64rem) {
    .faq-question {
        font-size: 1.5rem;
    }
}


.faq-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-button[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
}

.faq-content {
    font-weight: 400;
    line-height: 160%;
    color: var(--gray-text);
    display: none;
    max-width: 503px;
    animation: fadeIn 0.3s ease-in-out;
}

.faq-button[aria-expanded="true"] .faq-content {
    display: block;
}

.faq-image {
    display: none;
    flex: 1;
    justify-content: center;
    align-items: center;
}

@media (width >= 48rem) {
    .faq-image {
        display: flex;
        max-width: 25%;
    }
}


/* FOOTER */
.rzd-footer {
    padding-bottom: 2.5rem;
    margin-top: var(--gap-blocks);
}

.rzd-footer .footer-content {
    background-color: var(--dark-text);
    color: var(--white);
    padding: 2rem 1.5rem;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (width >= 48rem) {
    .rzd-footer .footer-content {
        padding: 3rem;
        border-radius: 2.5rem;
    }
}

@media (width >= 64rem) {
    .rzd-footer .footer-content {
        padding: 4rem;
    }
}

/* TOP FOOTER */

.footer-top {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    justify-content: space-between;
}

@media (width >= 48rem) {
    .footer-top {
        flex-direction: row;
        gap: 2rem;
    }
}

.footer-top .right-block {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    justify-content: space-between;
}

@media (width >= 64rem) {
    .footer-top .right-block {
        flex-direction: row;
        width: 50%;
    }

    .footer-top .right-block > div {
        width: 50%;
    }
}

.footer-top .left-block {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.125rem;
    color: var(--white);
    margin-bottom: 1rem;
}

.contact-block {
    font-size: 0.875rem;
    font-weight: 400;
}

.contact-block:not(:last-child) {
    margin-bottom: 1rem;
}

.contact-subtitle {
    margin-bottom: 0.5rem;
    font-weight: 400;
    opacity: 0.5;
}

.contact-link {
    color: var(--white);
    text-decoration: none;
    transition: opacity 0.2s;
}

.contact-link:hover {
    opacity: 0.8;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.social-link {
    text-decoration: none;
    line-height: 100%;
}

.social-circle {
    width: 3rem;
    height: 3rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-circle img {
    width: 1.75rem;
    height: 1.75rem;
}

/* BOTTOM FOOTER */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
}

@media (width >= 48rem) {
    .footer-bottom {
        flex-direction: row;
        gap: 2.5rem;
    }
}

.footer-bottom a {
    color: var(--white);
    opacity: 0.5;
    font-weight: 400;
    font-size: 0.875rem;
    text-decoration: underline;
    transition: 0.2s;
}

.footer-bottom a:hover {
    opacity: 1;
}

/* Restored Classes for JS Functionality */

.d-none {
  display: none !important;
}

.d-none {
  display: none;
}

.transcript-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #eee;
  transition: background-color 0.2s;
  cursor: pointer;
  scroll-margin-top: 80px; /* Prevent being hidden behind sticky player */
  content-visibility: auto;
  contain-intrinsic-size: 0 80px; /* Estimate height to minimize scroll jumping */
}

@media (width >= 48rem) {
    .transcript-row{
        flex-direction: row;
    }
}

.transcript-row:hover {
  background-color: #f5f5f5;
}

.transcript-row:focus-visible {
  background-color: #ffebee;
  outline: 2px solid var(--primary-red);
  outline-offset: -2px;
}

.transcript-row.active {
  background-color: #ffebee; /* Light RZD red/pink */
  border-color: #ffcdd2;
  border-left: 4px solid var(--primary-red);
}

.speaker-popover {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  min-width: 180px;
  padding: 5px 0;
}

.toast {
  background: var(--white);
  border-left: 4px solid var(--gray-text);
  padding: 15px 20px;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  min-width: 300px;
  animation: slideIn 0.3s ease-out forwards;
  opacity: 0;
  position: relative; /* Palette: For progress bar positioning */
  overflow: hidden; /* Palette: Clip progress bar */
}

/* Palette: Toast Progress Bar */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background-color: var(--toast-color, #ccc);
    transform-origin: left;
    animation: toast-progress 5s linear forwards;
}

.toast:hover .toast-progress {
  animation-play-state: paused;
}

@keyframes toast-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.toast.success {
  border-color: #2e7d32;
}

.toast.error {
  border-color: var(--primary-red);
}

.toast-message { margin-right: auto; }
.toast-close {
    background: none; border: none; font-size: 20px;
    cursor: pointer; padding: 0 0 0 10px; color: #999;
}
.toast-icon {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    to { opacity: 0; }
}

.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.active-hint {
  color: var(--primary-red);
  font-weight: 500;
  /* !important to override inline transform */
  transform: translateY(-50%) scale(1.05) !important;
}
/* Utility Classes for CSP compliance extracted from HTML */
.overflow-hidden-max {
  overflow: hidden;
  max-width: calc(100% - 30px);
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.inline-block-max {
    display: inline-block;
    vertical-align: bottom;
    max-width: calc(100% - 50px);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


/* Transcription Layout Restored Classes */

.rich-transcript {
  width: 100%;
  min-height: 200px;
  border: 1px solid #ddd;
  background: #fafafa;
  box-sizing: border-box;
  max-height: 600px;
  overflow-y: auto;
  border-radius: 4px;
  padding: 0;
}

@media(width >= 48rem){
    .rich-transcript{
          padding: 15px;
    }
}

.transcript-meta {
  min-width: 120px;
  font-size: 0.85rem;
  color: var(--gray-text);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.transcript-time {
  font-family: monospace;
  color: #888;
}

.transcript-speaker {
  font-weight: 700;
  color: var(--dark-text);
  cursor: pointer; /* Palette: Make speaker clickable */
  border-bottom: 1px dashed transparent;
  transition:
    color 0.2s,
    border-color 0.2s;
  display: inline-block;
  align-self: flex-start;
}

.transcript-speaker:hover {
  color: var(--primary-red);
  border-bottom-color: var(--primary-red);
}

.transcript-text {
  flex: 1;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
}

.speaker-editor {
  background: #fafafa;
  border: 1px solid #eee;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.speaker-editor h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1rem;
  color: var(--gray-text);
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
  display: block;
  text-transform: uppercase;
}

.speaker-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.speaker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}
/* Active word highlighting */
.transcript-word {
    display: inline;
    cursor: pointer;
    transition: background-color 0.1s ease, font-weight 0.1s ease;
}

.transcript-word:hover {
    background-color: var(--bg-light);
    border-radius: 4px;
}

.transcript-word.active-word {
    font-weight: bold;
    color: var(--primary-red);
}
/* Add specific styling to speaker input within the new-input constraints */
.speaker-input.new-input {
    padding: 0.5rem 1rem;
    font-size: 1rem;
}


/* Utility classes for mandatory email input */
.color-primary-red { color: var(--primary-red, #E21A1A) !important; }
.fs-12 { font-size: 12px; }
.fw-500 { font-weight: 500; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mt-4 { margin-top: 4px; }
.d-block { display: block !important; }

.logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

#submitBtnWrapper {
    cursor: not-allowed;
}

#submitBtnWrapper:has(#submitBtn:not(:disabled)) {
    cursor: default;
}

.w-100 { 
    width: 100%; 
}

#submitBtnWrapper #submitBtn {
    pointer-events: auto; /* Ensure button receives events */
}

#submitBtnWrapper #submitBtn:disabled {
    pointer-events: none; /* Let the wrapper handle the hover when disabled */
}

.upload-progress-text {
    font-variant-numeric: tabular-nums;
    min-width: 130px; /* Provides stable width for most file sizes up to 999.99 MB */
    text-align: right;
}

.restore-prompt {
    max-width: 100%;
    box-sizing: border-box;
}

.hero-widget-block {
    width: 100%;
}

@media(width >= 64rem){
    .hero-widget-block{
        max-width: 600px;;
    }
}

/* Cookie Banner Styles */
.cookie-banner {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 90%;
    background-color: var(--white);
    border-radius: 1.5rem;
    box-shadow: 0 8px 32px rgba(39, 52, 75, 0.15);
    z-index: 9999;
    padding: 1.5rem 2rem;
    border: 1px solid rgba(39, 52, 75, 0.08);
}

.cookie-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: nowrap;
}

.cookie-text {
    font-size: 0.95rem;
    color: var(--dark-text);
    line-height: 1.5;
    max-width: 500px;
}

.cookie-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cookie-btn-accept {
    padding: 0.75rem 1.5rem;
    background: var(--primary-red);
    border-radius: 1rem;
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.cookie-btn-accept:hover {
    background: var(--hover-red);
}

.cookie-btn-close {
    position: absolute;
    top: -12px;
    right: -12px;
    background-color: var(--white);
    border: 1px solid rgba(39, 52, 75, 0.1);
    color: var(--gray-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 50%;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(39, 52, 75, 0.1);
}

.cookie-btn-close svg {
    width: 14px;
    height: 14px;
}

.cookie-btn-close:hover {
    background-color: var(--white);
    color: var(--primary-red);
    border-color: var(--primary-red);
    transform: scale(1.05);
}

@media (max-width: 48rem) {
    .cookie-banner {
        bottom: 1rem;
        padding: 1.25rem 1.5rem;
        width: calc(100% - 2rem);
    }
    .cookie-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }
    .cookie-actions {
        width: 100%;
        justify-content: flex-end;
    }
}