.weather-chip {
    position: fixed;
    left: calc(var(--sb-w, 0px) + 24px);
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border-radius: 0;
    background: transparent;
    border: 0;
    color: var(--fg-3);
    font-size: 12px;
    line-height: 1;
    z-index: 30;
    cursor: pointer;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
    animation: slideUp 0.5s var(--ease);
}
.weather-chip[hidden] { display: none; }

body.browsing .weather-chip,
body.noc-overlay-open .weather-chip,
body.browsing .weather-panel,
body.noc-overlay-open .weather-panel {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(6px);
}

.weather-chip:hover { background: rgba(255, 255, 255, 0.05); color: var(--fg); }
.weather-chip .wc-icon { font-size: 15px; line-height: 1; }
.weather-chip .wc-temp { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.weather-chip .wc-cond { color: var(--fg-3); }

@media (max-width: 720px) {
    .weather-chip { left: 16px; bottom: 14px; }
    .weather-panel { left: 16px; }
    .weather-chip .wc-cond { display: none; }
}

.weather-panel {
    position: fixed;
    left: calc(var(--sb-w, 0px) + 24px);
    bottom: 52px;
    width: 308px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    padding: 16px 16px 14px;
    border-radius: 0;
    background: var(--panel, rgba(13, 12, 17, 0.94));
    border: 1px solid var(--line-2);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    
    
    z-index: 40;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transform-origin: bottom left;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
    pointer-events: none;
}
.weather-panel[hidden] { display: none; }
.weather-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.wp-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 13px;
}
.wp-search-box { position: relative; flex: 1; display: flex; align-items: center; }
.wp-search-ico {
    position: absolute;
    left: 10px;
    display: flex;
    color: var(--fg-3);
    pointer-events: none;
}
.wp-search-input {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 29px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    color: var(--fg);
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.wp-search-input:focus { border-color: var(--line-3); background: rgba(255, 255, 255, 0.08); }
.wp-search-input::placeholder { color: var(--fg-3); }
.wp-myloc {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    color: var(--fg-3);
    cursor: pointer;
    transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.wp-myloc:hover { color: var(--accent); border-color: var(--line-3); background: rgba(255, 255, 255, 0.09); }

.wp-results {
    position: absolute;
    top: 39px;
    left: 0;
    right: 0;
    z-index: 5;
    background: var(--panel, rgba(22, 24, 40, 0.98));
    border: 1px solid var(--line-2);
    border-radius: 0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden auto;
    max-height: 224px;
    display: none;
}
.wp-results.show { display: block; }
.wp-result {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 11px;
    cursor: pointer;
    transition: background 0.12s var(--ease);
}
.wp-result:hover, .wp-result.active { background: rgba(168, 152, 232, 0.098); }
.wp-result-name { font-size: 12.5px; color: var(--fg); }
.wp-result-sub { font-size: 11px; color: var(--fg-3); }
.wp-result-empty { padding: 10px 11px; font-size: 12px; color: var(--fg-3); }

.weather-panel.wp-loading .wp-content { opacity: 0.5; transition: opacity 0.15s var(--ease); }

.wp-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.wp-now { display: flex; align-items: center; gap: 11px; }
.wp-now-ico { font-size: 32px; line-height: 1; }
.wp-now-temp { font-size: 27px; font-weight: 700; color: var(--fg); line-height: 1.05; font-variant-numeric: tabular-nums; }
.wp-now-cond { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.wp-loc { font-size: 12px; color: var(--fg-2); text-align: right; line-height: 1.3; padding-top: 3px; }

.wp-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 14px;
}
.wp-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 11.5px;
    color: var(--fg-3);
    background: rgba(255, 255, 255, 0.04);
    padding: 7px 10px;
    border-radius: 0;
}
.wp-stat b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }

.wp-week-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--fg-3);
    margin-bottom: 7px;
}
.wp-week { display: flex; flex-direction: column; gap: 1px; }
.wp-day {
    display: grid;
    grid-template-columns: 42px 22px 38px 1fr 10px;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 0;
    font-size: 12.5px;
    cursor: pointer;
    outline: none;
    transition: background 0.15s var(--ease);
}
.wp-day:hover, .wp-day:focus-visible { background: rgba(255, 255, 255, 0.07); }
.wp-day-name { color: var(--fg-2); }
.wp-day-ico { text-align: center; font-size: 15px; line-height: 1; }
.wp-day-pop { font-size: 11px; color: #7fb8e6; text-align: right; font-variant-numeric: tabular-nums; }
.wp-day-pop:empty::after { content: "—"; color: var(--fg-3); }
.wp-day-temps { text-align: right; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.wp-day-temps b { color: var(--fg); font-weight: 600; margin-right: 3px; }
.wp-day-chev { color: var(--fg-3); text-align: center; opacity: 0; transition: opacity 0.15s var(--ease), transform 0.15s var(--ease); transform: translateX(-2px); }
.wp-day:hover .wp-day-chev, .wp-day:focus-visible .wp-day-chev { opacity: 0.7; transform: translateX(0); }

.wp-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 7px;
    margin-bottom: 12px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    color: var(--fg-2);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.wp-back:hover { background: rgba(255, 255, 255, 0.1); color: var(--fg); }
.wp-dd-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.wp-dd-ico { font-size: 30px; line-height: 1; }
.wp-dd-title { font-size: 14.5px; font-weight: 600; color: var(--fg); }
.wp-dd-sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.wp-chart-wrap { margin-bottom: 14px; }
.wp-chart { width: 100%; height: auto; display: block; overflow: visible; }
.wp-chart text { font-family: inherit; }
.wp-cx { fill: var(--fg-3); font-size: 8px; text-anchor: middle; }
.wp-chi { fill: var(--fg); font-size: 9px; font-weight: 700; text-anchor: middle; }
.wp-clo { fill: var(--fg-3); font-size: 9px; font-weight: 700; text-anchor: middle; }
.wp-chart-empty { font-size: 12px; color: var(--fg-3); text-align: center; padding: 24px 0; }

.reduce-motion .weather-chip,
.reduce-motion .weather-panel { animation: none; transition: opacity 0.12s linear; }