:root {
    --primary: #18181b;
    --primary-hover: #000000;
    --bg-color: #f8f8f9;
    --surface: #ffffff;
    --text-main: #09090b;
    --text-muted: #64748b;
    --border: rgba(0, 0, 0, 0.08);
    --unread: #2563eb;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-color);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: fixed;
    width: 100%;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.app-container {
    max-width: 600px;
    margin: 0 auto;
    height: 100%;
    background: var(--bg-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.view-section {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.view-section.hidden {
    display: none !important;
}

/* Dark Mode Overrides */
body.dark-mode {
    --bg-color: #0c0c0e;
    --surface: #18181b;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border: rgba(255, 255, 255, 0.1);
}

.hidden {
    display: none !important;
}

/* --- UI Components (from components.css) --- */

.top-bar {
    padding: calc(0.6rem + env(safe-area-inset-top)) 0.6rem 0.1rem 0.6rem;
    background: var(--bg-color);
    z-index: 20;
    flex-shrink: 0;
    position: sticky;
    top: 0;
}

.search-box-container {
    height: 44px;
    width: 100%;
}

.search-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.search-input {
    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0 3rem 0 1.2rem;
    font-size: 0.95rem;
    color: var(--text-main);
}

.search-input:focus {
    outline: none;
}

.input-icon-container {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn {
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: all 0.2s;
    border-radius: 50%;
}

.icon-btn:hover {
    color: var(--primary);
    background: rgba(0, 0, 0, 0.03);
}

.board-list {
    padding: 0 0.6rem 0.6rem 0.6rem;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/*### Smart Navigation for Controls
- **Context-Aware Toggling**: Fixed a bug where muting notifications from a board's detail view would kick the user back to the home screen. The app now intelligently stays on the current page when you toggle settings, only refreshing the main list if you are actually looking at it.
- **Delete remains decisive**: Deleting a board still correctly returns you to the list view, as the current board no longer exists.

### Verification Results
- **Detail View Stability**: Verified that toggling Mute/Unmute from the board footer now keeps the user on the detail page.
- **List View Sync**: Confirmed that toggling Mute/Unmute from the home screen still correctly updates the bell icon instantly.
*/
.board-card {
    background: var(--surface);
    padding: 1rem 1.2rem;
    margin-bottom: 0px;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    border: none;
    border-bottom: 2px solid var(--border);
    /* Slightly thicker line for better separation */
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

/* First card rounded top, last card rounded bottom */
.board-card:first-of-type {
    border-radius: 16px 16px 0 0;
}

.board-card:last-of-type {
    border-radius: 0 0 16px 16px;
    border-bottom: none;
    margin-bottom: 1rem;
}

.board-card:active {
    transform: scale(0.98);
    background: var(--bg-color);
}

.board-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.15);
}

.unread-dot {
    width: 6px;
    height: 6px;
    background: var(--unread);
    border-radius: 50%;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.board-meta-container {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.date-text {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.board-id {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.board-card.unread {
    border-left: 3px solid var(--unread);
}

.board-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.board-row-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.2rem;
    gap: 0.5rem;
    min-width: 0;
}

.board-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow: hidden;
}

.board-title span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.board-title svg {
    flex-shrink: 0;
    color: var(--primary);
    /* Use primary color to make it visible */
    opacity: 0.8;
    transition: opacity 0.2s;
}

.board-card:hover .board-title svg {
    opacity: 1;
}

.version-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    background-color: #e4e4e7;
    color: #52525b;
}

.board-card.unread .version-badge {
    background-color: var(--unread);
    color: white;
}

.pull-hint-text {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    background: #52525b;
    /* Matches coach mark */
    padding: 0.4rem 0.8rem;
    border-radius: 99px;
    width: auto;
    position: absolute;
    top: 4.3rem;
    /* Adjusted for centered peek visibility */
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.peek-down~.pull-hint-text {
    opacity: 1;
}

.board-list.hide-hint .pull-hint-text {
    display: none;
}

.board-view {
    display: flex;
    flex-direction: column;
    height: calc(100% - 1.2rem);
    width: calc(100% - 1.2rem);
    margin: 0.6rem;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
}

.board-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: var(--surface);
    flex-shrink: 0;
    text-align: center;
    min-height: 72px;
}

.board-title-view {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.board-content {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--text-main);
}

.board-footer {
    padding: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--surface);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: #18181b;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 99px;
    font-size: 0.9rem;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.coach-mark {
    position: absolute;
    top: 3.5rem;
    left: 1rem;
    background: #52525b;
    color: white;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    /* Ensure it floats above everything */
    display: flex;
    align-items: center;
    gap: 0.6rem;
    animation: fadeIn 0.3s ease-out;
}

.coach-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coach-close:hover {
    color: white;
}

.coach-arrow {
    position: absolute;
    top: -6px;
    left: 1.5rem;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #52525b;
}

.context-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2000;
    /* Higher than coach mark */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.context-menu {
    width: 100%;
    max-width: 600px;
    background: var(--bg-color);
    border-radius: 20px 20px 0 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.ctx-item {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 1rem;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.ctx-item:active {
    transform: scale(0.98);
}

.ctx-item svg {
    color: var(--text-muted);
}

.ctx-item:hover {
    background: rgba(0, 0, 0, 0.02);
}

.ctx-item.text-red {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
}

.ctx-item.text-red svg {
    color: #ef4444;
}

.ctx-item.cancel {
    background: transparent;
    border-color: transparent;
    justify-content: center;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.list-footer {
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: center;
    background: transparent;
    flex-shrink: 0;
    width: 100%;
    /* Ensure full width */
    width: 100%;
    /* Ensure full width */
    z-index: 100;
    /* Ensure explicitly above board list content */
    position: relative;
    /* Ensure z-index works */
}

.settings-trigger {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.8;
    /* Increased base opacity */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    /* Prevent shrinking in flex containers */
}

.settings-trigger:hover {
    color: var(--primary);
    border-color: rgba(0, 0, 0, 0.15);
    background: var(--surface);
    opacity: 1;
    transform: rotate(30deg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

body.dark-mode .settings-trigger {
    background: var(--surface);
    opacity: 0.4;
}

body.dark-mode .settings-trigger:hover {
    opacity: 1;
}

.context-header {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

body.dark-mode .ctx-item {
    background: #1c1c1f;
    border-color: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

body.dark-mode .ctx-item:hover {
    background: #27272a;
}

body.dark-mode .ctx-item svg {
    color: #94a3b8;
}

body.dark-mode .ctx-item.text-red {
    color: #ef4444;
}

body.dark-mode .ctx-item.cancel {
    background: transparent;
    color: #94a3b8;
}

body.dark-mode .context-header {
    color: #64748b;
}

body.dark-mode .context-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Animations (from animations.css) --- */

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes ghostPeek {
    0% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(40px);
    }

    60% {
        transform: translateY(40px);
    }

    100% {
        transform: translateY(0);
    }
}

.refresh-loader {
    position: absolute;
    top: 3.8rem;
    /* Move down slightly */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    pointer-events: none;
}

.spinner {
    background: var(--surface);
    border-radius: 50%;
    padding: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border);
    animation: spin 1s linear infinite;
}

.context-overlay {
    animation: fadeIn 0.2s forwards;
}

.context-menu {
    animation: slideUp 0.2s forwards;
}

.peek-down {
    animation: ghostPeek 0.8s ease-in-out forwards;
}