/* --- 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 { font-size: clamp(24px, 14cqw, 110px); font-weight: 800; text-align: center; letter-spacing: 2px; }
.sub { text-align: center; color: var(--muted); font-size: 1rem; margin-top: 4px; }

/* Analog Clock */
.analog-clock {
    position: relative; width: 120px; height: 120px; margin: 0 auto;
    border: 4px 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: 6px; height: 30%; margin-left: -3px; }
.hand.minute { width: 4px; height: 40%; margin-left: -2px; }
.hand.second { width: 2px; height: 45%; margin-left: -1px; background: var(--accent); }
.center-dot { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px; background: var(--accent); border-radius: 50%; }

/* --- Stocks (Ticker & List) --- */
.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; }
@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-icon { font-size: 2.5rem; text-align: center; line-height: 1; margin-bottom: 0.5rem; }
.weather-primary { font-size: 3rem; font-weight: 800; line-height: 1; margin: 0; text-align: center; }
.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; }