/* Root container */
.root {
    flex-grow: 1;
    padding: 16px;
    background-color: #2b2b2b;
}

/* Header styles */
.header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom-width: 1px;
    border-bottom-color: #3c3c3c;
}

.title {
    font-size: 20px;
    -unity-font-style: bold;
    color: #e0e0e0;
    margin-bottom: 4px;
}

.subtitle {
    font-size: 12px;
    color: #808080;
}

/* Section styles */
.section {
    margin-bottom: 16px;
}

.section-title {
    font-size: 11px;
    -unity-font-style: bold;
    color: #808080;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* Button styles */
.button-row {
    flex-direction: row;
    justify-content: space-between;
}

.button {
    height: 32px;
    padding: 0 16px;
    border-radius: 4px;
    border-width: 0;
    -unity-font-style: bold;
    font-size: 12px;
    transition-duration: 0.15s;
}

.button:hover {
    opacity: 0.9;
}

.button:active {
    opacity: 0.8;
}

.button:disabled {
    opacity: 0.5;
}

.button.primary {
    background-color: #3a86ff;
    color: #ffffff;
    flex-grow: 1;
}

.button.secondary {
    background-color: #404040;
    color: #e0e0e0;
    flex-grow: 1;
}

/* Capture buttons row */
.capture-buttons {
    margin-top: 8px;
}

.capture-buttons .button.primary {
    margin-right: 8px;
}

.capture-buttons.hidden {
    display: none;
}

.button.accent {
    background-color: #06d6a0;
    color: #1a1a1a;
    height: 40px;
    font-size: 13px;
}

.button.full-width {
    flex-grow: 1;
}

.button.small {
    height: 28px;
    font-size: 11px;
    background-color: #353535;
    color: #b0b0b0;
}

/* Status indicator */
.status-container {
    flex-direction: row;
    align-items: center;
    background-color: #1a3a5c;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 16px;
}

.status-container.hidden {
    display: none;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #ff6b6b;
    margin-right: 10px;
}

.status-indicator.recording {
    background-color: #ff6b6b;
}

.status-label {
    font-size: 12px;
    color: #a0c4e8;
}

/* Hint text */
.hint {
    font-size: 11px;
    color: #606060;
    margin-top: 8px;
    -unity-text-align: middle-center;
}

.hint.hidden {
    display: none;
}

/* Export info section */
.export-info {
    background-color: #252525;
    border-radius: 4px;
    padding: 12px;
}

.export-info.hidden {
    display: none;
}

.export-path-container {
    background-color: #1e1e1e;
    border-radius: 2px;
    padding: 8px;
    margin-bottom: 8px;
}

.export-path {
    font-size: 11px;
    color: #b0b0b0;
    white-space: normal;
    -unity-text-overflow-position: end;
    text-overflow: ellipsis;
}

/* Footer */
.footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 16px;
    border-top-width: 1px;
    border-top-color: #3c3c3c;
}

.footer-center {
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}

.footer-right {
    flex-direction: row;
    align-items: center;
}

/* Icon button for settings cog */
.icon-button {
    width: 28px;
    height: 28px;
    background-color: transparent;
    border-width: 0;
    border-radius: 4px;
    font-size: 16px;
    color: #808080;
    -unity-text-align: middle-center;
    padding: 0;
}

.icon-button:hover {
    background-color: #404040;
    color: #b0b0b0;
}

.link-button {
    background-color: transparent;
    border-width: 0;
    color: #6b9eff;
    font-size: 11px;
    padding: 4px 8px;
}

.link-button:hover {
    color: #8bb4ff;
}

.version {
    font-size: 10px;
    color: #505050;
}

/* Animation for recording indicator */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

.status-indicator.recording {
    transition-duration: 0.8s;
}

/* Auto analyze toggle */
.auto-analyze-toggle {
    margin-top: 8px;
    flex-direction: row;
    justify-content: flex-start;
}

.auto-analyze-toggle > Label {
    font-size: 11px;
    color: #808080;
    margin-left: 4px;
    min-width: auto;
}

/* Upload progress section */
.upload-progress {
    background-color: #1a3a5c;
    border-radius: 4px;
    padding: 12px;
}

.upload-progress.hidden {
    display: none;
}

.upload-progress ProgressBar {
    height: 8px;
    margin-bottom: 8px;
}

.upload-progress ProgressBar .unity-progress-bar__background {
    background-color: #0d1f33;
    border-radius: 4px;
}

.upload-progress ProgressBar .unity-progress-bar__progress {
    background-color: #3a86ff;
    border-radius: 4px;
}

.upload-status {
    font-size: 11px;
    color: #a0c4e8;
    -unity-text-align: middle-center;
}

/* Upload complete section */
.upload-complete {
    background-color: #1a3d2e;
    border-radius: 4px;
    padding: 12px;
}

.upload-complete.hidden {
    display: none;
}

.success-label {
    font-size: 13px;
    color: #06d6a0;
    -unity-font-style: bold;
    -unity-text-align: middle-center;
    margin-bottom: 12px;
}
