/* ==========================================================================
   Reconnect Dialog — Custom Blazor reconnect overlay
   Replaces the default blue spinner with botanical line-art animations
   matching the Keimzelle page style.
   Blazor automatically toggles CSS classes on #components-reconnect-modal:
     - components-reconnect-show     → reconnecting
     - components-reconnect-failed   → connection lost
     - components-reconnect-rejected → session expired
   ========================================================================== */

/* ---------- Overlay ---------- */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(255, 253, 248, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
}

[data-theme="dark"] #components-reconnect-modal {
    background: rgba(18, 20, 14, 0.94);
}

/* Show the overlay when Blazor adds a state class */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

/* ---------- Content card ---------- */
.reconnect-content {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #ffffff;
    border-radius: 20px;
    padding: 2.5rem 2rem 2rem;
    max-width: 360px;
    width: 90vw;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .reconnect-content {
    background: #24281c;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.30);
}

/* Show the right content block per state */
.components-reconnect-show .reconnect-show-content,
.components-reconnect-failed .reconnect-failed-content,
.components-reconnect-rejected .reconnect-rejected-content {
    display: flex;
}

/* ---------- Typography ---------- */
.reconnect-content h2 {
    margin: 1.25rem 0 0.4rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #2d3a1f;
}

[data-theme="dark"] .reconnect-content h2 {
    color: #f0f4eb;
}

.reconnect-content p {
    margin: 0 0 0.25rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #5a6b4a;
}

[data-theme="dark"] .reconnect-content p {
    color: #b0bca0;
}

/* ---------- Button ---------- */
#components-reconnect-modal .reconnect-content button {
    margin-top: 1.25rem;
    padding: 0.65rem 2rem;
    border: none;
    border-radius: 20px;
    background: #526C2B;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.45;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

#components-reconnect-modal .reconnect-content button:hover {
    background: #3f5520;
    box-shadow: none;
}

#components-reconnect-modal .reconnect-content button:active {
    transform: scale(0.97);
}

[data-theme="dark"] #components-reconnect-modal .reconnect-content button {
    background: #8ab64d;
    color: #fff;
}

[data-theme="dark"] #components-reconnect-modal .reconnect-content button:hover {
    background: #7aa43f;
}

/* ---------- SVG canvas ---------- */
.reconnect-svg {
    width: 120px;
    height: auto;
    overflow: visible;
}

/* ==========================================================================
   SHOW — Growing seedling (stroke line-art, Keimzelle style)
   Stem draws upward, leaves grow in staggered, gentle breathing loop.
   ========================================================================== */

.rc-show-plant {
    transform-origin: 50px 115px;
    animation: rc-sway 3s ease-in-out 2.5s infinite;
}

.rc-stem {
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
    animation: rc-draw 1.2s ease-out forwards;
}

.rc-leaf-l {
    transform-origin: 50px 68px;
    opacity: 0;
    transform: scale(0);
    animation: rc-grow 0.8s ease-out 0.8s forwards, rc-breathe-l 2.8s ease-in-out 2.5s infinite;
}

.rc-leaf-r {
    transform-origin: 50px 50px;
    opacity: 0;
    transform: scale(0);
    animation: rc-grow 0.8s ease-out 1.2s forwards, rc-breathe-r 3.2s ease-in-out 2.8s infinite;
}

.rc-leaf-top {
    transform-origin: 50px 38px;
    opacity: 0;
    transform: scale(0);
    animation: rc-grow 0.8s ease-out 1.6s forwards, rc-breathe-top 2.5s ease-in-out 3s infinite;
}

@keyframes rc-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes rc-grow {
    to { opacity: 1; transform: scale(1); }
}

@keyframes rc-sway {
    0%, 100% { transform: rotate(0deg); }
    30%      { transform: rotate(2.5deg); }
    70%      { transform: rotate(-2.5deg); }
}

@keyframes rc-breathe-l {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.12) rotate(-4deg); }
}

@keyframes rc-breathe-r {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.12) rotate(4deg); }
}

@keyframes rc-breathe-top {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

/* ==========================================================================
   FAILED — Wilted/drooping plant (stroke line-art)
   Stem draws, then droops. Leaves hang down. Gentle sway.
   ========================================================================== */

.rc-wilt-stem {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: rc-draw 1s ease-out forwards;
}

.rc-wilt-leaf-l {
    transform-origin: 42px 60px;
    opacity: 0;
    transform: scale(0) rotate(0deg);
    animation: rc-wilt-grow-l 0.8s ease-out 0.8s forwards;
}

.rc-wilt-leaf-r {
    transform-origin: 58px 70px;
    opacity: 0;
    transform: scale(0) rotate(0deg);
    animation: rc-wilt-grow-r 0.8s ease-out 1.1s forwards;
}

.rc-wilt-droop {
    opacity: 0;
    animation: rc-droop-in 0.8s ease-out 1.4s forwards;
}

.rc-wilt-head {
    transform-origin: 50px 35px;
    opacity: 0;
    transform: scale(0);
    animation: rc-grow 0.6s ease-out 1.2s forwards, rc-wilt-sway 5s ease-in-out 2s infinite;
}

@keyframes rc-wilt-grow-l {
    to { opacity: 0.7; transform: scale(1) rotate(25deg); }
}

@keyframes rc-wilt-grow-r {
    to { opacity: 0.7; transform: scale(1) rotate(-20deg); }
}

@keyframes rc-droop-in {
    from { opacity: 0; }
    to   { opacity: 0.5; }
}

@keyframes rc-wilt-sway {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(3deg); }
}

/* ==========================================================================
   REJECTED — Dandelion gone to seed (Pusteblume)
   Stem draws, dandelion head appears, seeds drift away one by one.
   "Time has passed" — clear, visible, poetic.
   ========================================================================== */

.rc-puste-stem {
    stroke-dasharray: 75;
    stroke-dashoffset: 75;
    animation: rc-draw 1.2s ease-out forwards;
}

.rc-puste-leaf {
    transform-origin: 50px 82px;
    opacity: 0;
    transform: scale(0);
    animation: rc-grow 0.8s ease-out 0.8s forwards;
}

.rc-puste-head {
    transform-origin: 50px 34px;
    opacity: 0;
    transform: scale(0);
    animation: rc-grow 0.6s ease-out 1.2s forwards;
}

/* Each seed drifts away on its own trajectory, looping */
.rc-puste-seed-1 {
    opacity: 0;
    animation: rc-drift-1 4s ease-in-out 2s infinite;
}

.rc-puste-seed-2 {
    opacity: 0;
    animation: rc-drift-2 4.5s ease-in-out 2.8s infinite;
}

.rc-puste-seed-3 {
    opacity: 0;
    animation: rc-drift-3 5s ease-in-out 3.5s infinite;
}

.rc-puste-seed-4 {
    opacity: 0;
    animation: rc-drift-4 4.2s ease-in-out 4.2s infinite;
}

@keyframes rc-drift-1 {
    0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    8%   { opacity: 0.7; }
    70%  { opacity: 0.4; }
    100% { opacity: 0; transform: translate(30px, -35px) rotate(60deg); }
}

@keyframes rc-drift-2 {
    0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    8%   { opacity: 0.7; }
    70%  { opacity: 0.4; }
    100% { opacity: 0; transform: translate(-25px, -40px) rotate(-45deg); }
}

@keyframes rc-drift-3 {
    0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    8%   { opacity: 0.7; }
    70%  { opacity: 0.4; }
    100% { opacity: 0; transform: translate(20px, -50px) rotate(80deg); }
}

@keyframes rc-drift-4 {
    0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    8%   { opacity: 0.7; }
    70%  { opacity: 0.4; }
    100% { opacity: 0; transform: translate(-18px, -30px) rotate(-70deg); }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .rc-show-plant, .rc-stem, .rc-leaf-l, .rc-leaf-r, .rc-leaf-top,
    .rc-wilt-stem, .rc-wilt-leaf-l, .rc-wilt-leaf-r, .rc-wilt-droop, .rc-wilt-head,
    .rc-puste-stem, .rc-puste-leaf, .rc-puste-head,
    .rc-puste-seed-1, .rc-puste-seed-2, .rc-puste-seed-3, .rc-puste-seed-4 {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
    }
}