/* Home Screen */
.home-screen {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Enable pull-to-refresh on home screen */
    overscroll-behavior-y: none;
    touch-action: pan-y;
}

.home-screen.hidden {
    display: none;
}

.home-header {
    background: #4F46E5;
    /* Indigo 600 */
    color: white;
    padding: 20px;
    /* iOS PWA: Add safe area padding for notch/status bar */
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: 30px;
    text-align: center;
    position: relative;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.home-header h1 {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    user-select: none;
    -webkit-user-select: none;
    transform: translateY(4px);
}

.home-header p {
    font-size: 18px;
    opacity: 0.9;
}

.grid-container {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    align-content: start;
    overflow: hidden;
}

@media (max-width: 600px) {
    .grid-container {
        padding: 16px;
        gap: 16px;
    }
}

/* Landscape orientation - use 3 columns to fit more horizontally */
@media (max-height: 600px) and (orientation: landscape) {
    .grid-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        padding: 8px;
        max-width: 900px;
        max-height: calc(100vh - 140px); /* Account for header height */
    }

    .grid-option {
        gap: 8px;
    }
}

/* Very short landscape (e.g., phone rotated) - tighter spacing and enable scroll */
@media (max-height: 450px) and (orientation: landscape) {
    .home-screen {
        overflow-y: auto;
    }

    .grid-container {
        gap: 8px;
        padding: 6px;
        align-content: start;
        max-height: none; /* Allow natural height, scrolling handled by parent */
    }

    .grid-option {
        gap: 6px;
        max-height: 120px; /* Limit button height in very short viewports */
    }
}

.grid-option {
    aspect-ratio: 1;
    background: white;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    border: 2px solid #cbd5e1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
}

.grid-option.chat-wide {
    grid-column: span 2;
    aspect-ratio: 2;
}

.grid-option:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.grid-option:active {
    transform: translateY(-2px);
}

.grid-option .emoji {
    font-size: 64px;
    line-height: 1;
}

.grid-option .label {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
}

/* Chat View */
.chat-view {
    display: none;
    flex-direction: column;
    height: 100vh;
    /* iOS Safari viewport fix */
    height: -webkit-fill-available;
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overscroll-behavior-y: auto;
}

.chat-view.active {
    display: flex;
}

.chat-header {
    background: #4F46E5;
    color: white;
    padding: 16px 20px;
    /* iOS PWA: Add safe area padding for notch/status bar */
    padding-top: max(16px, env(safe-area-inset-top));
    display: flex;
    align-items: center;
    gap: 12px;
    /* Prevent header from being focusable which can block scrolling on iOS */
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* Prevent touch scrolling on header from capturing scroll events */
    touch-action: none;
    -webkit-touch-callout: none;
}

.chat-header h1 {
    font-size: 24px;
    font-weight: 600;
    flex: 1;
}

.messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
}

.message {
    display: flex;
    gap: 12px;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.user {
    justify-content: flex-end;
}

.message-bubble {
    max-width: 80%;
    padding: 16px 20px;
    border-radius: 20px;
    font-size: 18px;
    line-height: 1.5;
    word-wrap: break-word;
}

.message.user .message-bubble {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom-right-radius: 4px;
}

.message.assistant .message-bubble {
    background: #f1f3f4;
    color: #202124;
    border-bottom-left-radius: 4px;
}

/* TTS Play Button */
.tts-play-button {
    background: #667eea;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    align-self: flex-start;
    margin-top: 16px;
    margin-left: 8px;
    flex-shrink: 0;
}

.tts-play-button:hover {
    background: #764ba2;
    transform: scale(1.1);
}

.tts-play-button:active {
    transform: scale(0.95);
}

.input-area {
    padding: 24px;
    /* iOS Safari: Add aggressive padding for address bar + safe area */
    padding-bottom: max(60px, calc(24px + env(safe-area-inset-bottom)));
    border-top: 1px solid #e0e0e0;
    background: #fafafa;
    position: relative;
}

.input-form {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Hide microphone button in Text Mode */
.text-mode .voice-btn {
    display: none;
}

/* Lists View */
.lists-view {
    display: none;
    flex-direction: column;
    height: 100vh;
    /* iOS Safari viewport fix */
    height: -webkit-fill-available;
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Enable pull-to-refresh on lists view */
    overscroll-behavior-y: none;
    touch-action: pan-y;
}

.lists-view.active {
    display: flex;
}

.lists-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
}

.todo-list-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    border: 2px solid #e0e0e0;
    user-select: none;
    -webkit-user-select: none;
}

.todo-list-title {
    font-size: 24px;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.todo-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #e8e8e8;
}

.todo-item:last-child {
    border-bottom: none;
}

.todo-checkbox {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 3px solid #667eea;
    background: white;
    flex-shrink: 0;
    margin-top: 2px;
}

.todo-checkbox.completed {
    background: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
}

.todo-checkbox.completed::after {
    content: '✓';
    color: white;
    font-size: 18px;
    font-weight: bold;
}

.todo-item-text {
    flex: 1;
    font-size: 20px;
    color: #333;
    line-height: 1.4;
}

.todo-item.completed .todo-item-text {
    text-decoration: line-through;
    color: #999;
}

.todo-meta {
    font-size: 16px;
    color: #999;
    margin-top: 6px;
}

/* List Preview Items (for list cards) */
.list-preview-items {
    margin-top: 12px;
}

.list-preview-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    font-size: 18px;
    color: #333;
    line-height: 1.4;
    user-select: none;
    -webkit-user-select: none;
}

.list-preview-item.completed {
    color: #999;
}

.list-preview-item.completed .preview-text {
    text-decoration: line-through;
}

.preview-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid #667eea;
    background: white;
    flex-shrink: 0;
    margin-top: 2px;
}

.preview-checkbox.completed {
    background: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-checkbox.completed::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.preview-text {
    flex: 1;
    word-break: break-word;
}

.list-preview-more {
    color: #999;
    font-size: 16px;
    font-style: italic;
    margin-top: 8px;
    padding-left: 32px;
}

/* Add List Button */
.add-list-button {
    background: #667eea;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-list-button:active {
    transform: scale(0.95);
}

.add-list-text {
    display: inline;
}

.add-list-icon {
    font-size: 20px;
}

@media (max-width: 480px) {
    .add-list-button {
        padding: 10px 16px;
    }

    .add-list-text {
        display: none;
    }
}

/* List Detail View */
.list-detail-view {
    display: none;
    flex-direction: column;
    height: 100vh;
    height: -webkit-fill-available;
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Enable pull-to-refresh on list detail view */
    overscroll-behavior-y: none;
    touch-action: pan-y;
}

.list-detail-view.active {
    display: flex;
}

.list-detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

.delete-list-button {
    background: none;
    border: none;
    font-size: 24px;
    padding: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.delete-list-button:active {
    transform: scale(0.9);
}

.list-settings-button {
    background: none;
    border: none;
    font-size: 24px;
    padding: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.list-settings-button:active {
    transform: scale(0.9);
}

/* Add Item Section */
.add-item-section {
    padding: 16px 20px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    border-top: 1px solid #e8e8e8;
    background: white;
    display: flex;
    gap: 12px;
    align-items: center;
}

.add-item-button {
    flex: 1;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    padding: 14px 20px;
    cursor: pointer;
    transition: transform 0.2s;
}

.add-item-button:active {
    transform: scale(0.95);
}

/* Arthur Edit Button */
.arthur-edit-button {
    flex: 1;
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    padding: 14px 20px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.arthur-edit-button:hover {
    box-shadow: 0 4px 12px rgba(118, 75, 162, 0.4);
}

.arthur-edit-button:active {
    transform: scale(0.95);
}

/* Item Edit View (Add/Edit Item) */
.item-edit-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 100;
    display: none;
    flex-direction: column;
}

.item-edit-view.active {
    display: flex;
}

.item-edit-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    font-size: 20px;
    padding: 16px 18px;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
}

.form-input:focus {
    border-color: #667eea;
}

textarea.form-input {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
    line-height: 1.5;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 24px;
    cursor: pointer;
    font-size: 22px;
}

.checkbox-label input[type="checkbox"] {
    width: 28px;
    height: 28px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    vertical-align: middle;
}

.checkbox-label span {
    line-height: 28px;
    margin-left: 20px;
}

/* Item Edit Actions Container */
.item-edit-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e8e8e8;
}

.save-button-large {
    width: 100%;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 22px;
    font-weight: 600;
    padding: 18px 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.save-button-large:active {
    transform: scale(0.98);
}

.save-button-large:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.delete-button-large {
    width: 100%;
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 22px;
    font-weight: 600;
    padding: 18px 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.delete-button-large:active {
    transform: scale(0.98);
}

/* Header Actions for Edit View */
.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.save-button {
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 20px;
    cursor: pointer;
    transition: transform 0.2s;
}

.save-button:active {
    transform: scale(0.95);
}

.delete-button {
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 20px;
    padding: 8px 16px;
    cursor: pointer;
    transition: transform 0.2s;
}

.delete-button:active {
    transform: scale(0.95);
}

/* Make list cards clickable */
.todo-list-card {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.todo-list-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.todo-list-card:active {
    transform: scale(0.98);
}

/* Document delete button */
.document-delete-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.document-delete-btn:hover {
    opacity: 1;
    transform: scale(1.2);
}

.document-delete-btn:active {
    transform: scale(1);
}

/* Make checkboxes clickable */
.todo-checkbox {
    cursor: pointer;
    transition: transform 0.2s;
}

.todo-checkbox:hover {
    transform: scale(1.1);
}

/* Contacts View */
.contacts-view {
    display: none;
    flex-direction: column;
    height: 100vh;
    height: -webkit-fill-available;
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overscroll-behavior-y: auto;
}

.contacts-view.active {
    display: flex;
}

.contacts-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
}

.contact-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    border: 2px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.contact-info {
    flex: 1;
    min-width: 0;
}

.contact-name {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 6px;
}

.contact-phone {
    font-size: 18px;
    color: #667eea;
    margin-bottom: 8px;
    font-family: monospace;
}

.contact-email {
    font-size: 16px;
    color: #666;
    margin-bottom: 8px;
}

.contact-notes {
    font-size: 16px;
    color: #888;
    font-style: italic;
    margin-bottom: 8px;
}

.contact-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.contact-tag {
    font-size: 14px;
    padding: 4px 12px;
    background: #e8ecff;
    color: #667eea;
    border-radius: 12px;
    font-weight: 500;
}

/* Contact Detail View */
.contact-detail-view {
    display: none;
    flex-direction: column;
    height: 100vh;
    height: -webkit-fill-available;
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overscroll-behavior-y: auto;
    z-index: 100;
}

.contact-detail-view.active {
    display: flex;
}

.contact-detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

.contact-detail-field {
    margin-bottom: 24px;
}

.contact-detail-label {
    font-size: 14px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.contact-detail-value {
    font-size: 20px;
    color: #333;
    word-break: break-word;
}

.contact-detail-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    color: white;
    margin: 0 auto 32px;
}

.contact-actions {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.call-contact-button {
    width: 100%;
    background: #10b981;
    color: white;
    border: none;
    padding: 18px;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.call-contact-button:active {
    transform: scale(0.98);
    background: #059669;
}

.edit-contact-button {
    width: 100%;
    background: #667eea;
    color: white;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}

.edit-contact-button:active {
    transform: scale(0.98);
}

.delete-contact-button {
    background: none;
    border: none;
    font-size: 24px;
    padding: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.delete-contact-button:active {
    transform: scale(0.9);
}

.contact-card {
    cursor: pointer;
}

.add-contact-button {
    background: #667eea;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-contact-button:active {
    transform: scale(0.95);
}

.add-contact-text {
    display: inline;
}

.add-contact-icon {
    font-size: 20px;
}

@media (max-width: 480px) {
    .add-contact-button {
        padding: 10px 16px;
    }

    .add-contact-text {
        display: none;
    }
}

/* About Me View */
.aboutme-view {
    display: none;
    flex-direction: column;
    height: 100vh;
    height: -webkit-fill-available;
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overscroll-behavior-y: auto;
}

.aboutme-view.active {
    display: flex;
}

.aboutme-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
}

.aboutme-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 24px;
    border: 2px solid #e0e0e0;
}

.aboutme-field {
    margin-bottom: 24px;
}

.aboutme-label {
    font-size: 14px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.aboutme-value {
    font-size: 20px;
    color: #333;
    word-break: break-word;
}

.aboutme-actions {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e0e0e0;
}



/* Permissions Modal */
.permissions-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 2000;
}

.permissions-modal.hidden {
    display: none;
}

.permissions-modal-content {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 40px;
    max-width: 450px;
    width: 100%;
}

.permissions-modal h2 {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 32px;
    text-align: center;
}

.permission-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: #f8f9fa;
}

.permission-label {
    color: #555;
    font-size: 18px;
    font-weight: 500;
}

.permission-status {
    font-size: 32px;
}

.mic-test-container {
    margin: 24px 0;
    padding: 20px;
    border-radius: 12px;
    background: #f8f9fa;
}

.mic-test-container h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #333;
}

.mic-level-bar {
    background: #e0e0e0;
    border-radius: 20px;
    height: 32px;
    overflow: hidden;
    margin-bottom: 12px;
}

.mic-level-fill {
    height: 100%;
    transition: width 0.1s ease, background-color 0.2s ease;
    border-radius: 20px;
}

.mic-level-fill.low {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.mic-level-fill.medium {
    background: linear-gradient(90deg, #fbbf24, #fcd34d);
}

.mic-level-fill.high {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.mic-test-message {
    font-size: 16px;
    color: #666;
    margin-top: 8px;
}

.mic-test-hint {
    font-size: 14px;
    color: #999;
    margin-top: 6px;
}

.error-box {
    background: #fef2f2;
    border: 2px solid #fecaca;
    border-radius: 12px;
    padding: 16px;
    margin: 20px 0;
}

.error-box p {
    color: #dc2626;
    font-size: 16px;
    margin: 0;
}

.start-button {
    width: 100%;
    padding: 18px 28px;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 24px;
}

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

.start-button:enabled:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.start-button:disabled {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
}

.retry-button {
    width: 100%;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #d1d5db;
    background: white;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 12px;
}

.retry-button:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

/* ========================================
   TALK MODE (VOICE-ONLY)
   ======================================== */

.talk-mode,
.text-mode {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.talk-mode.hidden,
.text-mode.hidden {
    display: none;
}

/* Mode Switch Button */
.mode-switch-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 16px;
    border: 2px solid #667eea;
    background: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mode-switch-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    line-height: 1;
}

.mode-switch-btn:hover {
    background: #667eea;
    color: white;
}

.mode-switch-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.chat-header {
    position: relative;
}

/* Mobile responsive mode switch */
@media (max-width: 600px) {
    .mode-switch-btn {
        padding: 8px;
        min-width: 40px;
    }

    .mode-switch-text {
        display: none;
    }

    .mode-switch-icon {
        display: block;
    }
}

/* Audio Control Button */
.audio-control-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 12px;
    border: 2px solid #667eea;
    background: white;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.audio-control-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #ccc;
    color: #999;
}

.audio-control-btn:not(:disabled):hover {
    background: #667eea;
    color: white;
}

.audio-control-btn:not(:disabled):active {
    transform: scale(0.95);
}

/* Talk Mode Content */
.talk-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #FAFAFA;
    overflow: hidden;
}

.talk-scrollable {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 20px;
    gap: 32px;
}

.talk-greeting-area {
    padding: 20px;
    text-align: center;
}

.arthur-greeting {
    font-size: 32px;
    font-weight: 600;
    color: #666;
    margin: 0;
    text-align: center;
    line-height: 1.5;
    transition: opacity 0.3s, max-height 0.3s;
}

.arthur-greeting.hidden {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
}

.talk-status {
    font-size: 18px;
    color: #666;
    text-align: center;
    margin: 8px 0 0;
    font-weight: 400;
    line-height: 1.5;
}

.talk-button-area {
    padding: 20px;
    /* iOS Safari: Add aggressive padding for address bar + safe area */
    padding-bottom: max(60px, calc(20px + env(safe-area-inset-bottom)));
    background: #FAFAFA;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Big Voice Button - Centerpiece */
.big-voice-btn {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 4px solid #2563EB;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    position: relative;
}

.big-voice-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.4);
}

.big-voice-btn:active:not(:disabled) {
    transform: scale(0.95);
}

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

/* Prevent text selection when holding button */
.big-voice-btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.big-voice-btn.recording {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    border-color: #DC2626;
    box-shadow: 0 8px 30px rgba(239, 68, 68, 0.4);
    animation: pulse 1.5s ease-in-out infinite;
}

.big-voice-btn .voice-icon {
    font-size: 72px;
    line-height: 1;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 8px 30px rgba(239, 68, 68, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 40px rgba(239, 68, 68, 0.6);
    }
}

/* Recent Messages Display */
.recent-messages {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 20px 0;
    min-height: 80px;
}

.recent-message {
    padding: 24px 28px;
    border-radius: 20px;
    font-size: 26px;
    line-height: 1.5;
    animation: slideIn 0.3s ease-out;
}

.recent-message.user {
    background: #E0E7FF;
    color: #1E40AF;
    text-align: right;
    align-self: flex-end;
    max-width: 85%;
}

.recent-message.assistant {
    background: #F3F4F6;
    color: #1A1A1A;
    text-align: left;
    align-self: flex-start;
    max-width: 85%;
}

/* ========================================
   SCRIBE VIEW (Desktop-optimized)
   ======================================== */

.scribe-view {
    display: none;
    flex-direction: column;
    height: 100vh;
    overscroll-behavior-y: auto;
}

.scribe-view:not(.hidden) {
    display: flex;
}

.scribe-content {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    gap: 0;
    overflow: hidden;
}

/* Document Section - Left Side */
.scribe-document-section {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-right: 2px solid #e5e7eb;
    overflow: hidden;
}

.scribe-document-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.scribe-document-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.scribe-word-count {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.scribe-word-count.warning {
    color: #f59e0b;
}

.scribe-word-count.limit {
    color: #ef4444;
    font-weight: 700;
}

.scribe-document {
    flex: 1;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    font-size: 16px;
    line-height: 1.8;
    overflow-y: auto;
    background: white;
    min-height: 200px;
}

.scribe-document:focus {
    outline: none;
    border-color: #4F46E5;
}

.scribe-document[contenteditable]:empty::before {
    content: attr(placeholder);
    color: #9ca3af;
    font-style: italic;
}

/* Pending Section - Right Side */
.scribe-pending-section {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow: hidden;
}

.scribe-pending-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.scribe-pending-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.scribe-status {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.scribe-status.processing {
    color: #4F46E5;
}

/* Candidates */
.scribe-candidates {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.scribe-candidate {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: white;
}

.scribe-candidate.hidden {
    display: none;
}

.scribe-candidate-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.scribe-candidate-text {
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 8px;
    background: #f9fafb;
    min-height: 60px;
}

.scribe-candidate-text:focus {
    outline: none;
    border-color: #4F46E5;
    background: white;
}

.scribe-candidate-select {
    width: 100%;
    padding: 10px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.scribe-candidate-select:hover {
    background: #059669;
}

.scribe-candidate-select:active {
    transform: scale(0.98);
}

.scribe-empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #9ca3af;
    font-size: 16px;
}

.scribe-empty-state.hidden {
    display: none;
}

/* Actions */
.scribe-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.scribe-actions.hidden {
    display: none;
}

.scribe-action-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.scribe-reject {
    background: #fee2e2;
    color: #dc2626;
}

.scribe-reject:hover {
    background: #fecaca;
}

/* Microphone Area - Bottom Spanning Both Columns */
.scribe-mic-area {
    grid-column: 1 / 3;
    grid-row: 2;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 2px solid #e5e7eb;
    background: #f9fafb;
}

.scribe-mic-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #4F46E5;
    background: linear-gradient(135deg, #6366f1 0%, #4F46E5 100%);
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    -webkit-user-select: none;
    user-select: none;
}

.scribe-mic-btn:hover:not(:disabled) {
    transform: scale(1.05);
}

.scribe-mic-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.scribe-mic-btn.recording {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: #dc2626;
    animation: pulse 1.5s ease-in-out infinite;
}

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

.scribe-mic-icon {
    font-size: 36px;
}

/* ========================================
   SCRIBE DETAIL VIEW
   ======================================== */

.scribe-detail-view {
    display: none;
    flex-direction: column;
    height: 100vh;
    overscroll-behavior-y: auto;
}

.scribe-detail-view:not(.hidden) {
    display: flex;
}

.scribe-detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0 120px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overscroll-behavior-y: auto;
}

.header-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.language-badge {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    background: #eef2ff;
    color: #667eea;
    border-radius: 4px;
    text-transform: uppercase;
}

.save-status {
    font-size: 14px;
    color: #999;
    min-width: 80px;
    text-align: right;
}

.document-name-section {
    padding: 0;
}

.document-name-input {
    width: 100%;
    font-size: 24px;
    font-weight: 600;
    padding: 12px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #f9fafb;
    transition: all 0.2s;
}

.document-name-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
}

.document-background-section {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

.document-text-section {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.section-header {
    padding: 12px 16px;
    background: #f9fafb;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    user-select: none;
}

.section-header:hover {
    background: #f3f4f6;
}

.toggle-icon {
    font-size: 12px;
    transition: transform 0.2s;
}

.toggle-icon.open {
    transform: rotate(-180deg);
}

.document-background-input {
    width: 100%;
    min-height: 100px;
    padding: 16px;
    border: none;
    border-top: 1px solid #e5e7eb;
    font-size: 16px;
    line-height: 1.6;
    resize: vertical;
    font-family: inherit;
}

.document-background-input:focus {
    outline: none;
}

.document-section-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.document-section-content.hidden {
    display: none;
}

.document-content-section {
    flex: 1;
    display: flex;
    min-height: 400px;
}

.document-content-input {
    width: 100%;
    flex: 1;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1.8;
    resize: none;
    font-family: inherit;
}

.document-content-input:focus {
    outline: none;
    border-color: #667eea;
}

/* Document Candidates */
.document-candidates-section {
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.document-candidates-section.hidden {
    display: none;
}

.candidates-header {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 12px;
}

.candidates-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.candidate-item {
    padding: 16px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.candidate-item:hover {
    border-color: #667eea;
    background: #f9fafb;
}

.candidate-item.selected {
    border-color: #667eea;
    background: #eef2ff;
}

.candidate-label {
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.candidate-text-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.candidate-text {
    flex: 1;
    font-size: 18px;
    line-height: 1.6;
    color: #1f2937;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.candidate-play-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 2px solid #667eea;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.candidate-play-btn:hover {
    background: #eef2ff;
    border-color: #4f46e5;
}

.candidate-play-btn:active {
    transform: scale(0.95);
}

.candidate-reject-btn {
    padding: 12px;
    background: #fee2e2;
    border: 2px solid #ef4444;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 600;
    color: #dc2626;
    text-align: center;
}

.candidate-reject-btn:hover {
    background: #fecaca;
    border-color: #dc2626;
}

/* Document Actions Container - Fixed to Bottom */
.document-actions-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e5e7eb;
    padding: 16px;
    padding-bottom: max(16px, calc(16px + env(safe-area-inset-bottom)));
    z-index: 100;
}

.document-actions {
    display: flex;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

.doc-action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.doc-action-btn:hover:not(:disabled) {
    border-color: #667eea;
    background: #f9fafb;
    transform: translateY(-2px);
}

.doc-action-btn:active:not(:disabled) {
    transform: translateY(0);
}

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

.doc-action-btn .btn-icon {
    font-size: 32px;
}

.doc-action-btn .btn-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

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

.doc-record-btn .btn-label {
    color: white;
}

.doc-record-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    box-shadow: 0 4px 12px rgba(118, 75, 162, 0.4);
    transform: translateY(-2px);
}

.doc-record-btn.recording {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    animation: pulse 1.5s ease-in-out infinite;
}

.doc-record-btn.recording .btn-icon {
    animation: pulse 1.5s ease-in-out infinite;
}

.doc-save-btn:not(:disabled) {
    border-color: #10b981;
}

.doc-save-btn:not(:disabled):hover {
    background: #d1fae5;
    border-color: #059669;
}

/* ========================================
   DOCUMENT MODAL
   ======================================== */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.modal:not(.hidden) {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-content h2 {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 600;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 20px;
    color: #374151;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: border-color 0.2s;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

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

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.modal-actions button {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-actions button:not(.primary) {
    background: white;
    border: 2px solid #e5e7eb;
    color: #374151;
}

.modal-actions button:not(.primary):hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.modal-actions button.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
}

.modal-actions button.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.modal-actions button.primary:active {
    transform: translateY(0);
}

/* Transcription Modal */
.transcription-modal-content {
    max-width: 95%;
    width: 100%;
}

.candidates-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 70vh;
    overflow-y: auto;
}

.candidate-btn {
    padding: 16px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s;
}

.candidate-btn:hover {
    background: #f3f4f6;
    border-color: #667eea;
}

.candidate-reject-btn {
    padding: 12px;
    background: white;
    border: 2px solid #ef4444;
    border-radius: 8px;
    color: #ef4444;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.candidate-reject-btn:hover {
    background: #fef2f2;
    border-color: #dc2626;
}

/* Recording Status Modal */
.recording-status-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.recording-status-modal.hidden {
    display: none;
}

.recording-status-content {
    background: white;
    border-radius: 16px;
    padding: 32px;
    max-width: 500px;
    width: 90%;
    text-align: center;
}

.recording-status-icon {
    font-size: 48px;
    margin-bottom: 16px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.recording-status-content h2 {
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 16px;
}

.recording-interim-text {
    min-height: 60px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.5;
    color: #6b7280;
    font-style: italic;
    margin-bottom: 16px;
}

.recording-interim-text:empty {
    display: none;
}

/* Spinner */
.spinner {
    display: inline-block;
    margin-top: 8px;
}

.spinner.hidden {
    display: none;
}

.spinner-circle {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Cancel button in recording modal */
.cancel-btn {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
}

.cancel-btn:hover {
    color: #333;
}

.cancel-btn.hidden {
    display: none;
}

/* ========================================
   QUICK SCRIBE LAYOUT
   ======================================== */

/* Wrapper for the scribe layout */
.scribe-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    /* Full height minus header */
    overflow: hidden;
    justify-content: flex-end;
    /* Push Quick Scribe to bottom */
}

/* Documents Section - Bottom 66% */
.scribe-documents-section {
    flex: 2;
    /* 66% */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 20px;
    background: white;
}

/* Section Headers */
.scribe-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.scribe-section-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

/* New Doc Button */
.new-doc-btn {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.new-doc-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.new-doc-btn:active {
    transform: translateY(0);
}

/* Documents List */
.scribe-documents-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Quick Scribe Results/Placeholder Section */
.quick-scribe-results-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    background: white;
}

.quick-scribe-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}

.quick-scribe-placeholder .placeholder-main {
    font-size: 36px;
    font-weight: 700;
    color: #333;
    margin: 0 0 20px;
    line-height: 1.3;
}

.quick-scribe-placeholder .placeholder-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: #666;
    margin: 0;
    max-width: 450px;
}

.quick-scribe-inline-results {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.quick-scribe-inline-results.hidden {
    display: none;
}

/* Quick Scribe Status Indicator (Recording/Transcribing) */
.quick-scribe-status-indicator {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    gap: 20px;
}

.quick-scribe-status-indicator .status-text {
    font-size: 32px;
    font-weight: 700;
    color: #667eea;
}

.quick-scribe-time-limit-message {
    font-size: 24px;
    font-weight: 700;
    color: #856404;
    background: #fff3cd;
    border: 3px solid #ffc107;
    border-radius: 12px;
    padding: 20px 32px;
    max-width: 600px;
    line-height: 1.4;
}

.pulsating-dots {
    display: inline-block;
    margin-left: 8px;
}

.pulsating-dots span {
    animation: dot-pulse 1.5s infinite;
    opacity: 0;
}

.pulsating-dots span:nth-child(1) {
    animation-delay: 0s;
}

.pulsating-dots span:nth-child(2) {
    animation-delay: 0.3s;
}

.pulsating-dots span:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes dot-pulse {
    0%, 20% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Quick Scribe Try Again Button */
.quick-scribe-try-again-container {
    display: flex;
    justify-content: center;
    padding: 32px 0 16px;
    margin-top: 24px;
    border-top: 2px solid #f0f0f0;
}

.quick-scribe-try-again-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 3px solid #e74c3c;
    border-radius: 12px;
    padding: 18px 48px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    color: #e74c3c;
    transition: all 0.2s;
    min-width: 280px;
    justify-content: center;
}

.quick-scribe-try-again-btn:hover {
    background: #e74c3c;
    border-color: #e74c3c;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.try-again-icon {
    font-size: 24px;
    font-weight: 700;
}

/* Quick Scribe Section - Bottom (Auto-sized with good padding) */
.quick-scribe-section {
    background: #f8f9fa;
    border-top: 2px solid #e0e0e0;
    padding: 24px 20px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
    /* Extra padding for mobile notches and comfortable spacing */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.quick-scribe-languages {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 4px 0;
}

/* Quick Scribe Language Button */
.quick-scribe-lang-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    border: none;
    border-radius: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 100px;
    flex: 1;
    max-width: 120px;
    color: white;
}

.quick-scribe-lang-btn:hover:not(:disabled) {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(118, 75, 162, 0.4);
}

.quick-scribe-lang-btn:active:not(:disabled) {
    transform: translateY(-2px);
}

.quick-scribe-lang-btn:disabled {
    cursor: not-allowed;
}

.quick-scribe-lang-btn.recording {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    animation: pulse-recording 1.5s ease-in-out infinite;
}

.quick-scribe-lang-btn.recording .mic-icon,
.quick-scribe-lang-btn.recording .lang-name {
    color: white;
}

@keyframes pulse-recording {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.quick-scribe-lang-btn .mic-icon {
    font-size: 40px;
    margin-bottom: 6px;
}

.quick-scribe-lang-btn .lang-name {
    font-size: 18px;
    font-weight: 600;
    color: white;
}

/* ========================================
   QUICK SCRIBE RESULTS VIEW
   ======================================== */

.quick-scribe-results-view {
    display: none;
    flex-direction: column;
    height: 100vh;
    overscroll-behavior-y: auto;
}

.quick-scribe-results-view:not(.hidden) {
    display: flex;
}

.quick-scribe-results-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: white;
}

/* Quick Scribe Warning Banner */
.quick-scribe-warning {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 16px;
    font-weight: 600;
    color: #856404;
    text-align: center;
}

.quick-scribe-candidate {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}

.quick-scribe-candidate-label {
    font-size: 20px;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-scribe-info-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    opacity: 0.7;
}

.quick-scribe-info-btn:hover {
    opacity: 1;
    background: rgba(102, 126, 234, 0.1);
}

.quick-scribe-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.quick-scribe-modal {
    background: white;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.quick-scribe-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quick-scribe-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #667eea;
}

.quick-scribe-modal-close {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    color: #6b7280;
    line-height: 1;
    transition: all 0.2s;
}

.quick-scribe-modal-close:hover {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

.quick-scribe-modal-body {
    padding: 24px;
}

.quick-scribe-modal-reasoning {
    font-size: 16px;
    line-height: 1.6;
    color: #374151;
    white-space: pre-wrap;
}

.quick-scribe-candidate-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.quick-scribe-candidate-text {
    flex: 1;
    font-size: 24px;
    line-height: 1.6;
    color: #333;
    user-select: text;
    font-weight: 500;
}

.quick-scribe-candidate-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.quick-scribe-candidate-btn {
    padding: 10px 20px;
    border: 2px solid #667eea;
    background: white;
    color: #667eea;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-scribe-candidate-btn:hover {
    background: #667eea;
    color: white;
}

.quick-scribe-candidate-btn:active {
    transform: scale(0.95);
}

.quick-scribe-translations-wrapper {
    margin-top: 20px;
}

.quick-scribe-translations-toggle {
    padding: 12px 20px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.quick-scribe-translations-toggle:hover {
    background: #5568d3;
}

.quick-scribe-translations-toggle:active {
    transform: scale(0.98);
}

.quick-scribe-translations {
    margin-top: 16px;
    padding-top: 20px;
    border-top: 2px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.quick-scribe-translations.collapsed {
    display: none;
}

.quick-scribe-translation {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.quick-scribe-translation-lang {
    font-size: 16px;
    font-weight: 700;
    color: #667eea;
    flex-shrink: 0;
    min-width: 80px;
}

.quick-scribe-translation-text {
    flex: 1;
    font-size: 20px;
    line-height: 1.6;
    color: #555;
    font-weight: 500;
}

.quick-scribe-translation-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.quick-scribe-translation-btn {
    padding: 8px 16px;
    border: 2px solid #667eea;
    background: white;
    color: #667eea;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.quick-scribe-translation-btn:hover {
    background: #667eea;
    color: white;
}

.quick-scribe-translation-btn:active {
    transform: scale(0.95);
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    .quick-scribe-candidate-main {
        flex-direction: column;
        align-items: stretch;
    }

    .quick-scribe-candidate-text {
        font-size: 20px;
    }

    .quick-scribe-candidate-actions {
        margin-top: 16px;
        justify-content: stretch;
        width: 100%;
    }

    .quick-scribe-candidate-btn {
        flex: 1;
        justify-content: center;
    }

    .quick-scribe-translation {
        flex-direction: column;
        align-items: stretch;
    }

    .quick-scribe-translation-lang {
        min-width: auto;
    }

    .quick-scribe-translation-text {
        font-size: 18px;
    }

    .quick-scribe-translation-actions {
        justify-content: stretch;
        width: 100%;
    }

    .quick-scribe-translation-btn {
        flex: 1;
        justify-content: center;
    }

    /* Collapsed by default on mobile */
    .quick-scribe-translations {
        display: none;
    }

    .quick-scribe-translations.expanded {
        display: flex;
    }
}

/* Desktop: expanded by default */
@media (min-width: 769px) {
    .quick-scribe-translations {
        display: flex;
    }

    .quick-scribe-translations.collapsed {
        display: none;
    }
}

/* Quick Scribe Error Styling */
.quick-scribe-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 32px;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.quick-scribe-error-message {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 40px;
    line-height: 1.4;
}

.quick-scribe-error-tips {
    text-align: left;
    width: 100%;
    margin-bottom: 40px;
}

.quick-scribe-error-tips-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px;
}

.quick-scribe-error-tips ul {
    margin: 0;
    padding-left: 24px;
    list-style-type: disc;
}

.quick-scribe-error-tips li {
    margin: 12px 0;
    font-size: 18px;
    color: #555;
    line-height: 1.5;
}

.quick-scribe-error-btn {
    padding: 16px 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-scribe-error-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.quick-scribe-error-btn:active {
    transform: translateY(0);
}

/* ========================================
   NOTES VIEW
   ======================================== */

.notes-view {
    display: none;
    flex-direction: column;
    height: 100vh;
    overscroll-behavior-y: auto;
}

.notes-view:not(.hidden) {
    display: flex;
}

.notes-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
}

.notes-documents-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.add-document-button {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.add-document-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.add-document-button:active {
    transform: scale(0.95);
}

/* ===============================================
   ARTHUR LIST EDITING MODALS
   =============================================== */

/* Arthur Modal Specific Styles */
.arthur-modal {
    max-width: 500px;
    padding: 30px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: #333;
}

/* Arthur Recording Area */
.arthur-recording-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 20px 0;
}

.arthur-record-button {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    color: white;
    border: none;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(118, 75, 162, 0.3);
    transition: all 0.3s;
}

.arthur-record-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(118, 75, 162, 0.4);
}

.arthur-record-button:active {
    transform: scale(0.95);
}

.arthur-record-button .mic-icon {
    font-size: 40px;
}

/* Recording Indicator */
.recording-indicator {
    text-align: center;
}

.pulsing-mic {
    font-size: 48px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.recording-indicator p,
.thinking-indicator p {
    margin-top: 12px;
    font-size: 16px;
    color: #667eea;
    font-weight: 600;
}

/* Thinking Indicator */
.thinking-indicator {
    text-align: center;
}

.thinking-indicator .spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

/* Arthur Examples */
.arthur-examples {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    width: 100%;
}

.arthur-examples p {
    font-weight: 600;
    margin-bottom: 12px;
    color: #333;
}

.arthur-examples ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.arthur-examples li {
    padding: 8px 0;
    color: #666;
    font-style: italic;
}

/* Mutation Preview Modal */
.mutation-preview-content {
    max-width: 600px;
}

.mutation-preview-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 0;
}

.user-said,
.arthur-will {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px;
}

.user-said strong,
.arthur-will strong {
    display: block;
    margin-bottom: 8px;
    color: #333;
}

.user-said p {
    color: #666;
    font-style: italic;
    margin: 0;
}

/* Mutations List */
.mutations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.mutation-item {
    background: white;
    border-left: 4px solid #667eea;
    padding: 12px;
    border-radius: 8px;
    font-size: 15px;
    color: #333;
}

.mutation-item.add {
    border-left-color: #10b981;
}

.mutation-item.update {
    border-left-color: #f59e0b;
}

.mutation-item.remove {
    border-left-color: #ef4444;
}

/* Mutation Warning */
.mutation-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.mutation-warning p {
    margin: 0;
    color: #856404;
    font-weight: 500;
}