/**
 * NRET RealHomes Chatbot Stylesheet
 * Responsive CSS with theme styling (#e00712), 3-dot typing animation, select fixes & placeholder transparency
 */

.nret-bot-wrapper {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

.nret-bot-wrapper *,
.nret-bot-wrapper *::before,
.nret-bot-wrapper *::after {
    box-sizing: border-box;
}

/* Floating Trigger Button */
.nret-bot-trigger-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #e00712;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 25px rgba(224, 7, 18, 0.4);
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.nret-bot-trigger-btn:hover {
    background-color: #c4050e;
    transform: scale(1.03);
}

.nret-trigger-badge {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.nret-trigger-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modal Window */
.nret-bot-window {
    width: 400px;
    max-width: calc(100vw - 32px);
    height: 640px;
    max-height: calc(100vh - 80px);
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.nret-hidden {
    display: none !important;
}

/* Header */
.nret-bot-header {
    height: 56px;
    padding: 0 16px;
    background-color: #e00712;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    shrink: 0;
}

.nret-bot-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nret-bot-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #ffffff;
    background-color: #ffffff;
    shrink: 0;
}

.nret-bot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nret-bot-title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.2;
}

.nret-bot-subtitle {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.9);
}

.nret-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nret-header-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.nret-header-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Chat Body */
.nret-bot-messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Message Rows */
.nret-msg-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.nret-user-row {
    justify-content: flex-end;
}

.nret-bot-row {
    justify-content: flex-start;
}

.nret-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #e00712;
    background-color: #ffffff;
    shrink: 0;
    margin-top: 2px;
}

.nret-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nret-msg-bubble {
    max-width: 85%;
    padding: 12px 14px;
    border-radius: 16px;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word;
}

.nret-user-bubble {
    background-color: #e00712;
    color: #ffffff;
    border-bottom-right-radius: 2px;
    font-weight: 600;
}

.nret-bot-bubble {
    background-color: #ffffff;
    color: #111827;
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.nret-msg-bubble p {
    margin: 0;
}

.nret-msg-time {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    margin-top: 6px;
    opacity: 0.7;
}

/* 3-Dot Typing Animation */
.nret-typing-bubble {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 8px 12px;
    border-radius: 16px;
    border-bottom-left-radius: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.nret-typing-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: #9ca3af;
}

.nret-typing-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nret-dot {
    width: 6px;
    height: 6px;
    background-color: #e00712;
    border-radius: 50%;
    animation: nretBounce 1.2s infinite ease-in-out;
}

.nret-dot:nth-child(1) { animation-delay: 0s; }
.nret-dot:nth-child(2) { animation-delay: 0.2s; }
.nret-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes nretBounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
}

/* Category Selection Menu */
.nret-menu-box {
    background-color: #ffffff;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    margin-left: 36px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.nret-menu-title {
    margin: 0 0 10px 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #374151;
}

.nret-cat-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.nret-cat-btn {
    width: 100%;
    text-align: center;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9999px;
    text-transform: uppercase;
    cursor: pointer;
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.nret-cat-btn:hover {
    border-color: #e00712;
    color: #e00712;
}

.nret-cat-primary {
    background-color: #e00712;
    color: #ffffff;
    border-color: #e00712;
}

.nret-cat-primary:hover {
    background-color: #c4050e;
    color: #ffffff;
}

/* Filter Form */
.nret-form-card {
    background-color: #ffffff;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    margin-left: 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.nret-form-heading {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #374151;
    letter-spacing: 0.03em;
}

.nret-field-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nret-field-box label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    color: #6b7280;
}

.nret-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.nret-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0 6px;
    height: 32px;
}

.nret-stepper-btn {
    background: transparent;
    border: none;
    font-weight: 800;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.nret-stepper-btn:hover {
    background-color: #f3f4f6;
}

.nret-stepper-val {
    font-size: 12px;
    font-weight: 700;
    color: #111827;
}

/* Select Fixes: Ensured full padding, no cut off text */
.nret-select {
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-color: #ffffff;
    outline: none;
    cursor: pointer;
    min-height: 38px;
    box-sizing: border-box;
}

.nret-checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background-color: #f9fafb;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.nret-checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
}

.nret-checkbox-grid input[type="checkbox"] {
    accent-color: #e00712;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* Input Placeholder Fix: Very light transparent placeholders */
.nret-input {
    width: 100%;
    font-size: 12px;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    outline: none;
    min-height: 36px;
    box-sizing: border-box;
}

.nret-input::placeholder {
    color: #9ca3af;
    opacity: 0.5;
    font-weight: 400;
}

.nret-rel {
    position: relative;
}

.nret-suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    max-height: 140px;
    overflow-y: auto;
    z-index: 100;
}

.nret-suggestion-item {
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
}

.nret-suggestion-item:hover {
    background-color: #fef2f2;
    color: #e00712;
}

.nret-feature-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.nret-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #fee2e2;
    color: #e00712;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid #fca5a5;
}

.btn-remove-chip {
    background: transparent;
    border: none;
    color: #e00712;
    font-weight: 900;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.nret-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nret-price-val {
    font-size: 10px;
    font-weight: 800;
    color: #e00712;
}

.nret-dual-slider-box {
    background-color: #f9fafb;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nret-dual-slider-track {
    position: relative;
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
}

.nret-slider-rail {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    background-color: #e5e7eb;
    border-radius: 4px;
    z-index: 1;
}

.nret-slider-range-fill {
    position: absolute;
    height: 6px;
    background-color: #e00712;
    border-radius: 4px;
    z-index: 2;
    transition: left 0.05s ease, width 0.05s ease;
}

.nret-dual-slider-track input[type="range"] {
    position: absolute;
    left: 0;
    width: 100%;
    height: 6px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    z-index: 3;
    outline: none;
}

.nret-dual-slider-track input[type="range"]::-webkit-slider-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #e00712;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    -webkit-appearance: none;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.nret-dual-slider-track input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    background-color: #c4050e;
}

.nret-dual-slider-track input[type="range"]::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #e00712;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.nret-dual-slider-track input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.15);
    background-color: #c4050e;
}

.nret-btn-submit-search {
    width: 100%;
    padding: 12px;
    background-color: #e00712;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.nret-btn-submit-search:hover {
    background-color: #c4050e;
}

/* Property Results View */
.nret-results-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.nret-cards-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nret-property-card {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.nret-card-media {
    height: 140px;
    position: relative;
    background-color: #e5e7eb;
}

.nret-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nret-card-badge-container {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

.nret-card-badge-num {
    background-color: #e00712;
    color: #ffffff;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.nret-card-badge-price {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(224, 7, 18, 0.5);
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 800;
}

.nret-card-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nret-card-title {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: #1f2937;
}

.nret-card-excerpt {
    margin: 0;
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
}

.nret-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 6px;
    border-top: 1px solid #f3f4f6;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: #9ca3af;
}

.nret-card-link {
    font-size: 10px;
    font-weight: 800;
    color: #e00712;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 2px;
	width: max-content;
}

.nret-card-link:hover {
    text-decoration: underline;
}

/* Pagination Bar */
.nret-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f3f4f6;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.nret-page-info {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
}

.nret-page-btns {
    display: flex;
    gap: 4px;
}

.nret-page-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.nret-page-btn.active {
    background-color: #e00712;
    color: #ffffff;
    border-color: #e00712;
}

/* REQUIREMENT 2: Search More Properties Message Box at the end of properties list */
.nret-search-more-box {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nret-search-more-text {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

.nret-btn-more-properties {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    background-color: #e00712;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.nret-btn-more-properties:hover {
    background-color: #c4050e;
}

/* Results Actions: ADJUST FILTERS & BACK TO MENU */
.nret-results-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
}

.nret-actions-centered {
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

.nret-actions-centered .nret-btn-adjust-filters,
.nret-actions-centered .nret-btn-back-menu,
.nret-results-actions .nret-btn-adjust-filters,
.nret-results-actions .nret-btn-back-menu {
    max-width: 260px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.nret-btn-adjust-filters {
    width: 100%;
    padding: 10px;
    background-color: #ffffff;
    border: 2px solid #e00712;
    color: #e00712;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.nret-btn-adjust-filters:hover {
    background-color: #fef2f2;
}

.nret-btn-back-menu {
    width: 100%;
    padding: 10px;
    background-color: #6b7280;
    border: none;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nret-btn-back-menu:hover {
    background-color: #e00712;
    color: #ffffff;
}

/* 100% Exact Match Badge */
.nret-exact-match-tag {
    background-color: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    white-space: nowrap;
}

/* Green Matched Features Container and Tags in nret-card-body */
.nret-card-matched-features {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    margin-bottom: 4px;
}

.nret-matched-feature-tag {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Highlight count in bot message */
.nret-count-highlight {
    color: #e00712;
    font-weight: 800;
    font-size: 1.08em;
}

/* Footer */
.nret-bot-footer {
    padding: 10px;
    border-top: 1px solid #e5e7eb;
    background-color: #ffffff;
    text-align: center;
}

.nret-footer-text {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
}

/* BURBUJA DE PENSAMIENTO */
/* Contenedor posicionado sobre el GIF */
.nret-thought-sequence-container {
    position: absolute;
    bottom: 28px;
    right: 0;
    width: auto;
    height: auto;
    z-index: 99;
}

/* Base común para los puntos blancos (la colita del pensamiento) */
.nret-bubble-dot {
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

/* --- PASO 1: Primer punto chiquito --- 
   Aparece al inicio (4%) -> Se oculta al final en reversa (92%) */
.nret-bubble-dot.dot-1 {
    width: 4px;
    height: 4px;
    bottom: 4px;
    right: 16px;
    animation: loopDot1 5s ease-in-out infinite;
}

/* --- PASO 2: Segundo punto mediano --- 
   Aparece después (10%) -> Se oculta antes en reversa (86%) */
.nret-bubble-dot.dot-2 {
    width: 6px;
    height: 6px;
    bottom: 11px;
    right: 12px;
    animation: loopDot2 5s ease-in-out infinite;
}

/* --- PASO 3 Y 4: Tercera Bolita / Cuerpo Principal --- 
   Emerge verticalmente justo arriba de la segunda bolita, adopta forma esférica,
   luego se estira horizontalmente y al final del ciclo se desinfla en reversa. */
.nret-thought-body-bubble {
    position: absolute;
    bottom: 20px;       
    right: -10px;       
    background: #ffffff; 
    padding: 5px 9px;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.18);
    white-space: nowrap; 
    opacity: 0;
    transform: scale(0);
    /* Alineación de origen: exactamente en el eje vertical de la segunda bolita */
    transform-origin: 24px bottom; 
    animation: loopMorphBubbleReverse 5s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    right: 8px;
}

/* --- PASO 5: Texto de la Burbuja --- 
   Aparece cuando se estira (34%) -> Se desvanece antes de que empiece la reversa (74%) */
.nret-bubble-text {
    color: #e00712; 
    font-size: 11px;
    font-weight: bold;
    opacity: 0;
    display: inline-block;
    animation: loopFadeTextReverse 5s ease-out infinite;
}

/* ==========================================================================
   LÓGICA CRONOLÓGICA DE REVERSA (SINCRONIZADO CON EL GIF DE 5 SEGUNDOS)
   ========================================================================== */

/* Línea de tiempo Punto 1 (Aparece primero [4%], se va de último [92%]) */
@keyframes loopDot1 {
    0%, 3.9%   { opacity: 0; transform: scale(0); }
    4%, 92%    { opacity: 1; transform: scale(1); } 
    92.1%, 100% { opacity: 0; transform: scale(0); } 
}

/* Línea de tiempo Punto 2 (Aparece segundo [10%], se va segundo en reversa [86%]) */
@keyframes loopDot2 {
    0%, 9.9%   { opacity: 0; transform: scale(0); }
    10%, 86%   { opacity: 1; transform: scale(1); } 
    86.1%, 100% { opacity: 0; transform: scale(0); } 
}

/* Línea de tiempo de la Tercera Bolita y su transformación / reversa */
@keyframes loopMorphBubbleReverse {
    0%, 15.9% {
        opacity: 0;
        transform: scale(0);
        width: 14px;
        height: 14px;
        border-radius: 50%;
    }
    /* 🎬 ENTRADA PASO A PASO: */
    /* 22% (1.1s): Nace la TERCERA BOLITA redonda y mediana justo arriba del punto 2 */
    22% {
        opacity: 1;
        transform: scale(1.4);
        width: 14px;
        height: 14px;
        border-radius: 50%;
        right: 8px;
        animation: loopDot2 5s ease-in-out infinite;
    }
    /* 30% al 76%: Se expande horizontalmente al tamaño completo con el texto */
    30%, 76% {
        opacity: 1;
        transform: scale(1);
        width: auto;
        height: auto;
        border-radius: 12px;
		right: 8px;
    }
    /* 🎬 SALIDA EN REVERSA: */
    /* 82% (4.1s): Se encoge de regreso a la TERCERA BOLITA mediana y redonda */
    82% {
        opacity: 1;
        transform: scale(1.4);
        width: 14px;
        height: 14px;
        border-radius: 50%;
		right: 8px;
    }
    /* 84% (4.2s) a 100%: Desaparece por completo antes que los puntos inferiores */
    84%, 100% {
        opacity: 0;
        transform: scale(0);
        width: 14px;
        height: 14px;
        border-radius: 50%;
		right: 8px;
    }
}

/* Línea de tiempo del Texto (Se oculta antes de que comience el achicamiento) */
@keyframes loopFadeTextReverse {
    0%, 29.9%   { opacity: 0; transform: translateY(3px); }
    34%, 74%    { opacity: 1; transform: translateY(0); } /* Totalmente legible */
    75%, 100%   { opacity: 0; transform: translateY(-2px); } /* Desaparece suavemente */
}