/* SPDX-FileCopyrightText: 2026 BizzAppDev Systems Pvt. Ltd. */
/* SPDX-License-Identifier: AGPL-3.0-or-later */

main {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.controls {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    align-items: center;
    position: relative;
}

.controls .language-select {
    flex: 1;
    min-width: 200px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.controls .language-select label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #e0e0e0;
    font-size: 0.9rem;
}

.controls .language-select select,
.language-select select {
    width: 100%;
    padding: 10px 16px;
    border: 2px solid rgba(255, 122, 24, 0.3);
    border-radius: 8px;
    font-size: 1rem;
    background: rgba(22, 33, 62, 0.8);
    color: white;
    cursor: pointer;
    transition: border-color 0.2s;
    height: 42px;
}

.controls .language-select select:focus,
.language-select select:focus {
    outline: none;
    border-color: var(--poly-primary);
}

.controls .language-select-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex: 1;
    height: 46px;
}

.controls .language-select-wrapper .settings-toggle {
    display: none;
}

.controls .language-select-wrapper .settings-toggle:hover {
    transform: none;
}

.controls .btn-swap {
    flex: 0 0 50px;
    padding: 12px;
    min-width: 50px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-top: 24px;
}

.controls .microphone-select {
    flex: 1;
    min-width: 200px;
    max-width: 100%;
}

.recording-controls {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.controls .language-select,
.controls [name="microphone"] {
    flex: 1;
    min-width: 200px;
}

.external-audio {
    margin-bottom: 25px;
}

.url-input-group {
    display: flex;
    gap: 10px;
}

.url-input-group input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.url-input-group input:focus {
    outline: none;
    border-color: #667eea;
}

.btn-url {
    background: #667eea;
    color: white;
}

.btn-url:hover:not(:disabled) {
    background: #5568d3;
}

.language-select label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #e0e0e0;
}

.language-select select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(255, 122, 24, 0.3);
    border-radius: 8px;
    font-size: 1rem;
    background: rgba(22, 33, 62, 0.8);
    color: white;
    cursor: pointer;
    transition: border-color 0.2s;
}

.language-select select:focus {
    outline: none;
    border-color: var(--poly-primary);
}

.microphone-select {
    width: 100%;
}

.microphone-select label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #e0e0e0;
}

.microphone-select select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(255, 122, 24, 0.3);
    border-radius: 8px;
    font-size: 1rem;
    background: rgba(22, 33, 62, 0.8);
    color: white;
    cursor: pointer;
    transition: border-color 0.2s;
}

.microphone-select select:focus {
    outline: none;
    border-color: var(--poly-primary);
}

.recording-controls {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-bottom: 15px;
}

.session-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
    padding-top: 4px;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-live,
.btn-share,
.btn-swap,
.settings-toggle {
    --button-gradient: linear-gradient(170deg, rgb(240, 85, 27) 42%, rgb(59, 107, 229) 73%);
    background:
        radial-gradient(ellipse at 28% 8%, rgba(255, 168, 45, 0.68) 0%, rgba(255, 168, 45, 0.22) 28%, transparent 48%),
        linear-gradient(180deg, rgba(255, 122, 24, 0.26) 0%, rgba(7, 14, 38, 0.02) 42%, rgba(7, 14, 38, 0.22) 100%),
        var(--button-gradient);
    border: 1px solid rgba(255, 122, 24, 0.44);
    box-shadow:
        inset 0 1px 0 rgba(255, 122, 24, 0.34),
        inset 0 -12px 24px rgba(7, 14, 38, 0.2),
        0 0 22px rgba(240, 85, 27, 0.28),
        0 0 20px rgba(59, 107, 229, 0.22);
}

.btn-share {
    --button-gradient: linear-gradient(170deg, rgb(240, 85, 27) 42%, rgb(59, 107, 229) 73%);
    background:
        radial-gradient(ellipse at 28% 8%, rgba(255, 168, 45, 0.7) 0%, rgba(255, 168, 45, 0.28) 28%, transparent 48%),
        linear-gradient(180deg, rgba(255, 122, 24, 0.34) 0%, rgba(7, 14, 38, 0.02) 42%, rgba(7, 14, 38, 0.16) 100%),
        var(--button-gradient);
}

.btn-live::before,
.btn-share::before,
.btn-swap::before,
.settings-toggle::before {
    content: '';
    position: absolute;
    inset: 1px 1px auto 1px;
    height: 42%;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 176, 47, 0.36), rgba(59, 107, 229, 0.08));
    pointer-events: none;
    z-index: 0;
}

.btn-live::after,
.btn-share::after,
.btn-swap::after {
    content: '';
    position: absolute;
    top: -70%;
    left: -45%;
    width: 34%;
    height: 240%;
    background: linear-gradient(90deg, transparent, rgba(255, 195, 52, 0.7), rgba(59, 107, 229, 0.36), transparent);
    opacity: 0;
    transform: rotate(24deg);
    transition: left 0.52s ease, opacity 0.18s ease;
    pointer-events: none;
    z-index: 1;
}

.btn-live:hover:not(:disabled)::after,
.btn-share:hover:not(:disabled)::after,
.btn-swap:hover:not(:disabled)::after {
    opacity: 1;
    left: 115%;
}

.btn-live:active:not(:disabled),
.btn-share:active:not(:disabled),
.btn-swap:active:not(:disabled) {
    transform: scale(0.98);
    box-shadow:
        inset 0 4px 16px rgba(5, 11, 31, 0.28),
        0 0 12px rgba(59, 107, 229, 0.2);
}

.btn-record {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.btn-record:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(245, 87, 108, 0.4);
}

.btn-tertiary {
    background:
        linear-gradient(180deg, rgba(255, 176, 47, 0.18), rgba(7, 14, 38, 0.18)),
        rgba(13, 24, 58, 0.82);
    color: #ffd59a;
    padding: 10px 20px;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 176, 47, 0.36);
    font-weight: 600;
    transform: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 176, 47, 0.14),
        0 0 14px rgba(255, 122, 24, 0.14);
    width: 120px;
}

.btn-tertiary:hover:not(:disabled) {
    background:
        linear-gradient(180deg, rgba(255, 176, 47, 0.26), rgba(7, 14, 38, 0.14)),
        rgba(16, 30, 70, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 176, 47, 0.2),
        0 0 20px rgba(255, 122, 24, 0.22);
}

.btn-stop {
    background:
        linear-gradient(180deg, rgba(255, 82, 82, 0.2), rgba(7, 14, 38, 0.18)),
        rgba(37, 18, 42, 0.86);
    color: #ffb4b4;
    padding: 10px 20px;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 82, 82, 0.42);
    font-weight: 600;
    width: 120px;
    box-shadow:
        inset 0 1px 0 rgba(255, 130, 130, 0.16),
        0 0 14px rgba(255, 82, 82, 0.14);
}

.btn-stop:hover:not(:disabled) {
    background:
        linear-gradient(180deg, rgba(255, 82, 82, 0.3), rgba(7, 14, 38, 0.14)),
        rgba(49, 19, 46, 0.92);
    color: #ffe4e4;
    transform: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 130, 130, 0.2),
        0 0 20px rgba(255, 82, 82, 0.24);
}

.btn-resume {
    background:
        linear-gradient(180deg, rgba(56, 239, 125, 0.18), rgba(7, 14, 38, 0.18)),
        rgba(12, 39, 43, 0.86);
    color: #a8ffc8;
    padding: 10px 20px;
    font-size: 0.9rem;
    border: 1px solid rgba(56, 239, 125, 0.36);
    font-weight: 600;
    transform: none;
    box-shadow:
        inset 0 1px 0 rgba(56, 239, 125, 0.14),
        0 0 14px rgba(56, 239, 125, 0.12);
    width: 120px;
}

.btn-resume:hover:not(:disabled) {
    background:
        linear-gradient(180deg, rgba(56, 239, 125, 0.26), rgba(7, 14, 38, 0.14)),
        rgba(13, 50, 50, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(56, 239, 125, 0.2),
        0 0 20px rgba(56, 239, 125, 0.2);
}

.btn-process {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-process:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.btn-live {
    --button-gradient: linear-gradient(190deg, rgb(240, 85, 27) 42%, rgb(59, 107, 229) 73%);
    color: white;
    text-shadow: none;
}

.btn-live:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.02);
    box-shadow:
        inset 0 1px 0 rgba(255, 122, 24, 0.38),
        inset 0 -10px 22px rgba(7, 14, 38, 0.18),
        0 0 28px rgba(240, 85, 27, 0.36),
        0 0 24px rgba(59, 107, 229, 0.28);
}

.btn-share {
    color: white;
    text-shadow: none;
}

.action-icon-btn {
    width: 70px;
    height: 56px;
    min-width: 70px;
    flex: 0 0 70px;
    padding: 0;
    border-radius: 18px;
    background:
        radial-gradient(ellipse at 30% 12%, rgba(255, 190, 70, 0.52), transparent 42%),
        linear-gradient(180deg, rgba(255, 122, 24, 0.18), rgba(7, 14, 38, 0.1) 48%, rgba(7, 14, 38, 0.2)),
        var(--button-gradient);
    border-color: rgba(255, 138, 36, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 176, 47, 0.34),
        inset 0 -10px 18px rgba(5, 11, 31, 0.22),
        0 0 18px rgba(240, 85, 27, 0.22),
        0 0 16px rgba(59, 107, 229, 0.22);
}

.action-icon-btn::before {
    height: 48%;
    background: linear-gradient(180deg, rgba(255, 176, 47, 0.22), transparent);
}

.action-icon-btn::after {
    width: 26%;
    background: linear-gradient(90deg, transparent, rgba(255, 190, 70, 0.48), rgba(59, 107, 229, 0.22), transparent);
}

.action-icon {
    display: block;
    width: 31px;
    height: 31px;
    position: relative;
    z-index: 2;
    background: #fff;
    filter:
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45))
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.24));
}

.action-icon-mic {
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3Zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.42 2.72 6.23 6 6.72V21H8v1.8h8V21h-3v-3.28c3.28-.49 6-3.3 6-6.72h-1.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3Zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.42 2.72 6.23 6 6.72V21H8v1.8h8V21h-3v-3.28c3.28-.49 6-3.3 6-6.72h-1.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.action-icon-tab-audio {
    width: 34px;
    height: 30px;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 4.5C3 3.12 4.12 2 5.5 2h17C23.88 2 25 3.12 25 4.5v11c0 1.38-1.12 2.5-2.5 2.5H16v2h4v2H8v-2h4v-2H5.5C4.12 18 3 16.88 3 15.5v-11ZM5.5 4A.5.5 0 0 0 5 4.5v11c0 .28.22.5.5.5h17a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5h-17Zm9.2 2.8 5.5 4.2-5.5 4.2v-3H8v-2.4h6.7v-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 4.5C3 3.12 4.12 2 5.5 2h17C23.88 2 25 3.12 25 4.5v11c0 1.38-1.12 2.5-2.5 2.5H16v2h4v2H8v-2h4v-2H5.5C4.12 18 3 16.88 3 15.5v-11ZM5.5 4A.5.5 0 0 0 5 4.5v11c0 .28.22.5.5.5h17a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5h-17Zm9.2 2.8 5.5 4.2-5.5 4.2v-3H8v-2.4h6.7v-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.btn-share:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.02);
    box-shadow:
        inset 0 1px 0 rgba(59, 107, 229, 0.34),
        inset 0 -10px 22px rgba(7, 14, 38, 0.18),
        0 0 28px rgba(59, 107, 229, 0.34),
        0 0 24px rgba(240, 85, 27, 0.28);
}

.btn-icon {
    font-size: 1.3rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
    position: relative;
    z-index: 2;
}

.control-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    flex: 0 0 18px;
    position: relative;
    z-index: 2;
    background: currentColor;
    filter:
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45))
        drop-shadow(0 0 6px currentColor);
}

.control-icon-pause {
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 4h3.5v16H7V4Zm6.5 0H17v16h-3.5V4Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 4h3.5v16H7V4Zm6.5 0H17v16h-3.5V4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.control-icon-play {
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 4.5v15l12-7.5-12-7.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 4.5v15l12-7.5-12-7.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.control-icon-stop {
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6 6h12v12H6V6Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6 6h12v12H6V6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.btn-text {
    display: inline-block;
    line-height: 1.2;
    vertical-align: middle;
    position: relative;
    z-index: 2;
}

.btn-live .action-label,
.btn-share .action-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.btn-swap {
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-swap:hover {
    transform: scale(1.1) rotate(180deg);
    box-shadow: 0 5px 20px rgba(255, 122, 24, 0.4);
}

.btn-swap .btn-icon {
    font-size: 1.5rem;
}

.permission-request {
    text-align: center;
    margin: 20px 0;
}

.btn-permission {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.btn-permission:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(17, 153, 142, 0.4);
}

.status {
    text-align: center;
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-weight: 500;
    display: none;
}

.status.visible {
    display: block;
}

.status.info {
    background: rgba(30, 136, 229, 0.2);
    color: #64b5f6;
    border: 1px solid rgba(30, 136, 229, 0.3);
}

.status.success {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.status.error {
    background: rgba(244, 67, 54, 0.2);
    color: #e57373;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.status.warning {
    background: rgba(255, 152, 0, 0.2);
    color: #ffb74d;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.readiness-panel {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 9px 13px;
    margin: -4px auto 14px;
    width: fit-content;
    max-width: 100%;
    border: 1px solid rgba(30, 136, 229, 0.36);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(30, 136, 229, 0.22), rgba(255, 122, 24, 0.15)),
        rgba(6, 12, 34, 0.74);
    color: #eaf7ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 24px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    position: relative;
}

.readiness-panel.active {
    display: flex;
    animation: flash-pop 0.2s ease-out;
}

.readiness-summary {
    color: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
}

.readiness-pulse-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #35a8ff;
    box-shadow: 0 0 12px rgba(53, 168, 255, 0.65);
    animation: readiness-pulse 1.1s ease-in-out infinite;
}

.readiness-panel.done {
    border-color: rgba(76, 175, 80, 0.46);
    color: #b8ffc9;
}

.readiness-panel.done .readiness-pulse-dot {
    background: #38ef7d;
    box-shadow: 0 0 14px rgba(56, 239, 125, 0.65);
}

.readiness-panel.error {
    border-color: rgba(244, 67, 54, 0.55);
    color: #ffc0c0;
}

.readiness-panel.error .readiness-pulse-dot {
    background: #ff4757;
    box-shadow: 0 0 14px rgba(255, 71, 87, 0.7);
}