/* --- Common Widget Layouts --- */
.mod .bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px 6px; z-index: 20;
}
.mod .title { font-weight: 700; font-size: 0.9rem; letter-spacing: 0.2px; }
.mod .content {
    flex: 1; display: flex; flex-direction: column;
    padding: 0 16px 14px; min-height: 0; position: relative;
    justify-content: center; /* Default center align */
}

/* Alignment Modifiers */
.mod.--align-top .content { justify-content: flex-start; }
.mod.--align-bottom .content { justify-content: flex-end; }

/* Tools (Settings/Remove) */
.mod .tools { opacity: 0; transition: opacity 0.2s; display: flex; gap: 6px; }
.mod:hover .tools { opacity: 1; }

/* ✅ FIXED: Restored Icon Button Styling */
.icon-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--tileBorder);
    background: #000; /* Darker background to pop against tile */
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    opacity: 0.6;
    z-index: 100;
}

.icon-btn:hover {
    border-color: rgba(255,255,255,0.3);
    color: var(--fg);
    background: rgba(255,255,255,0.15);
    opacity: 1;
}

/* --- Clock --- */
.clock-wrapper {
    height: 100%;
    position: relative;                  /* Anchor for absolute sub */
    display: flex;
    align-items: center;                 /* Centers the main clock horizontally/vertically */
    justify-content: center;
    text-align: center;
}

.clock-wrapper .clock {
    font-size: clamp(24px, 12cqw, 95px);
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1;
}

/* Special styling for AM/PM when in 12-hour mode */
.clock-wrapper .clock span {
    font-size: 0.3em;
    font-weight: 600;
    margin-left: -0.7em;
    opacity: 0.6;
    vertical-align: middle;
}

.clock-wrapper .sub {
    position: absolute;
    top: 50%;                            /* Start from middle */
    left: 50%;
    transform: translate(-50%, 5.5rem);    /* Horizontal center + offset DOWN (adjust 3.5rem–5rem) */
    color: var(--muted);
    font-size: clamp(0.6rem, 3cqw, 1rem);
    opacity: 0.85;
    white-space: nowrap;
    pointer-events: none;                /* Prevents interfering with widget interactions */
}
.clock { font-size: clamp(24px, 12cqw, 95px); font-weight: 800; text-align: center; letter-spacing: 2px; }
.sub { text-align: center; color: var(--muted); font-size: 1rem; margin-top: 4px; }

/* Analog Clock (Scalable) */
.analog-clock {
    position: relative;
    width: clamp(80px, 20cqmin, 150px);
    height: clamp(80px, 20cqmin, 150px);
    margin: 0 auto;
    border: clamp(2px, 0.8cqmin, 5px) solid var(--fg);
    border-radius: 50%;
}
.hand { position: absolute; bottom: 50%; left: 50%; transform-origin: 50% 100%; background: var(--fg); border-radius: 2px; }
.hand.hour { width: clamp(4px, 1.5cqmin, 7px); height: 30%; margin-left: clamp(-3.5px, -0.75cqmin, -2px); }
.hand.minute { width: clamp(3px, 1cqmin, 5px); height: 40%; margin-left: clamp(-2.5px, -0.5cqmin, -1.5px); }
.hand.second { width: clamp(1.5px, 0.5cqmin, 3px); height: 45%; margin-left: clamp(-1.5px, -0.25cqmin, -0.75px); background: var(--accent); }
.center-dot { position: absolute; top: 50%; left: 50%; width: clamp(6px, 2cqmin, 12px); height: clamp(6px, 2cqmin, 12px); margin: clamp(-6px, -1cqmin, -3px); background: var(--accent); border-radius: 50%; }

/* --- Stocks (Ticker & List) --- */
.stock-card-container {
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;         /* Vertical center */
    justify-content: center;     /* Horizontal center */
    text-align: center;
    padding: 0;                  /* Zero out any padding */
    margin: 0;
}

.stock-card-container .stock-symbol {
    position: absolute;
    top: 1.4rem;                 /* Slightly more space from very top */
    left: 50%;
    transform: translateX(-50%);
    color: var(--muted);
    font-size: clamp(0.6rem, 3cqw, 1rem);
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.8;
    margin: 0;                   /* Explicitly kill any margin */
    padding: 0;
    pointer-events: none;
}

.stock-card-container .stock-price {
    font-size: clamp(1.8rem, 14cqw, 5.8rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -3px;
    margin: 0;
    padding: 0;
    color: #fff;
}

.stock-card-container .stock-change {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 4.2rem);  /* Identical to weather wind and clock city */
    font-size: clamp(0.7rem, 4cqw, 1.15rem);
    font-weight: 600;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    opacity: 0.9;
}

.stock-card-container .stock-change .arrow {
    margin-right: 0.4rem;
    font-size: 1.1em;
}

.positive { color: #00ffc6; }  /* teal-green */
.negative { color: #ff6363; }  /* red */

.mod[data-type="stocks"] .content { padding: 0; }
.ticker { white-space: nowrap; overflow: hidden; display: flex; align-items: center; height: 100%; }
.marquee { display: inline-block; padding-left: 100%; animation: scroll 30s linear infinite; white-space: nowrap; }
.ticker-item { margin-right: 2rem; font-size: 1.2rem !important }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

.stock-list { display: flex; flex-direction: column; gap: 8px; padding: 10px; overflow-y: auto; height: 100%; }
.stock-item { display: flex; justify-content: space-between; padding: 8px; background: rgba(255,255,255,0.03); border-radius: 6px; }


/* --- Weather --- */
.weather-container {
    height: 100%;
    position: relative;                  /* Anchor for absolute sub */
    display: flex;
    align-items: center;                 /* Vertical center main */
    justify-content: center;             /* Horizontal center main */
}

.weather-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.weather-main .weather-icon {
    font-size: clamp(1.2rem, 8cqw, 2.5rem);
    line-height: 1;
}

.weather-main .weather-temp {
    font-size: clamp(1.8rem, 14cqw, 5.5rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -2px;
    margin-left: -4px;
}

.weather-sub {
    position: absolute;
    top: 50%;                            /* Start from vertical middle */
    left: 50%;
    transform: translate(-50%, 4rem);  /* Center horizontally + offset DOWN by 1.2rem (adjust 1rem-1.8rem) */
    color: var(--muted);
    font-size: clamp(0.6rem, 3cqw, 0.95rem);
    opacity: 0.85;
    white-space: nowrap;
    pointer-events: none;                /* Optional: prevents mouse interference */
}
.weather-desc { font-size: 0.9rem; color: var(--muted); text-transform: capitalize; text-align: center; }
.weather-meta { font-size: 0.75rem; color: var(--muted); text-align: center; margin-top: 6px; }

/* --- AI / Voice --- */
.ai-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.ai-ring {
    width: 80px; height: 80px; border-radius: 50%;
    border: 2px solid rgba(0, 255, 198, 0.1);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
}
.ai-ring.listening { border-color: var(--accent); box-shadow: 0 0 30px rgba(0, 255, 198, 0.3); animation: pulse 1.5s infinite; }
.ai-status { margin-top: 15px; font-size: 0.8rem; color: var(--muted); }
.ai-transcript { margin-top: 5px; color: var(--accent); font-size: 0.9rem; min-height: 20px; text-align: center; }

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* --- Generic Lists (News/Calendar) --- */
.list, .news-list, .calendar-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; height: 100%; }
.item, .cal-event, .news-item {
    padding: 10px; background: rgba(255,255,255,0.03);
    border: 1px solid var(--tileBorder); border-radius: 8px;
    font-size: 0.9rem;
}
.cal-event { display: flex; justify-content: space-between; }
.cal-event .time { color: var(--muted); font-size: 0.8rem; }