@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Outfit:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--bg-canvas);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Material symbols configurations */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
    cursor: pointer;
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1;
}

/* 1. Google Workspace Loader Splash */
#workspace-splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-canvas);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#workspace-splash.fade-out {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

.splash-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

.splash-logo {
    display: flex;
    align-items: center;
    font-size: 32px;
    font-weight: 500;
    color: var(--text-primary);
    gap: 8px;
}

.splash-logo img {
    height: 48px;
}

.splash-logo-text {
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.5px;
}

.splash-logo-text span {
    color: #4285f4;
    font-weight: 600;
}

.loader-bar {
    position: relative;
    width: 250px;
    height: 4px;
    background-color: var(--border-color);
    border-radius: var(--border-radius-pill);
    overflow: hidden;
}

.loader-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--loader-blue), var(--loader-red), var(--loader-yellow), var(--loader-green));
    background-size: 400% 100%;
    animation: gradientShift 2s linear infinite, fillProgress 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes fillProgress {
    0% { width: 0%; }
    20% { width: 30%; }
    50% { width: 60%; }
    80% { width: 85%; }
    100% { width: 100%; }
}

.splash-footer {
    position: absolute;
    bottom: 30px;
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 6px;
}

.splash-footer-google {
    font-weight: 500;
    letter-spacing: -0.2px;
}

.splash-footer-google span:nth-child(1) { color: #4285f4; }
.splash-footer-google span:nth-child(2) { color: #ea4335; }
.splash-footer-google span:nth-child(3) { color: #fbbc05; }
.splash-footer-google span:nth-child(4) { color: #4285f4; }
.splash-footer-google span:nth-child(5) { color: #34a853; }
.splash-footer-google span:nth-child(6) { color: #ea4335; }


/* 2. Login Portal Settings */
#login-portal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-canvas);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#login-portal.hidden {
    display: none;
}

.login-card {
    background-color: var(--bg-surface);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 480px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.4s cubic-bezier(0, 0, 0.2, 1);
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header img {
    height: 40px;
    margin-bottom: 12px;
}

.login-header h2 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.login-header p {
    font-size: 14px;
    color: var(--text-secondary);
}

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

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text-secondary);
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(11, 87, 208, 0.15);
}

.btn-primary {
    background-color: var(--accent-blue);
    color: #ffffff;
    border: none;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--border-radius-pill);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    width: 100%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary:hover {
    background-color: var(--accent-blue-hover);
}

.btn-primary:active {
    transform: scale(0.98);
}

.error-message {
    color: #d93025;
    background-color: rgba(217, 48, 37, 0.05);
    border: 1px solid rgba(217, 48, 37, 0.2);
    padding: 12px;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    margin-bottom: 20px;
    display: none;
    align-items: center;
    gap: 8px;
}

.login-info-box {
    background-color: var(--hover-row);
    padding: 12px;
    border-radius: var(--border-radius-sm);
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 20px;
    border-left: 3px solid var(--accent-blue);
}

.login-info-box strong {
    color: var(--text-secondary);
}


/* 3. Main Dashboard Layout */
.app-container {
    display: grid;
    grid-template-rows: var(--header-height) 1fr;
    grid-template-columns: var(--minibar-width) var(--sidebar-width) 1fr 280px; /* Minibar, Sidebar, Content, RightSidebar */
    height: 100vh;
    width: 100vw;
}

/* Header */
header {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    height: var(--header-height);
    background-color: var(--bg-canvas);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    transition: background-color 0.25s, border-color 0.25s;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-logo {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
    gap: 8px;
    cursor: pointer;
}

.header-logo img {
    height: 24px;
}

.header-logo span {
    color: var(--text-secondary);
}

.header-logo strong {
    color: var(--text-primary);
    font-weight: 500;
}

.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: none;
    color: var(--text-primary);
    transition: background-color 0.2s;
}

.btn-icon:hover {
    background-color: var(--header-btn-hover);
}

.header-center {
    flex: 0 1 720px;
    display: flex;
    align-items: center;
    background-color: var(--hover-row);
    border-radius: var(--border-radius-pill);
    padding: 0 16px;
    height: 48px;
    gap: 12px;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.header-center:focus-within {
    background-color: var(--bg-surface);
    box-shadow: 0 1px 1px 0 rgba(65,69,73,0.3), 0 1px 3px 1px rgba(65,69,73,0.15);
}

.header-center input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 16px;
    color: var(--text-primary);
}

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

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-pill);
    background-color: var(--accent-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Sidebar Left */
.sidebar-left {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background-color: var(--bg-sidebar);
    padding: 8px 12px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    transition: background-color 0.25s;
    border-right: 1px solid var(--border-color);
}

.btn-compose {
    background-color: var(--compose-bg);
    color: var(--compose-text);
    border: none;
    border-radius: var(--border-radius-md);
    padding: 16px 24px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.2s, box-shadow 0.2s;
    align-self: flex-start;
    margin: 8px 0 16px 4px;
}

.btn-compose:hover {
    background-color: var(--compose-hover);
    box-shadow: var(--shadow-md);
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    padding: 0 12px 0 16px;
    border-radius: var(--border-radius-pill);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 400;
    transition: background-color 0.15s, color 0.15s;
    margin-bottom: 2px;
}

.menu-item-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.menu-item:hover {
    background-color: var(--hover-row);
    color: var(--text-primary);
}

.menu-item.active {
    background-color: var(--bg-active-pill);
    color: var(--text-active-pill);
    font-weight: 500;
}

.menu-item.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

.menu-badge {
    font-size: 12px;
    font-weight: 500;
    background-color: transparent;
    padding: 2px 6px;
    border-radius: 10px;
}

.sidebar-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 12px 0;
}

/* Sidebar Company (Bedrijven) Section */
.company-section-title {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.company-section-title .btn-add-company {
    cursor: pointer;
    font-size: 18px;
}

.company-list {
    display: flex;
    flex-direction: column;
}

.company-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--border-radius-pill);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 14px;
    transition: background-color 0.15s;
}

.company-item:hover {
    background-color: var(--hover-row);
    color: var(--text-primary);
}

.company-item.active {
    background-color: var(--selected-row);
    color: var(--accent-blue);
    font-weight: 500;
}

.company-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 12px;
}

/* Mail Content Viewport */
.content-area {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    background-color: var(--bg-surface);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    margin-top: 8px;
    margin-right: 8px;
    border: 1px solid var(--border-color);
    border-bottom: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: background-color 0.25s, border-color 0.25s;
}

.action-bar {
    height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.action-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Mail List Container */
.mail-list-viewport {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.mail-list-viewport::-webkit-scrollbar {
    width: 8px;
}

.mail-list-viewport::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.15);
    border-radius: 4px;
}

.mail-list-viewport::-webkit-scrollbar-track {
    background: transparent;
}

.dark-theme .mail-list-viewport::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.15);
}

/* Mail Row Layout */
.mail-row {
    display: flex;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid var(--border-color);
    padding: 0 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    position: relative;
    user-select: none;
}

.mail-row:hover {
    background-color: var(--hover-row);
    box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
    z-index: 1;
}

.dark-theme .mail-row:hover {
    box-shadow: inset 1px 0 0 #3c4043, inset -1px 0 0 #3c4043, 0 1px 3px 0 rgba(0,0,0,0.3), 0 4px 8px 3px rgba(0,0,0,0.15);
}

.mail-row.unread {
    font-weight: 600;
}

.mail-row.selected {
    background-color: var(--selected-row);
}

.mail-col-select {
    width: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.btn-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 20px;
    font-size: 20px !important;
}

.mail-col-select input[type="checkbox"] {
    cursor: pointer;
    width: 15px;
    height: 15px;
}

.mail-col-sender {
    width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 12px;
}

.mail-col-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
}

.mail-subject {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    max-width: 40%;
}

.mail-snippet {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

.mail-col-date {
    width: 90px;
    text-align: right;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Mail Row Hover Actions */
.mail-row-actions {
    display: none;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--hover-row);
    padding-left: 12px;
    height: 100%;
    align-items: center;
    gap: 4px;
}

.mail-row.selected .mail-row-actions {
    background-color: var(--selected-row);
}

.mail-row:hover .mail-row-actions {
    display: flex;
}

.mail-row:hover .mail-col-date {
    display: none;
}


/* 4. Reading View Layout */
.email-detail-view {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.email-detail-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.email-detail-subject {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 16px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.email-detail-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.email-detail-sender {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sender-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e8f0fe;
    color: #1a73e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 18px;
}

.sender-details {
    display: flex;
    flex-direction: column;
}

.sender-name {
    font-weight: 500;
    font-size: 14px;
}

.sender-email {
    font-size: 12px;
    color: var(--text-muted);
}

.email-detail-time {
    font-size: 12px;
    color: var(--text-muted);
}

.email-detail-body-container {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background-color: var(--bg-surface);
}

.email-body-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #ffffff; /* keep html email body white for standard mail viewing */
    border-radius: var(--border-radius-sm);
}

.email-detail-attachments {
    border-top: 1px solid var(--border-color);
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attachment-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.attachment-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--hover-row);
    padding: 8px 16px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    cursor: pointer;
    max-width: 250px;
    transition: background-color 0.2s;
}

.attachment-card:hover {
    background-color: var(--border-color);
}

.attachment-card span {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* 5. Floating Compose Modal */
.compose-modal {
    position: fixed;
    bottom: 0;
    right: 80px;
    width: 500px;
    height: 480px;
    background-color: var(--bg-surface);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    display: none;
    flex-direction: column;
    z-index: 1000;
    overflow: hidden;
}

.compose-modal.minimized {
    height: 40px;
}

.compose-header {
    background-color: var(--bg-canvas);
    height: 40px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.compose-header span {
    font-size: 14px;
    font-weight: 500;
}

.compose-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.compose-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    overflow: hidden;
}

.compose-input-row {
    display: flex;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.compose-input-row label {
    width: 60px;
    color: var(--text-muted);
}

.compose-input-row input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    color: var(--text-primary);
    font-size: 14px;
}

.compose-text-area {
    flex: 1;
    border: none;
    resize: none;
    outline: none;
    padding: 16px 0;
    font-size: 14px;
    background: transparent;
    color: var(--text-primary);
}

.compose-footer {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border-color);
    padding: 0 16px;
    background-color: var(--bg-canvas);
}

.btn-send {
    background-color: var(--accent-blue);
    color: white;
    border: none;
    border-radius: var(--border-radius-pill);
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-send:hover {
    background-color: var(--accent-blue-hover);
}


/* 6. Settings Modal / Sidebar Right Integrations */
.sidebar-right {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
    background-color: var(--bg-canvas);
    border-left: 1px solid var(--border-color);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    transition: background-color 0.25s, border-color 0.25s;
}

.widget-card {
    background-color: var(--bg-surface);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.widget-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.widget-content {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Account Config switcher pane */
.accounts-config-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.accounts-config-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--hover-row);
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
}

.accounts-config-item.active {
    border: 1px solid var(--accent-blue);
    background-color: var(--selected-row);
}

.accounts-config-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}

.accounts-config-item .btn-remove-account {
    cursor: pointer;
    color: var(--text-muted);
}

.accounts-config-item .btn-remove-account:hover {
    color: #ea4335;
}

.no-emails-msg {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.no-emails-msg span {
    font-size: 48px;
}

/* Collapsed sidebar states for desktop viewports */
.app-container.collapsed {
    grid-template-columns: var(--minibar-width) 72px 1fr 280px;
}
.app-container.collapsed .sidebar-left {
    padding: 8px 4px;
    align-items: center;
}
.app-container.collapsed .btn-compose {
    padding: 12px;
    border-radius: var(--border-radius-pill);
    margin: 8px 0;
}
.app-container.collapsed .btn-compose span:last-child {
    display: none;
}
.app-container.collapsed .sidebar-menu .menu-item {
    justify-content: center;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.app-container.collapsed .sidebar-menu .menu-item-left {
    gap: 0;
}
.app-container.collapsed .sidebar-menu .menu-item span:last-child,
.app-container.collapsed .sidebar-menu .menu-badge,
.app-container.collapsed .company-section-title,
.app-container.collapsed .company-list {
    display: none;
}

/* Responsive: Tablet (hide right sidebar, keep minibar + sidebar + content) */
@media (max-width: 1024px) {
    .app-container {
        grid-template-columns: var(--minibar-width) var(--sidebar-width) 1fr;
    }
    .sidebar-right {
        display: none;
    }
    .content-area {
        grid-column: 3 / 4;
        margin-right: 8px;
    }
    .header-center {
        flex: 0 1 480px;
    }
}

/* Custom Multi-Account & Company styles */
.mail-row-company-indicator {
    width: 5px;
    height: 24px;
    border-radius: var(--border-radius-pill);
    margin-right: 8px;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

.mail-badge-company {
    font-size: 10px;
    font-weight: 500;
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-family: inherit;
    letter-spacing: 0.3px;
    display: inline-block;
    flex-shrink: 0;
}

/* Style active state of circular color radio button checks */
.color-radio input[type="radio"]:checked {
    opacity: 1 !important;
    accent-color: #ffffff;
    transform: scale(0.6);
    outline: 2px solid #ffffff;
}

.tab-btn {
    transition: border-bottom-color 0.2s, color 0.2s;
}

.tab-btn:hover {
    color: var(--text-primary) !important;
}

/* Google API widgets styling */
.google-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 5px;
}

.google-item-card {
    background-color: var(--hover-row);
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: var(--border-radius-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.google-item-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.google-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.google-item-desc {
    font-size: 11px;
}

/* Brand logo Google-style colors mapping */
.brand-logo-text, .splash-brand-letters {
    font-weight: 500;
    letter-spacing: -0.5px;
    font-family: 'Outfit', sans-serif;
    white-space: nowrap; /* Prevent wrapping */
    display: inline-block;
    vertical-align: middle;
}

.brand-logo-text {
    color: var(--text-muted); /* Color "van" gray */
}

.brand-logo-text span:nth-child(5n+1), .splash-brand-letters span:nth-child(5n+1) { color: #4285f4; font-weight: 600; } /* K - Blue */
.brand-logo-text span:nth-child(5n+2), .splash-brand-letters span:nth-child(5n+2) { color: #ea4335; font-weight: 600; } /* u - Red */
.brand-logo-text span:nth-child(5n+3), .splash-brand-letters span:nth-child(5n+3) { color: #fbbc05; font-weight: 600; } /* n - Yellow */
.brand-logo-text span:nth-child(5n+4), .splash-brand-letters span:nth-child(5n+4) { color: #4285f4; font-weight: 600; } /* s - Blue */
.brand-logo-text span:nth-child(5n+5), .splash-brand-letters span:nth-child(5n+5) { color: #34a853; font-weight: 600; } /* t - Green */

/* Brand logo Google-style color coding for VB */
.brand-logo-text-letters span:nth-child(2n+1) { color: #4285f4; font-weight: 600; } /* V - Blue */
.brand-logo-text-letters span:nth-child(2n+2) { color: #ea4335; font-weight: 600; } /* B - Red */

/* Google Workspace-style coloring for PixelPiraterij splash footer */
.splash-footer-google span:nth-child(4n+1) { color: #4285f4; font-weight: 600; }
.splash-footer-google span:nth-child(4n+2) { color: #ea4335; font-weight: 600; }
.splash-footer-google span:nth-child(4n+3) { color: #fbbc05; font-weight: 600; }
.splash-footer-google span:nth-child(4n+4) { color: #34a853; font-weight: 600; }


/* -------------------------------------------------------------
   NEW GOOGLE WORKSPACE ENTERPRISE HUB COMPONENT STYLES
   ------------------------------------------------------------- */

/* Minibar Left Edge Navigation */
.minibar {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    background-color: var(--bg-canvas);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    gap: 16px;
    width: var(--minibar-width);
    flex-shrink: 0;
    z-index: 10;
    transition: background-color 0.25s, border-color 0.25s;
}

.minibar-btn {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    width: var(--minibar-width);
    height: 64px;
    font-size: 12px;
    font-weight: 500;
    transition: color 0.2s;
    outline: none;
}

.minibar-btn .material-symbols-outlined {
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 32px;
    border-radius: 16px;
    transition: background-color 0.2s, color 0.2s;
}

.minibar-btn:hover .material-symbols-outlined {
    background-color: var(--hover-row);
    color: var(--text-primary);
}

.minibar-btn.active .material-symbols-outlined {
    background-color: var(--bg-active-pill);
    color: var(--text-active-pill);
    font-variation-settings: 'FILL' 1;
}

.minibar-btn span:not(.material-symbols-outlined) {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 500;
    transition: color 0.2s, font-weight 0.2s;
}

.minibar-btn.active span:not(.material-symbols-outlined) {
    color: var(--text-active-pill);
    font-weight: 600;
}

/* Submenu Headers */
.sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-section-header .material-symbols-outlined:hover {
    color: var(--text-primary);
}

/* Viewport Panels */
.viewport-panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Chat Layout styles */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
    background-color: var(--bg-surface);
}

.chat-header {
    height: 56px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
    background-color: var(--bg-canvas);
    font-weight: 500;
    font-size: 16px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-bubble {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-bubble.incoming {
    background-color: var(--hover-row);
    color: var(--text-primary);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.chat-bubble.outgoing {
    background-color: var(--accent-blue);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.chat-bubble-meta {
    font-size: 10px;
    opacity: 0.7;
    align-self: flex-end;
}

.chat-input-area {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 12px;
    background-color: var(--bg-canvas);
    align-items: center;
}

.chat-input-area input {
    flex: 1;
    padding: 12px 16px;
    border-radius: var(--border-radius-pill);
    border: 1px solid var(--border-color);
    background-color: var(--bg-surface);
    color: var(--text-primary);
    outline: none;
    font-size: 14px;
    transition: border-color 0.2s;
}

.chat-input-area input:focus {
    border-color: var(--accent-blue);
}

.btn-send-message {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--accent-blue);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.btn-send-message:hover {
    background-color: var(--accent-blue-hover);
}

/* Spaces Split Screen Layout */
.spaces-split-screen {
    display: flex;
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
}

.space-chat-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-right: 1px solid var(--border-color);
}

.space-editor-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--bg-canvas);
    animation: slideLeft 0.3s cubic-bezier(0, 0, 0.2, 1);
}

@keyframes slideLeft {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.editor-header {
    height: 48px;
    border-bottom: 1px solid var(--border-color);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg-surface);
}

.editor-doc-title {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
}

.editor-body {
    flex: 1;
    overflow: auto;
    padding: 16px;
    background-color: var(--bg-surface);
}

/* Shared Docs Grid */
.space-shared-docs {
    width: 100%;
    margin-top: 8px;
}

.space-docs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.space-doc-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    background-color: var(--hover-row);
    border: 1px solid var(--border-color);
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.space-doc-chip:hover {
    background-color: var(--border-color);
}

.space-doc-chip.xlsx span:first-child { color: #34a853; }
.space-doc-chip.docx span:first-child { color: #4285f4; }

/* Spreadsheet Grid Editor */
.sheet-editor-grid {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
    background-color: var(--bg-surface);
}

.sheet-editor-grid th, .sheet-editor-grid td {
    border: 1px solid var(--border-color);
    padding: 6px;
    min-width: 60px;
    text-align: left;
}

.sheet-editor-grid th {
    background-color: var(--hover-row);
    text-align: center;
    font-weight: 500;
    color: var(--text-secondary);
}

.sheet-editor-grid td input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: var(--text-primary);
}

.sheet-editor-grid td input:focus {
    background-color: rgba(26, 115, 232, 0.05);
    outline: 1px solid var(--accent-blue);
}

/* Rich Doc Editor */
.doc-editor-textarea {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border: none;
    resize: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    font-family: inherit;
}

/* Meet Setup and Call UI */
.meet-setup-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    background-color: var(--bg-surface);
}

.meet-card {
    max-width: 480px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.meet-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgba(26, 115, 232, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.meet-actions-row {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.meet-join-input-group {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0 12px;
    background-color: var(--bg-canvas);
    height: 40px;
}

.meet-join-input-group input {
    border: none;
    background: transparent;
    outline: none;
    padding: 8px;
    color: var(--text-primary);
    font-size: 14px;
    width: 180px;
}

/* Meet Active Call Overlay */
.meet-call-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #111111;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.meet-video-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 24px;
}

.video-tile {
    background-color: #202124;
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.video-tile .avatar-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #1a73e8;
    color: white;
    font-size: 32px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-label {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.meet-controls {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background-color: #111111;
}

.call-control {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #3c4043;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.call-control:hover {
    background-color: #4f5357;
}

.call-control.hangup {
    background-color: #ea4335;
}

.call-control.hangup:hover {
    background-color: #da3025;
}

/* Google Keep Widget styles */
.keep-add-note {
    background-color: var(--hover-row);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.keep-add-note input, .keep-add-note textarea {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-size: 12px;
    color: var(--text-primary);
}

.keep-add-note textarea {
    height: 40px;
    resize: none;
}

.keep-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.keep-color-options {
    display: flex;
    gap: 4px;
}

.keep-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid transparent;
}

.keep-color-dot.active {
    border-color: var(--text-primary);
}

.keep-notes-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
}

.keep-note-card {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    transition: transform 0.2s;
}

.keep-note-card:hover {
    transform: translateY(-1px);
}

.keep-note-title {
    font-weight: 600;
    font-size: 12px;
    color: #333333;
}

.keep-note-body {
    font-size: 11px;
    color: #444444;
    white-space: pre-wrap;
}

.btn-delete-keep {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 16px !important;
    color: var(--text-muted);
    cursor: pointer;
}

.btn-delete-keep:hover {
    color: #ea4335;
}

/* Gemini Drawer Panel */
.gemini-drawer {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    width: 320px;
    background-color: var(--bg-surface);
    border-left: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    z-index: 95;
    display: flex;
    flex-direction: column;
    animation: slideLeft 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.gemini-drawer-header {
    height: 56px;
    border-bottom: 1px solid var(--border-color);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg-canvas);
}

.gemini-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gemini-bubble {
    padding: 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
    max-width: 85%;
}

.gemini-bubble.ai {
    background-color: rgba(26, 115, 232, 0.08);
    color: var(--text-primary);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
}

.gemini-bubble.user {
    background-color: var(--hover-row);
    color: var(--text-primary);
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

.gemini-drawer-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 8px;
    background-color: var(--bg-canvas);
    align-items: center;
}

.gemini-drawer-footer input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-surface);
    color: var(--text-primary);
    outline: none;
    font-size: 13px;
}

/* Settings Modal Styles */
.settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-card {
    width: 720px;
    height: 480px;
    background-color: var(--bg-surface);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.settings-header {
    height: 56px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-canvas);
}

.settings-header h2 {
    font-size: 18px;
    font-weight: 500;
}

.settings-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.settings-tabs-side {
    width: 200px;
    border-right: 1px solid var(--border-color);
    background-color: var(--bg-canvas);
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 4px;
}

.settings-tab-btn {
    text-align: left;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-pill);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.settings-tab-btn:hover {
    background-color: var(--hover-row);
}

.settings-tab-btn.active {
    background-color: var(--bg-active-pill);
    color: var(--text-active-pill);
}

.settings-tab-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.settings-pane h3 {
    font-size: 15px;
    margin-bottom: 16px;
    font-weight: 500;
    color: var(--text-primary);
}

.settings-account-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.settings-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 13px;
}

/* Apps Grid Launcher Popover */
.apps-launcher-popover {
    position: fixed;
    top: 52px;
    right: 48px;
    width: 320px;
    height: 380px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    z-index: 1010;
    padding: 16px;
    overflow-y: auto;
}

.apps-launcher-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.launcher-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 4px;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.launcher-app:hover {
    background-color: var(--hover-row);
}

.launcher-app span {
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.launcher-app-icon {
    font-size: 32px;
    transition: transform 0.2s;
}

/* Real Google product logos (img) in the apps launcher */
img.launcher-app-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

.launcher-app:hover .launcher-app-icon {
    transform: scale(1.08);
}

/* Google Dashboard Mock views (Ads, Analytics, Sites) */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    padding: 20px;
}

.dashboard-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashboard-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.dashboard-card-value {
    font-size: 28px;
    font-weight: 500;
    color: var(--text-primary);
}

.dashboard-card-desc {
    font-size: 11px;
    color: var(--text-muted);
}

.dashboard-chart-box {
    height: 120px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding-top: 20px;
}

.chart-bar {
    flex: 1;
    background-color: var(--accent-blue);
    border-radius: 2px 2px 0 0;
    min-height: 10px;
    transition: height 0.5s ease-out;
}

/* Sites template selection cards */
.sites-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    padding: 20px;
}

.site-template-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background-color: var(--bg-surface);
    transition: transform 0.2s, border-color 0.2s;
}

.site-template-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-blue);
}

.site-template-preview {
    height: 100px;
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.1), rgba(0, 191, 165, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.site-template-info {
    padding: 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

/* -------------------------------------------------------------
   MOBILE VIEWPORT SUPPORT OVERRIDES
   ------------------------------------------------------------- */
@media (max-width: 768px) {
    .app-container {
        grid-template-columns: 0px 0px 1fr 0px; /* Hide both sidebars and minibar, full width content */
    }
    
    /* Minibar hides completely and shows as bottom navigation on mobile */
    .minibar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 60px;
        flex-direction: row;
        justify-content: space-around;
        padding: 0;
        border-right: none;
        border-top: 1px solid var(--border-color);
        background-color: var(--bg-canvas);
        z-index: 1000;
    }
    
    .minibar-btn {
        width: 25%;
        height: 100%;
        border-radius: 0;
    }

    /* Left Sidebar overlays as drawer on click */
    .sidebar-left {
        position: fixed;
        left: -280px;
        top: var(--header-height);
        bottom: 60px;
        width: 280px;
        z-index: 999;
        background-color: var(--bg-surface);
        box-shadow: var(--shadow-md);
        transition: left 0.3s ease;
    }

    .app-container.collapsed .sidebar-left {
        left: 0px;
    }

    /* Right sidebar widgets overlays as drawer or hidden */
    .sidebar-right {
        display: none;
    }

    /* Adjust Content spacing to accommodate bottom bar */
    .content-area {
        margin: 0;
        border: none;
        padding-bottom: 60px;
    }

    .chat-bubble {
        max-width: 85%;
    }

    /* Split screen spaces shifts to top/bottom layout or full page stack */
    .spaces-split-screen {
        flex-direction: column;
    }

    .space-chat-pane {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        height: 50% !important;
    }

    .space-editor-pane {
        height: 50% !important;
    }

    /* Modal adjustments */
    .settings-card {
        width: 95vw;
        height: 90vh;
    }

    .settings-body {
        flex-direction: column;
    }

    .settings-tabs-side {
        width: 100%;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        overflow-x: auto;
    }

    .settings-tab-btn {
        border-radius: 0;
        white-space: nowrap;
    }

    .apps-launcher-popover {
        right: 8px;
        left: 8px;
        width: auto;
    }
}

/* Weed Theme Easter Egg styling */
@keyframes greenPulse {
    0% { box-shadow: 0 0 0 0 rgba(82, 183, 136, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(82, 183, 136, 0); }
    100% { box-shadow: 0 0 0 0 rgba(82, 183, 136, 0); }
}

@keyframes spinHold {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1.15) rotate(360deg); }
}

.btn-icon.holding-weed {
    animation: greenPulse 1.5s infinite, spinHold 10s linear forwards !important;
    background-color: rgba(82, 183, 136, 0.2) !important;
    color: #52b788 !important;
}

@keyframes floatLeaf {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-105vh) rotate(360deg);
        opacity: 0;
    }
}

.weed-leaf-particle {
    position: fixed;
    bottom: -50px;
    z-index: 9998;
    pointer-events: none;
    user-select: none;
}

/* --- 2FA Verification Portal CSS --- */
#twofactor-portal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-canvas);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

#twofactor-portal .login-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    animation: slideUp 0.3s cubic-bezier(0, 0, 0.2, 1);
}

/* --- Offline Warning Banner CSS --- */
#offline-banner {
    width: 100%;
    background-color: #d93025;
    color: white;
    text-align: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    display: none; /* Controlled by JS */
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 10001;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* --- Gemini Shimmer Thinking CSS --- */
.gemini-bubble.ai.shimmer {
    background: linear-gradient(90deg, rgba(26, 115, 232, 0.08) 25%, rgba(26, 115, 232, 0.18) 37%, rgba(26, 115, 232, 0.08) 63%);
    background-size: 400% 100%;
    animation: shimmerWave 1.4s ease infinite;
    min-width: 140px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
}

@keyframes shimmerWave {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.shimmer-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.shimmer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #1a73e8;
    opacity: 0.4;
    animation: shimmerBounce 1.4s infinite both;
}

.shimmer-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.shimmer-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes shimmerBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1.2); opacity: 1; }
}

/* --- Google Sites Click-to-Edit Builder CSS --- */
.sites-editor-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--bg-canvas);
    font-family: 'Outfit', 'Roboto', sans-serif;
}

.sites-editor-toolbar {
    height: 52px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-surface);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    flex-shrink: 0;
}

.sites-editor-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.sites-editor-canvas {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background-color: var(--bg-canvas);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sites-editor-sidebar {
    width: 240px;
    border-left: 1px solid var(--border-color);
    background-color: var(--bg-surface);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
    overflow-y: auto;
}

.sites-canvas-page {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.sites-canvas-banner {
    padding: 40px 24px;
    color: white;
    background: linear-gradient(135deg, #00bfa5, #00796b);
    text-align: center;
    position: relative;
}

.sites-canvas-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
}

.sites-editor-section {
    border: 1px solid transparent;
    padding: 12px;
    border-radius: 6px;
    position: relative;
    transition: background-color 0.15s, border-color 0.15s;
}

.sites-editor-section:hover {
    border-color: rgba(0, 191, 165, 0.3);
    background-color: rgba(0, 191, 165, 0.02);
}

.sites-section-actions {
    position: absolute;
    right: 8px;
    top: 8px;
    display: none;
    gap: 4px;
}

.sites-editor-section:hover .sites-section-actions {
    display: flex;
}

.sites-editable[contenteditable="true"] {
    transition: outline 0.15s, background-color 0.15s;
}

.sites-editable[contenteditable="true"]:hover {
    outline: 2px dashed #00bfa5;
    outline-offset: 4px;
    cursor: text;
}

.sites-editable[contenteditable="true"]:focus {
    outline: 2px solid #00bfa5;
    outline-offset: 4px;
    background-color: rgba(0, 191, 165, 0.05);
}

.sites-sidebar-widget {
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    background-color: var(--hover-row);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    transition: border-color 0.2s, background-color 0.2s;
}

.sites-sidebar-widget:hover {
    border-color: #00bfa5;
    background-color: var(--bg-surface);
}

.sites-sidebar-widget span.material-symbols-outlined {
    color: #00bfa5;
    font-size: 22px;
}

.sites-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
    padding: 0 20px 20px 20px;
}

.site-template-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}

.site-template-card:hover {
    transform: translateY(-2px);
    border-color: #00bfa5;
}

.site-template-preview {
    height: 80px;
    background-color: var(--hover-row);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

.site-template-info {
    padding: 8px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    color: var(--text-primary);
}


/* =============================================================
   POLISH PASS — crispness, accessibility, phone-proof layout
   (Loaded last so it wins on equal specificity.)
   ============================================================= */

/* Crisp, keyboard-visible focus rings (a11y + premium feel) */
:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
    border-radius: 6px;
}
.btn-icon:focus-visible,
.menu-item:focus-visible,
.minibar-btn:focus-visible {
    outline-offset: -2px;
}
/* Don't double up on mouse focus for inputs that already style :focus */
.header-center input:focus-visible,
.form-group input:focus-visible { outline: none; }

/* Subtle depth so the mail surface lifts off the canvas (Workspace-accurate) */
.content-area { box-shadow: 0 1px 2px rgba(60,64,67,0.06); }
.dark-theme .content-area,
.weed-theme .content-area { box-shadow: none; }

/* Search field reads a touch crisper */
.header-center input { font-size: 15px; letter-spacing: 0.1px; }

/* Avatar gets a hairline ring for definition */
.user-avatar { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }

/* Mobile drawer backdrop (created in app.js, sibling of .app-container) */
#mobile-drawer-backdrop { display: none; }

/* -------- Phone (<= 768px) -------- */
@media (max-width: 768px) {
    /* Tighter header that never overflows a phone */
    header { padding: 0 8px; }
    .header-left { gap: 8px; }
    .header-logo { font-size: 18px; }
    .header-logo img { height: 20px; }
    .header-right { gap: 2px; }
    /* Keep only the essentials in the top bar; the rest lives in the bottom nav / menus */
    #apps-launcher-btn { display: none; }
    /* Search collapses on the narrowest screens */
    .header-center { flex: 1; min-width: 0; height: 42px; }

    /* Drawer backdrop appears only while the sidebar drawer is open */
    .app-container.collapsed ~ #mobile-drawer-backdrop {
        display: block;
        position: fixed;
        inset: var(--header-height) 0 60px 0;
        background: rgba(0,0,0,0.45);
        z-index: 998;
        animation: fadeBackdrop 0.2s ease;
    }
    @keyframes fadeBackdrop { from { opacity: 0; } to { opacity: 1; } }

    /* Denser mail rows so subject + date fit on a phone */
    .mail-col-sender { width: 120px; }
    .mail-subject { max-width: 55%; }
    .mail-snippet { display: none; }
    .mail-col-date { width: 64px; }

    /* Compose goes full-screen instead of a 500px panel hanging off-screen */
    .compose-modal {
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: calc(100% - var(--header-height));
        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    }
    .compose-modal.minimized { height: 40px; top: auto; }

    /* Gemini Q&A drawer spans the screen on mobile */
    .gemini-drawer { width: 100vw; left: 0; }

    /* Apps launcher popover fills the width neatly */
    .apps-launcher-popover { top: var(--header-height); right: 8px; left: 8px; width: auto; }

    /* Reading view breathes a bit less on small screens */
    .email-detail-header { padding: 16px; }
    .email-detail-body-container { padding: 16px; }
    .email-detail-subject { font-size: 19px; }
}

/* -------- Small phone (<= 480px): drop the search, lean on AI + menus -------- */
@media (max-width: 480px) {
    .header-center { display: none; }
    .header-logo .brand-logo-text { display: none; }
}