/* ==========================================================================
   Tropical Realty Costa Rica — chat assistant (Views/public/_chatbot.php)

   Loaded by BOTH public layouts, so it carries its own tokens instead of
   borrowing site.css's --tr-* (design A) or site-alt.css's --dp-* (design B):
   the widget then looks the same whichever design wins, and neither theme can
   knock it about. Values are the logo palette, same as everywhere else.
   ========================================================================== */

.tr-chat-launcher,
.tr-chat-greeting,
.tr-chat {
    --chat-blue: #0090d2;
    --chat-blue-dark: #005c8a;
    --chat-teal: #16b5a8;
    --chat-ink: #0d2e3d;
    --chat-muted: #64808e;
    --chat-line: #e2edf2;
    --chat-mist: #f2f8fb;
    --chat-grad: linear-gradient(120deg, var(--chat-teal), var(--chat-blue));
    --chat-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    font-family: var(--chat-font);
    box-sizing: border-box;
}

.tr-chat *,
.tr-chat *::before,
.tr-chat *::after { box-sizing: border-box; }

/* ------------------------------------------------------------- launcher --- */

.tr-chat-launcher {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1045;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: 5px 20px 5px 5px;
    border: 0;
    border-radius: 999px;
    background: var(--chat-grad);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    box-shadow: 0 14px 34px rgba(0, 92, 138, .38);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.tr-chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(0, 92, 138, .48); }

.tr-chat-launcher-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--chat-blue);
    animation: trChatPulse 2.6s ease-out infinite;
}

@keyframes trChatPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
    70%, 100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .tr-chat-launcher-icon { animation: none; }
}

body.tr-chat-open .tr-chat-launcher { display: none; }

/* On a phone an open search dropdown fills most of the screen and its Done
   button lands in this corner, where the launcher was covering it. The search
   bar sits in its own stacking context, so no z-index on the panel can win —
   the launcher steps aside for as long as a picker is open instead. */
@media (max-width: 640px) {
    body.tr-picker-open .tr-chat-launcher,
    body.tr-picker-open .tr-chat-greeting { display: none; }
}

/* ------------------------------------------------------------- greeting --- */

.tr-chat-greeting {
    position: fixed;
    right: 20px;
    bottom: 84px;
    z-index: 1044;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    max-width: 258px;
    padding: .85rem 1rem;
    border-radius: 18px 18px 6px 18px;
    background: #fff;
    color: var(--chat-ink);
    box-shadow: 0 16px 40px rgba(13, 46, 61, .18);
    cursor: pointer;
    animation: trChatPop .3s ease both;
}

.tr-chat-greeting[hidden] { display: none; }
body.tr-chat-open .tr-chat-greeting { display: none; }

.tr-chat-greeting-text { margin: 0; font-size: .9rem; font-weight: 600; line-height: 1.4; }

.tr-chat-greeting-close {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--chat-mist);
    color: var(--chat-muted);
    cursor: pointer;
}

.tr-chat-greeting-close:hover { background: var(--chat-line); color: var(--chat-ink); }

/* ----------------------------------------------------------------- panel --- */

.tr-chat {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1050;
    width: 390px;
    height: min(640px, calc(100vh - 40px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 22px;
    background: var(--chat-mist);
    box-shadow: 0 30px 80px rgba(13, 46, 61, .32);
    animation: trChatIn .35s cubic-bezier(.2, .8, .2, 1) both;
}

.tr-chat[hidden] { display: none; }

@keyframes trChatIn {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to { opacity: 1; transform: none; }
}

.tr-chat-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1rem;
    background: var(--chat-grad);
    color: #fff;
}

.tr-chat-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.tr-chat-head-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.tr-chat-head-text strong { font-size: .98rem; font-weight: 700; }
.tr-chat-head-text small { display: flex; align-items: center; gap: .4rem; font-size: .76rem; opacity: .9; }
.tr-chat-online { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #4ade80; }

.tr-chat-icon-btn {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
}

.tr-chat-icon-btn:hover { background: rgba(255, 255, 255, .3); }

/* -------------------------------------------------------------- messages --- */

.tr-chat-messages {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1rem;
    overflow-y: auto;
}

.tr-chat-msg {
    max-width: 86%;
    padding: .65rem .95rem;
    border-radius: 16px;
    font-size: .92rem;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
    animation: trChatPop .25s ease both;
}

@keyframes trChatPop {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.tr-chat-msg--bot {
    align-self: flex-start;
    border-bottom-left-radius: 5px;
    background: #fff;
    color: var(--chat-ink);
    box-shadow: 0 4px 14px rgba(13, 46, 61, .07);
}

.tr-chat-msg--user {
    align-self: flex-end;
    border-bottom-right-radius: 5px;
    background: var(--chat-grad);
    color: #fff;
}

.tr-chat-typing { display: inline-flex; gap: 4px; padding: .8rem .95rem; }
.tr-chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: #9ab3bf; animation: trChatDot 1s infinite ease-in-out; }
.tr-chat-typing span:nth-child(2) { animation-delay: .15s; }
.tr-chat-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes trChatDot {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* -------------------------------------------------------------- controls --- */

.tr-chat-controls {
    flex: 0 0 auto;
    max-height: 46%;
    overflow-y: auto;
    padding: .8rem 1rem .9rem;
    border-top: 1px solid var(--chat-line);
    background: #fff;
}

.tr-chat-controls:empty { display: none; }

.tr-chat-chips { display: flex; flex-wrap: wrap; gap: .45rem; }

.tr-chat-chip {
    padding: .45rem .9rem;
    border: 1.5px solid var(--chat-blue);
    border-radius: 999px;
    background: #fff;
    color: var(--chat-blue-dark);
    font-family: inherit;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.tr-chat-chip:hover { background: var(--chat-mist); }
.tr-chat-chip--toggle[aria-pressed="true"] { border-color: var(--chat-blue); background: var(--chat-blue); color: #fff; }

.tr-chat-primary {
    width: 100%;
    margin-top: .7rem;
    padding: .65rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--chat-grad);
    color: #fff;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}

.tr-chat-form { display: flex; align-items: flex-end; gap: .45rem; }

.tr-chat-input {
    padding: .6rem .85rem;
    border: 1.5px solid var(--chat-line);
    border-radius: 14px;
    background: var(--chat-mist);
    color: var(--chat-ink);
    font-family: inherit;
    font-size: .92rem;
}

.tr-chat-input { flex: 1 1 auto; width: 100%; min-width: 0; resize: none; }

/* The phone step's country picker wraps the field, so the wrapper takes the
   flex slot the bare input would otherwise have had. */
.tr-chat-form .iti { flex: 1 1 auto; min-width: 0; }
.tr-chat-form .iti .tr-chat-input { width: 100%; }

.tr-chat-input:focus {
    outline: 0;
    border-color: var(--chat-blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 144, 210, .14);
}

.tr-chat-send {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--chat-grad);
    color: #fff;
    cursor: pointer;
}

.tr-chat-error { margin-bottom: .5rem; color: #d92d20; font-size: .82rem; font-weight: 600; }
.tr-chat-error[hidden] { display: none; }

.tr-chat-link {
    display: block;
    margin-top: .55rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--chat-blue);
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------------------------------------------------------------- mobile --- */

@media (max-width: 575px) {
    .tr-chat { inset: 0; width: 100%; height: 100%; border-radius: 0; }
    .tr-chat-launcher { right: 16px; bottom: 16px; padding: 5px; }
    .tr-chat-launcher-text { display: none; }
    .tr-chat-greeting { right: 16px; bottom: 78px; max-width: calc(100vw - 32px); }
}