/* ============================================================
   WIDGETS
   Agenda, inbox, habits, notes and the smart suggestion card.
   Part of the incremental migration out of components.css:
   move widget-panel rules here as each widget is polished.
   ============================================================ */

/* --- Next best action: the emotional focus of the week panel ---
   It is not just another context card. It should feel like the one
   thing the assistant is quietly suggesting right now. */
#smart-suggestions {
    --nba-scene: url('/images/next-best-action-scene-dark.png');
    --nba-scene-position: right 12% top 18%;
    --nba-scene-opacity: 0.94;
    --nba-card-min-height: 116px;
    --nba-content-min-height: 68px;
    --nba-content-offset-top: var(--space-3);
    --nba-card-padding: var(--space-3) var(--space-4);
    width: 100%;
    align-self: stretch;
}
#smart-suggestions .context-card-wrapper {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding-bottom: 8px;
    animation: none;
}
:root[data-theme="light"] #smart-suggestions {
    --nba-scene: url('/images/next-best-action-scene.png');
    --nba-scene-position: right 12% top 16%;
    --nba-scene-opacity: 0.98;
}
:root[data-theme="light"] #widget-panel.widget-wide #smart-suggestions {
    --nba-scene-position: right 10% top 10%;
    --nba-scene-opacity: 1;
}
#smart-suggestions .context-card {
    width: 100%;
    box-sizing: border-box;
    min-height: var(--nba-card-min-height);
    padding: var(--nba-card-padding);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: none;
    background: color-mix(in srgb, var(--bg-deep) 90%, var(--surface-overlay) 10%);
    isolation: isolate;
}
#smart-suggestions .context-card::before {
    display: none;
}
#smart-suggestions .context-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            102deg,
            var(--bg-deep) 0%,
            color-mix(in srgb, var(--bg-deep) 88%, transparent) 30%,
            color-mix(in srgb, var(--bg-deep) 42%, transparent) 54%,
            transparent 78%
        ),
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--bg-deep) 38%, transparent) 0%,
            transparent 58%
        ),
        var(--nba-scene);
    background-size: 100% 100%, 100% 100%, cover;
    background-position: left center, left top, var(--nba-scene-position);
    background-repeat: no-repeat;
    opacity: var(--nba-scene-opacity);
}
#smart-suggestions .context-card-content {
    position: relative;
    z-index: 1;
    min-height: var(--nba-content-min-height);
    justify-content: center;
    padding-top: var(--nba-content-offset-top);
    padding-bottom: var(--space-2);
    box-sizing: border-box;
}
/* Scenic banner when the panel is wide enough for the 7-column agenda */
#widget-panel.widget-wide #smart-suggestions {
    --nba-scene-position: right 10% top 12%;
    --nba-scene-opacity: 0.96;
    --nba-card-min-height: 156px;
    --nba-content-min-height: 96px;
    --nba-content-offset-top: var(--space-4);
    --nba-card-padding: var(--space-4);
}
#widget-panel.widget-wide #smart-suggestions .context-card-wrapper {
    margin-bottom: 10px;
    padding-bottom: 10px;
}
#widget-panel.widget-ultrawide #smart-suggestions {
    --nba-card-min-height: 168px;
    --nba-content-min-height: 100px;
    --nba-content-offset-top: var(--space-5);
}
#smart-suggestions .context-card-kicker {
    font-size: 0.66rem;
    color: color-mix(in srgb, var(--accent-primary) 80%, var(--text-secondary));
    letter-spacing: 0.1em;
    text-shadow: 0 1px 12px color-mix(in srgb, var(--bg-deep) 55%, transparent);
}
#smart-suggestions .context-card-message {
    font-family: var(--font-sans);
    font-size: 0.94rem;
    font-weight: 400;
    line-height: 1.52;
    text-shadow: 0 1px 14px color-mix(in srgb, var(--bg-deep) 65%, transparent);
    opacity: 0;
    transition: opacity 0.28s ease;
}
#smart-suggestions .context-card-message.is-visible {
    opacity: 1;
}
#smart-suggestions .smart-thinking.hidden,
#smart-suggestions .context-card-message.hidden {
    display: none !important;
}

.week-day-col.is-today .week-day-block-num {
    color: var(--accent-primary);
}

#week-view.widget-content {
    position: relative;
}
#week-view.widget-content::before {
    content: '';
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 8%;
    width: min(160px, 36%);
    height: min(160px, 28%);
    border-radius: 50%;
    z-index: 0;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--accent-primary) 22%, transparent) 0%,
        transparent 70%
    );
    opacity: 0.055;
}
:root[data-theme="light"] #week-view.widget-content::before {
    opacity: 0.075;
}
#week-view.widget-content > * {
    position: relative;
    z-index: 1;
}

/* --- Habit pulse grid (intensity dots) --- */
.habit-pulse-dot {
    --pulse-dot-size: 16px;
    width: var(--pulse-dot-size);
    height: var(--pulse-dot-size);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
    transition: transform var(--duration-quick) var(--ease-standard), box-shadow var(--duration-quick) var(--ease-standard);
}
.habit-pulse-dot.pulse-l0 { background: color-mix(in srgb, var(--text-muted) 18%, transparent); }
.habit-pulse-dot.pulse-l1 { background: color-mix(in srgb, var(--accent-primary) 22%, transparent); }
.habit-pulse-dot.pulse-l2 { background: color-mix(in srgb, var(--accent-primary) 42%, transparent); }
.habit-pulse-dot.pulse-l3 { background: color-mix(in srgb, var(--accent-primary) 68%, transparent); }
.habit-pulse-dot.pulse-l4 { background: color-mix(in srgb, var(--accent-primary) 92%, transparent); }
.habit-health-legend .habit-pulse-dot {
    --pulse-dot-size: 10px;
}
.habit-pulse-cell.is-today .habit-pulse-dot-wrap::before {
    content: "";
    position: absolute;
    width: calc(var(--pulse-dot-size) + 10px);
    height: calc(var(--pulse-dot-size) + 10px);
    border-radius: var(--radius-pill);
    border: 1.5px solid color-mix(in srgb, var(--accent-primary) 52%, transparent);
    box-sizing: border-box;
    pointer-events: none;
}
.habit-pulse-cell.is-today .habit-pulse-dot {
    position: relative;
    z-index: 1;
}
.habit-pulse-cell.selected:not(.is-today) .habit-pulse-dot {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 62%, transparent);
}
.habit-pulse-cell.is-over-target .habit-pulse-dot-wrap::after {
    content: "";
    position: absolute;
    right: -2px;
    top: -2px;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: #8ec3cf;
    box-shadow: 0 0 0 2px var(--surface-canvas);
}

/* --- Quiet/empty states: stillness, not absence --- */
.context-card-empty,
.week-no-items {
    font-family: var(--font-sans);
    font-size: var(--fs-footnote);
    font-weight: 400;
    font-style: italic;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}