@bobfrankston/msger 0.1.429 → 0.1.430

package/msger-native/bin/msgernative.exe.WebView2/EBWebView/Default/Cache/Cache_Data/f_000002

@@ -1,1091 +0,0 @@
-:root {
-    /* Clock colors */
-    --clock-bg: white;
-    --clock-numbers: black;
-    --clock-hands: black;
-    --second-hand-color: red;
-
-    /* Timer colors */
-    --timer-minutes-color: red;
-    --timer-seconds-color: yellow;
-    --timer-final-minute-color: #ffa500;
-    /* Orange/yellow for final minute */
-    --timer-dots-color: yellow;
-    --timer-bg-subtle: color-mix(in srgb, var(--timer-minutes-color), var(--clock-bg) 90%);
-
-    /* Digital time */
-    --digital-time-color: blue;
-
-    /* Typography */
-    --clock-font: 'Arial Black', 'Impact', sans-serif;
-
-    /* Battery indicator */
-    --battery-size: 10vmin;
-    --battery-position: 25%;
-    --battery-threshold: 50;
-
-    /* Banner states */
-    --banner-bg-unavailable: #ff6b6b;
-    --banner-bg-denied: #ff6b6b;
-    --banner-bg-disabled: #f39c12;
-    --banner-bg-waiting: #4a90e2;
-    --banner-bg-listening: #27ae60;
-    --banner-bg-speech-blocked: #f39c12;
-    --banner-text-unavailable: #fff;
-    --banner-text-denied: #fff;
-    --banner-text-disabled: #fff;
-    --banner-text-waiting: #fff;
-    --banner-text-listening: #fff;
-    --banner-text-speech-blocked: #fff;
-
-    /* Settings panel */
-    --settings-bg: rgba(255, 255, 255, 0.95);
-    --settings-text: black;
-    --settings-border: #ddd;
-
-    /* Buttons */
-    --button-bg: #007bff;
-    --button-text: white;
-    --button-hover: #0056b3;
-    --button-disabled: #ccc;
-    --button-danger: #dc3545;
-    --button-danger-hover: #c82333;
-
-    /* Version box */
-    --version-bg: #0371e6;
-    --version-text: white;
-
-    /* Computed colors */
-    --clock-hands-alpha: color-mix(in srgb, var(--clock-numbers), transparent 10%);
-    --shadow-color: color-mix(in srgb, var(--clock-numbers), transparent 80%);
-    --border-color: color-mix(in srgb, var(--clock-numbers), var(--clock-bg) 80%);
-}
-
-/* Dark theme overrides */
-[data-theme="dark"] {
-    --clock-bg: #1a1a1a;
-    --clock-numbers: #ffffff;
-    --clock-hands: #ffffff;
-    --second-hand-color: #ff4444;
-
-    --timer-minutes-color: #ff4444;
-    --timer-seconds-color: #ffff44;
-    --timer-final-minute-color: #ffaa00;
-    /* Brighter orange/yellow for dark theme */
-    --timer-dots-color: #ffff44;
-
-    --digital-time-color: #4da6ff;
-
-    --settings-bg: rgba(42, 42, 42, 0.95);
-    --settings-text: #ffffff;
-    --settings-border: #555;
-
-    --button-bg: #0056b3;
-    --button-text: white;
-    --button-hover: #004085;
-}
-
-/* System theme (auto dark/light based on user preference) */
-@media (prefers-color-scheme: dark) {
-    :root:not([data-theme="light"]) {
-        --clock-bg: #1a1a1a;
-        --clock-numbers: #ffffff;
-        --clock-hands: #ffffff;
-        --second-hand-color: #ff4444;
-
-        --timer-minutes-color: #ff4444;
-        --timer-seconds-color: #ffff44;
-        --timer-final-minute-color: #ffaa00;
-        /* Brighter orange/yellow for dark system theme */
-        --timer-dots-color: #ffff44;
-
-        --digital-time-color: #4da6ff;
-
-        --settings-bg: rgba(42, 42, 42, 0.95);
-        --settings-text: #ffffff;
-        --settings-border: #555;
-
-        --button-bg: #0056b3;
-        --button-text: white;
-        --button-hover: #004085;
-    }
-}
-
-/* ==================== Base Styles ==================== */
-html,
-body {
-    height: 100vh;
-    width: 100vw;
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    overflow: hidden;
-    /* Prevent scrolling - fixed window app */
-    background: var(--clock-bg);
-    font-family: var(--clock-font);
-}
-
-body {
-    display: flex;
-    flex-direction: column;
-}
-
-/* ==================== Clock Animation ==================== */
-@keyframes rotate-360 {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-/* ==================== Main Layout ==================== */
-#main-content {
-    flex: 1;
-    min-height: 0;
-    /* Important for flex child */
-    position: relative;
-    /* Remove margin-top - we'll use flex layout instead */
-}
-
-/* ==================== Clock Container ==================== */
-#clock-container {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    /* Maximized sizing - 95% of smaller viewport dimension */
-    width: min(95vw, 95vh);
-    height: min(95vw, 95vh);
-    aspect-ratio: 1 / 1;
-    transform: translate(-50%, -50%);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    /* Analog clock styles */
-    & #analog-clock {
-        width: 100%;
-        height: 100%;
-        /* Prevent text selection */
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-
-        /* Clock SVG elements */
-        & .hour-hand {
-            stroke: var(--clock-numbers);
-            transform-origin: 200px 200px;
-            animation: rotate-360 43200s linear infinite;
-            animation-delay: var(--hours-offset, 0s);
-        }
-
-        & .minute-hand {
-            stroke: var(--clock-numbers);
-            transform-origin: 200px 200px;
-            animation: rotate-360 3600s linear infinite;
-            animation-delay: var(--minutes-offset, 0s);
-        }
-
-        & .second-hand {
-            stroke: var(--second-hand-color);
-            transform-origin: 200px 200px;
-            animation: rotate-360 60s linear infinite;
-            animation-delay: var(--seconds-offset, 0s);
-        }
-
-        & .hour-markers,
-        & .minute-markers {
-            stroke: var(--clock-numbers);
-        }
-
-        /* Prevent text selection on all SVG text elements */
-        & text {
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-            cursor: default;
-        }
-
-        & .hour-numbers {
-            fill: var(--clock-numbers);
-        }
-
-        & .countdown-dot {
-            transition: opacity 0.3s ease, fill 0.3s ease;
-            stroke: black;
-            stroke-width: 1;
-            opacity: var(--dot-opacity, 0.1);
-            /* Use CSS custom property for visibility */
-            fill: var(--dot-color, var(--timer-seconds-color));
-            /* Use CSS custom property for color */
-        }
-    }
-}
-
-/* ==================== Digital Time Display ==================== */
-/* Digital time inside the SVG */
-#analog-clock #digital-time {
-    display: none;
-
-    &.visible {
-        display: block;
-    }
-}
-
-/* External digital time overlay */
-#digital-time-overlay {
-    display: none;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: calc(15vmin);
-    color: var(--digital-time-color);
-    background: transparent;
-    padding: 0;
-    border-radius: 0;
-    font-weight: bold;
-    text-align: center;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    line-height: 1;
-    z-index: 50;
-    pointer-events: none;
-
-    &.visible {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-}
-
-/* AM/PM indicator in lower left */
-#ampm-indicator {
-    position: fixed;
-    /* Changed from absolute to fixed for better viewport positioning */
-    bottom: 20px;
-    left: 20px;
-    font-size: 3vmin;
-    font-weight: bold;
-    padding: 8px 12px;
-    border-radius: 8px;
-    z-index: 60;
-    min-width: 50px;
-    text-align: center;
-    line-height: 1;
-    transition: all 0.3s ease;
-
-    /* AM styling - black text on white background */
-    &.am {
-        color: #000000;
-        background: #ffffff;
-        border: 2px solid #000000;
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-    }
-
-    /* PM styling - white text on black background */
-    &.pm {
-        color: #ffffff;
-        background: #000000;
-        border: 2px solid #ffffff;
-        box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);
-    }
-}
-
-/* ==================== Timer Elements ==================== */
-#timer-countdown {
-    display: none;
-    font-size: 6vmin;
-    font-weight: bold;
-    color: var(--timer-minutes-color);
-    text-align: center;
-    padding: 15px 20px;
-    background: var(--timer-bg-subtle);
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    box-shadow: 0 2px 10px var(--shadow-color);
-    min-width: 120px;
-
-    &.visible {
-        display: block;
-    }
-}
-
-#timer-cancel-floating {
-    display: none;
-    position: absolute;
-    bottom: 10px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: var(--button-danger);
-    color: white;
-    border: none;
-    border-radius: 6px;
-    padding: 6px 12px;
-    font-size: 13px;
-    font-weight: bold;
-    cursor: pointer;
-    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.15);
-    z-index: 101;
-
-    &.active {
-        display: block;
-    }
-}
-
-/* ==================== Inactivity Fading ==================== */
-/* Fader class for UI elements that hide on inactivity */
-.fader {
-    transition: opacity 500ms ease-in-out;
-}
-
-.fader.hidden {
-    opacity: 0;
-    pointer-events: none;
-    /* Prevent interaction when hidden */
-}
-
-/* Hide cursor when inactive */
-body.hide-cursor {
-    cursor: none;
-}
-
-body.hide-cursor * {
-    cursor: none !important;
-}
-
-/* Green listening indicator removed - wake word showing UI provides sufficient feedback */
-
-/* ==================== Wake Word Banner ==================== */
-#banner-container {
-    position: relative;
-    /* Create positioning context for progress bar */
-    flex-shrink: 0;
-    /* Don't shrink this element */
-    width: 100vw;
-    z-index: 3000;
-    min-height: 38px;
-    /* Stable height regardless of progress bar */
-}
-
-#banner-content {
-    position: relative;
-    width: 100%;
-    min-height: 38px;
-}
-
-/* All banners share common layout, each has its own colors */
-#banner-unavailable,
-#banner-disabled,
-#banner-waiting,
-#banner-listening,
-#banner-speech-blocked,
-#banner-network-error {
-    width: 100%;
-    min-height: 38px;
-    font-family: Arial, sans-serif;
-    font-size: 16px;
-    font-weight: normal;
-    text-align: center;
-    line-height: 38px;
-    display: none;
-    /* Hidden by default - only show when .active class is added */
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    letter-spacing: 0.02em;
-    transition: background 0.3s, color 0.3s;
-}
-
-#banner-unavailable.active,
-#banner-disabled.active,
-#banner-waiting.active,
-#banner-listening.active,
-#banner-speech-blocked.active,
-#banner-network-error.active {
-    display: block;
-}
-
-#banner-unavailable {
-    background: var(--banner-bg-unavailable);
-    color: var(--banner-text-unavailable);
-}
-
-#banner-disabled {
-    background: var(--banner-bg-disabled);
-    color: var(--banner-text-disabled);
-}
-
-#banner-waiting {
-    background: var(--banner-bg-waiting);
-    color: var(--banner-text-waiting);
-}
-
-#banner-listening {
-    background: var(--banner-bg-listening);
-    color: var(--banner-text-listening);
-}
-
-#banner-speech-blocked {
-    background: var(--banner-bg-speech-blocked);
-    color: var(--banner-text-speech-blocked);
-}
-
-#banner-network-error {
-    background: #dc3545;
-    color: white;
-}
-
-/* Dimming support for inactive banners */
-#banner-unavailable.dimmed,
-#banner-disabled.dimmed,
-#banner-waiting.dimmed,
-#banner-listening.dimmed,
-#banner-speech-blocked.dimmed,
-#banner-network-error.dimmed {
-    opacity: 0.3;
-}
-
-/* Active banners should be fully opaque even when dimmed, but respect parent hidden state */
-.fader:not(.hidden) #banner-unavailable.active,
-.fader:not(.hidden) #banner-disabled.active,
-.fader:not(.hidden) #banner-waiting.active,
-.fader:not(.hidden) #banner-listening.active,
-.fader:not(.hidden) #banner-speech-blocked.active,
-.fader:not(.hidden) #banner-network-error.active {
-    opacity: 1 !important;
-}
-
-/* Progress bar overlay relative to banner content */
-#progress-container {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 6px;
-    background: rgba(0, 0, 0, 0.2);
-    overflow: hidden;
-}
-
-#progress-container.hidden {
-    display: none;
-}
-
-.timeout-progress-bar {
-    height: 100%;
-    background: var(--timer-seconds-color, red);
-    width: 100%;
-    transition: width 0.1s linear;
-}
-
-/* ==================== Debug Log ==================== */
-#debug-log {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 90vw;
-    max-width: 1200px;
-    max-height: 70vh;
-    background: rgba(0, 0, 0, 0.75);
-    color: white;
-    border: 2px solid #333;
-    border-radius: 12px;
-    padding: 20px;
-    font-family: monospace;
-    font-size: 14px;
-    z-index: 3000;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-
-    &.hidden {
-        display: none;
-    }
-}
-
-#debug-log-content {
-    max-height: calc(70vh - 100px);
-    overflow-y: auto;
-    white-space: pre-wrap;
-    word-break: break-word;
-    background: rgba(255, 255, 255, 0.05);
-    padding: 15px;
-    border-radius: 8px;
-    margin-bottom: 15px;
-}
-
-#debug-log-controls {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 15px;
-}
-
-#debug-log-legend {
-    color: #bbb;
-    font-size: 13px;
-    font-family: monospace;
-    padding: 5px;
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 4px;
-}
-
-#clear-log {
-    padding: 8px 16px;
-    background: #444;
-    color: white;
-    border: 1px solid #666;
-    border-radius: 6px;
-    cursor: pointer;
-    font-family: monospace;
-
-    &:hover {
-        background: #666;
-    }
-}
-
-/* ==================== Battery Indicator ==================== */
-#battery-indicator {
-    position: fixed;
-    bottom: var(--battery-position);
-    right: var(--battery-position);
-    width: var(--battery-size);
-    height: var(--battery-size);
-    background: rgba(255, 0, 0, 0.8);
-    color: white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: calc(var(--battery-size) * 0.3);
-    font-weight: bold;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-
-    &.hidden {
-        display: none;
-    }
-}
-
-/* ==================== Settings & Controls ==================== */
-#fixed-controls {
-    position: fixed;
-    right: 12px;
-    bottom: 12px;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    z-index: 2100;
-
-    & #settings-toggle {
-        width: 100%;
-        min-width: 90px;
-        height: 40px;
-        background: var(--settings-bg);
-        color: var(--settings-text);
-        border: 2px solid var(--settings-border);
-        border-radius: 6px 6px 0 0;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 24px;
-        cursor: pointer;
-        transition: background 0.2s;
-
-        &:hover {
-            background: var(--button-hover);
-        }
-    }
-
-    & #install-button {
-        width: 100%;
-        min-width: 90px;
-        height: 40px;
-        background: var(--settings-bg);
-        color: var(--settings-text);
-        border: 2px solid var(--settings-border);
-        border-radius: 0;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 14px;
-        font-weight: bold;
-        cursor: pointer;
-        transition: all 0.2s ease;
-
-        &:hover {
-            background: var(--button-hover);
-            color: var(--button-text);
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        }
-
-        &.hidden {
-            display: none !important;
-        }
-
-        &.inactivity-countdown {
-            color: var(--settings-text);
-            font-size: 12px;
-            text-align: center;
-            padding: 4px;
-        }
-    }
-
-    & #version-box {
-        width: auto;
-        min-width: 60px;
-        max-width: 160px;
-        padding: 6px 12px;
-        box-sizing: border-box;
-        background: var(--version-bg);
-        color: var(--version-text);
-        border-radius: 0;
-        font-size: 15px;
-        font-weight: bold;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
-        opacity: 0.92;
-        pointer-events: auto;
-        text-align: center;
-    }
-
-    & #inactivity-countdown {
-        padding: 4px 12px;
-        background: var(--settings-bg);
-        color: var(--settings-text);
-        border-radius: 0;
-        font-size: 11px;
-        text-align: center;
-    }
-
-    & #memory-display {
-        padding: 4px 12px;
-        background: var(--settings-bg);
-        color: var(--settings-text);
-        border-radius: 0 0 6px 6px;
-        font-size: 11px;
-        text-align: center;
-    }
-}
-
-#settings-panel {
-    position: fixed;
-    bottom: 24px;
-    right: 24px;
-    background: var(--settings-bg);
-    color: var(--settings-text);
-    border: 2px solid var(--settings-border);
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    z-index: 1000;
-    width: 220px;
-    max-width: 90vw;
-    padding: 12px;
-    font-size: 14px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    &.collapsed {
-        display: none;
-    }
-
-    & .settings-actions {
-        margin-top: 20px;
-        padding-top: 15px;
-        border-top: 1px solid var(--settings-border);
-        text-align: center;
-    }
-
-    & .danger-button {
-        background: var(--button-danger);
-        color: white;
-        border: none;
-        padding: 8px 16px;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 14px;
-
-        &:hover {
-            background: var(--button-danger-hover);
-        }
-    }
-}
-
-/* Weather Temperature Display */
-.weather-temperature {
-    position: fixed;
-    top: 30px;
-    right: 30px;
-    font-family: var(--clock-font);
-    font-size: 112px;
-    /* 4x clock numbers (28px) */
-    color: var(--clock-numbers);
-    font-weight: bold;
-    z-index: 100;
-    user-select: none;
-    pointer-events: none;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-}
-
-.weather-temperature .weather-main {
-    line-height: 1;
-}
-
-.weather-temperature .weather-feels-like {
-    font-size: 0.75em;
-    /* 75% of main temperature size */
-    opacity: 0.85;
-    margin-top: -0.15em;
-    /* Pull up slightly closer to main temp */
-    padding-right: 0.05em;
-    /* Slight offset to the right */
-}
-
-.weather-temperature .weather-humidity {
-    font-size: 0.55em;
-    /* 55% of main temperature size, smaller than feels like */
-    opacity: 0.75;
-    margin-top: -0.1em;
-    padding-right: 0.05em;
-}
-
-.weather-temperature .weather-condition {
-    font-size: 0.6em;
-    /* 60% of main temperature size */
-    opacity: 0.9;
-    margin-top: 0.05em;
-    padding-right: 0;
-    font-style: italic;
-}
-
-.weather-temperature.weather-error {
-    color: #999;
-    opacity: 0.7;
-}
-
-/* Responsive adjustments for weather display */
-@media (max-width: 768px) {
-    .weather-temperature {
-        top: 20px;
-        right: 20px;
-        font-size: 84px;
-        /* Slightly smaller on mobile */
-    }
-}
-
-@media (max-height: 600px) {
-    .weather-temperature {
-        top: 15px;
-        right: 15px;
-        font-size: 76px;
-        /* Even smaller on very short screens */
-    }
-}
-
-/* Settings Theme Display Classes */
-#settings-panel.theme-light {
-    background: var(--light-bg, #ffffff);
-    color: var(--light-text, #333333);
-    border-color: var(--light-border, #cccccc);
-}
-
-#settings-panel.theme-dark {
-    background: var(--dark-bg, #2d2d2d);
-    color: var(--dark-text, #ffffff);
-    border-color: var(--dark-border, #555555);
-}
-
-#settings-panel.theme-system {
-    /* Use default CSS variables that respond to system theme */
-    background: var(--settings-bg);
-    color: var(--settings-text);
-    border-color: var(--settings-border);
-}
-
-/* AI Configuration Section */
-#ai-config {
-    background: rgba(0, 123, 255, 0.1);
-    border: 1px solid #007bff;
-    border-radius: 4px;
-    padding: 8px;
-    margin-top: 8px;
-
-    & label {
-        margin-bottom: 4px;
-        font-weight: bold;
-    }
-
-    & select,
-    & input {
-        width: 100%;
-        padding: 4px;
-        margin-bottom: 8px;
-        border: 1px solid var(--settings-border);
-        border-radius: 3px;
-        font-size: 12px;
-    }
-
-    & input[type="password"] {
-        font-family: monospace;
-    }
-}
-
-/* ==================== Log Overlay ==================== */
-#log-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.8);
-    z-index: 2000;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &.collapsed {
-        display: none;
-    }
-
-    & #log-content {
-        background: var(--settings-bg);
-        color: var(--settings-text);
-        border: 2px solid var(--settings-border);
-        border-radius: 8px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-        width: min(90vw, 600px);
-        max-height: 80vh;
-        padding: 20px;
-        display: flex;
-        flex-direction: column;
-
-        & h3 {
-            margin: 0 0 15px 0;
-            color: var(--settings-text);
-        }
-
-        & #log-messages {
-            flex: 1;
-            overflow-y: auto;
-            max-height: 60vh;
-            border: 1px solid var(--settings-border);
-            border-radius: 4px;
-            padding: 10px;
-            background: var(--clock-bg);
-            font-family: monospace;
-            font-size: 12px;
-            line-height: 1.4;
-
-            & .log-entry {
-                margin-bottom: 2px;
-                word-wrap: break-word;
-                color: var(--clock-numbers);
-            }
-        }
-
-        & small {
-            margin-top: 10px;
-            text-align: center;
-            opacity: 0.7;
-        }
-    }
-}
-
-#log-toggle {
-    width: 100%;
-    min-width: 90px;
-    height: 40px;
-    background: var(--settings-bg);
-    color: var(--settings-text);
-    border: 2px solid var(--settings-border);
-    border-radius: 0;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: 20px;
-    cursor: pointer;
-    position: relative;
-
-    transition: background 0.2s;
-
-
-    &:hover {
-        background: var(--button-hover);
-    }
-}
-
-/* ==================== Responsive Design ==================== */
-@media (orientation: portrait) {
-    /* Clock size now handled by main CSS */
-
-    #ampm-indicator {
-        bottom: 20px;
-        left: 20px;
-        font-size: 3vmin;
-    }
-}
-
-@media (orientation: landscape) {
-    /* Clock size now handled by main CSS */
-
-    #ampm-indicator {
-        bottom: 20px;
-        left: 20px;
-        font-size: 2.5vmin;
-        /* Slightly smaller in landscape */
-        /* Ensure it stays visible in landscape */
-        max-width: calc(15vw);
-    }
-}
-
-/* Specific adjustments for landscape tablets */
-@media (orientation: landscape) and (min-width: 768px) {
-    /* Clock size now handled by main CSS */
-
-    #ampm-indicator {
-        font-size: 2vmin;
-        padding: 6px 10px;
-    }
-}
-
-/* Wide landscape displays (tablets in landscape) */
-@media (orientation: landscape) and (min-width: 1024px) {
-    /* Clock size now handled by main CSS */
-
-    #ampm-indicator {
-        font-size: 1.8vmin;
-        bottom: 30px;
-        left: 30px;
-    }
-}
-
-@media (max-width: 600px) {
-    .wake-word-banner {
-        font-size: 11px;
-        padding: 8px 12px;
-    }
-
-    #settings-panel {
-        bottom: 20px;
-        right: 20px;
-    }
-
-    #ampm-indicator {
-        font-size: 4vmin;
-        bottom: 15px;
-        left: 15px;
-        padding: 6px 8px;
-        min-width: 40px;
-    }
-}
-
-/* Very small screens */
-@media (max-width: 400px) {
-    /* Clock size now handled by main CSS */
-
-    #ampm-indicator {
-        font-size: 5vmin;
-        bottom: 10px;
-        left: 10px;
-    }
-}
-
-/* ==================== Help Dialog ==================== */
-#help-dialog {
-    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;
-
-    &.hidden {
-        display: none;
-    }
-}
-
-#help-dialog-content {
-    background: var(--settings-bg);
-    color: var(--settings-text);
-    border-radius: 10px;
-    padding: 30px;
-    max-width: 600px;
-    max-height: 80vh;
-    overflow-y: auto;
-    position: relative;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-    opacity: 0.8;
-
-    & h2 {
-        margin-top: 0;
-        margin-bottom: 20px;
-        font-size: 24px;
-        text-align: center;
-    }
-
-    & h3 {
-        margin-top: 20px;
-        margin-bottom: 10px;
-        font-size: 18px;
-        color: var(--button-bg);
-    }
-
-    & ul {
-        margin: 0;
-        padding-left: 20px;
-        list-style-type: disc;
-    }
-
-    & li {
-        margin-bottom: 8px;
-        line-height: 1.5;
-    }
-
-    & .help-section {
-        margin-bottom: 20px;
-    }
-}
-
-#help-close {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: none;
-    border: none;
-    font-size: 24px;
-    cursor: pointer;
-    color: var(--settings-text);
-    padding: 5px 10px;
-
-    &:hover {
-        background: rgba(0, 0, 0, 0.1);
-        border-radius: 5px;
-    }
-}
-
-/* ==================== Fullscreen Mode ==================== */
-:fullscreen {
-
-    /* Keep banners visible in fullscreen for voice feedback */
-    & .wake-word-banner {
-        opacity: 0.9;
-        /* Slightly transparent in fullscreen */
-    }
-
-    & #settings-panel {
-        opacity: 0.8;
-    }
-}