/* ===== LOGIN PAGE ===== */
.login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--color-surface);
    position: relative; overflow: hidden;
}
.login-page::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, var(--color-primary-surface) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(82,183,136,0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 60% 80%, rgba(212,104,122,0.06) 0%, transparent 40%);
    pointer-events: none;
}

/* Animated floating leaves on login */
.login-page::after {
    content: '';
    position: absolute;
    width: 200px; height: 200px;
    top: -50px; right: -30px;
    background: var(--color-primary);
    opacity: 0.04;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: leafSway 8s ease-in-out infinite;
}

.login-card {
    width: 100%; max-width: 400px;
    background-color: var(--color-surface-container);
    border-radius: var(--radius-2xl); padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-xl); position: relative; z-index: 1;
    border: 1px solid var(--color-outline-subtle);
    animation: scaleIn var(--duration-slow) var(--ease-spring);
}

.login-logo { text-align: center; margin-bottom: var(--space-7); }
.login-logo svg {
    width: 56px; height: 56px; fill: var(--color-primary);
    margin-bottom: var(--space-4);
    filter: drop-shadow(0 4px 12px rgba(45,106,79,0.2));
    animation: breathe 3s ease-in-out infinite;
}
.login-logo h1 {
    font-family: var(--font-display); font-size: 1.75rem; font-weight: 700;
    color: var(--color-on-surface); letter-spacing: -0.02em;
}
.login-logo p { color: var(--color-on-surface-muted); font-size: 0.875rem; margin-top: var(--space-1); }
.login-form .btn { width: 100%; margin-top: var(--space-4); height: 48px; font-size: 0.9375rem; }
.login-error { color: var(--color-error); font-size: 0.8125rem; text-align: center; margin-top: var(--space-4); display: none; }
.login-error.visible { display: block; animation: slideUp var(--duration-fast) var(--ease-out); }

/* ===== DASHBOARD ===== */
.plant-greeting {
    margin-bottom: var(--space-6);
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, var(--color-primary-surface) 0%, var(--color-surface-container) 100%);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-outline-subtle);
    position: relative; overflow: hidden;
}
.plant-greeting::after {
    content: ''; position: absolute; right: -20px; top: -20px;
    width: 120px; height: 120px; opacity: 0.06;
    background: var(--color-primary);
    border-radius: 60% 40% 70% 30% / 40% 60% 30% 70%;
    animation: leafSway 6s ease-in-out infinite;
}
.plant-greeting h1 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.plant-greeting p { color: var(--color-on-surface-muted); margin-top: var(--space-1); }

.sensor-card { position: relative; overflow: hidden; }
.sensor-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-lighter));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    opacity: 0; transition: opacity var(--duration-normal);
}
.sensor-card:hover::before { opacity: 1; }

.sensor-card-status {
    width: 10px; height: 10px; border-radius: 50%;
    position: absolute; top: var(--space-5); right: var(--space-5);
    box-shadow: 0 0 0 3px var(--color-surface-container);
}
.sensor-card-status.online { background-color: var(--color-success); box-shadow: 0 0 0 3px var(--color-surface-container), 0 0 8px var(--color-success); }
.sensor-card-status.offline { background-color: var(--color-on-surface-faint); }

.sensor-card-icon {
    width: 44px; height: 44px; border-radius: var(--radius-md);
    background: var(--color-primary-surface); display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-3);
}
.sensor-card-icon svg { width: 24px; height: 24px; fill: var(--color-primary); }

.sensor-card-name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; margin-bottom: 2px; }
.sensor-card-character { font-size: 0.75rem; color: var(--color-on-surface-faint); margin-bottom: var(--space-4); font-weight: 500; }

.sensor-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.sensor-value {
    display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm); background-color: var(--color-surface-container-high);
}
.sensor-value svg { width: 16px; height: 16px; flex-shrink: 0; }
.sensor-value-temp svg { fill: var(--tp-bloom-500); }
.sensor-value-moisture svg { fill: var(--tp-water-500); }
.sensor-value-light svg { fill: var(--tp-sun-500); }
.sensor-value-conductivity svg { fill: var(--tp-earth-400); }
.sensor-value-label { font-size: 0.6875rem; color: var(--color-on-surface-faint); }
.sensor-value-number { font-size: 0.9375rem; font-weight: 600; }

.sensor-card-message {
    font-size: 0.8125rem; color: var(--color-on-surface-muted);
    border-top: 1px solid var(--color-outline-subtle);
    padding-top: var(--space-3); margin-top: var(--space-3);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-style: italic;
}

/* ===== CHAT ===== */
.chat-container {
    display: flex; flex-direction: column;
    height: calc(100vh - var(--navbar-h) - var(--space-8));
    max-width: 760px; margin: 0 auto;
    background: var(--color-surface-container);
    border-radius: var(--radius-xl); border: 1px solid var(--color-outline-subtle);
    overflow: hidden;
}
.chat-header {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-container-high);
    border-bottom: 1px solid var(--color-outline-subtle);
}
.chat-header-back { display: flex; }
.chat-sensor-info {
    display: flex; gap: var(--space-3); padding: var(--space-2) var(--space-4);
    overflow-x: auto; border-bottom: 1px solid var(--color-outline-subtle);
    background-color: var(--color-surface);
}
.chat-messages {
    flex: 1; overflow-y: auto; padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-3);
    background: var(--color-surface);
    background-image: var(--leaf-pattern);
}
.chat-bubble {
    max-width: 78%; padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg); font-size: 0.9375rem; line-height: 1.55;
    word-wrap: break-word; animation: slideUp var(--duration-fast) var(--ease-out);
}
.chat-bubble-plant {
    align-self: flex-start;
    background: linear-gradient(135deg, var(--color-primary-surface) 0%, var(--color-surface-container) 100%);
    color: var(--color-on-primary-surface);
    border-bottom-left-radius: var(--space-1);
    border: 1px solid var(--color-outline-subtle);
}
.chat-bubble-user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--color-secondary-surface) 0%, var(--color-surface-container-high) 100%);
    color: var(--color-on-surface);
    border-bottom-right-radius: var(--space-1);
    border: 1px solid var(--color-outline-subtle);
}
.chat-bubble-system {
    align-self: center;
    background-color: var(--color-surface-container);
    color: var(--color-on-surface-muted); font-size: 0.8125rem;
    border-radius: var(--radius-sm); max-width: 90%;
    border: 1px solid var(--color-outline-subtle);
}
.chat-bubble-name { font-size: 0.75rem; font-weight: 700; color: var(--color-primary); margin-bottom: 2px; font-family: var(--font-display); }
.chat-bubble-time { font-size: 0.6875rem; color: var(--color-on-surface-faint); margin-top: 4px; }
.chat-load-more { text-align: center; padding: var(--space-4); }
.chat-info-bar {
    padding: var(--space-3) var(--space-4); background: var(--color-surface-container-high);
    border-top: 1px solid var(--color-outline-subtle);
    font-size: 0.8125rem; color: var(--color-on-surface-faint); text-align: center;
    font-weight: 500;
}

/* ===== CHARACTER CARDS ===== */
.character-card { position: relative; overflow: hidden; }
.character-card .badge { position: absolute; top: var(--space-4); right: var(--space-4); }
.character-card::before {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%;
    background: linear-gradient(to top, var(--color-primary-surface) 0%, transparent 100%);
    opacity: 0; transition: opacity var(--duration-normal);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.character-card:hover::before { opacity: 0.3; }
.character-preview {
    background-color: var(--color-surface-container); border-radius: var(--radius-md);
    padding: var(--space-4); margin-top: var(--space-4); font-size: 0.875rem;
    color: var(--color-on-surface-muted);
    border-left: 3px solid var(--color-primary); font-style: italic;
}

/* ===== GROUP CARDS ===== */
.group-card { position: relative; }
.group-card .chip { font-size: 0.75rem; padding: 4px 10px; }