/* Thatha Patti AI chatbot - mobile first */
#tpc-root, #tpc-root * { box-sizing: border-box; }
#tpc-root {
    --tpc-main: var(--tpGoldDark, #994513);
    --tpc-accent: var(--tpGold, #D0907F);
    --tpc-bg: #fbf7f4;
    font-family: 'Poppins', 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.45;
}

/* launcher */
#tpc-launcher {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 99990;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    min-width: 56px;
    padding: 0 16px;
    border: 0;
    border-radius: 28px;
    background: var(--tpc-main);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    font: 600 14px 'Poppins', sans-serif;
    justify-content: center;
}
#tpc-launcher svg { width: 26px; height: 26px; fill: #fff; flex: none; }
#tpc-launcher .tpc-lbl { display: none; }
#tpc-launcher .tpc-dot {
    position: absolute; top: 6px; right: 6px; width: 12px; height: 12px;
    background: #22c55e; border: 2px solid #fff; border-radius: 50%;
}
#tpc-root.tpc-open #tpc-launcher { display: none; }

/* panel: full screen on phones */
#tpc-panel {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    flex-direction: column;
    background: var(--tpc-bg);
    height: 100vh;
    height: 100dvh;
}
#tpc-root.tpc-open #tpc-panel { display: flex; }

.tpc-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    background: var(--tpc-main); color: #fff;
}
.tpc-avatar {
    width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--tpc-main);
    display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none;
}
.tpc-title { flex: 1; min-width: 0; }
.tpc-title strong { display: block; font-size: 15px; }
.tpc-title span { font-size: 12px; opacity: .85; }
.tpc-title span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #22c55e; }
.tpc-icon-btn {
    width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15);
    color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; flex: none;
}
.tpc-icon-btn svg { width: 20px; height: 20px; fill: #fff; }

.tpc-body {
    flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.tpc-msg {
    max-width: 85%; padding: 10px 13px; border-radius: 16px; word-wrap: break-word; white-space: pre-wrap;
    animation: tpc-in .18s ease-out;
}
.tpc-bot { align-self: flex-start; background: #fff; color: #333; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.tpc-bot a { color: var(--tpc-main); text-decoration: underline; word-break: break-all; }
.tpc-user { align-self: flex-end; background: var(--tpc-main); color: #fff; border-bottom-right-radius: 4px; }
.tpc-typing { display: inline-flex; gap: 4px; padding: 14px; }
.tpc-typing i { width: 7px; height: 7px; background: #bbb; border-radius: 50%; animation: tpc-b 1s infinite; }
.tpc-typing i:nth-child(2) { animation-delay: .15s; }
.tpc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tpc-b { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes tpc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tpc-chips { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 100%; }
.tpc-chip {
    border: 1.5px solid var(--tpc-main); background: #fff; color: var(--tpc-main); border-radius: 18px;
    padding: 8px 14px; font: 500 14px 'Poppins', sans-serif; cursor: pointer; min-height: 40px; text-align: left;
}
.tpc-chip:active { background: var(--tpc-main); color: #fff; }
.tpc-chip.tpc-primary { background: var(--tpc-main); color: #fff; }

.tpc-foot {
    display: flex; gap: 8px; padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid #eee;
}
.tpc-foot input {
    flex: 1; min-width: 0; border: 1px solid #ddd; border-radius: 22px; padding: 11px 16px; height: 44px;
    font-size: 16px; /* prevents iOS zoom */ outline: none; background: #fafafa; color: #222;
}
.tpc-foot input:focus { border-color: var(--tpc-main); background: #fff; }
.tpc-send {
    width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--tpc-main); cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex: none;
}
.tpc-send svg { width: 20px; height: 20px; fill: #fff; }
.tpc-send:disabled { opacity: .5; }
.tpc-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.tpc-note { text-align: center; font-size: 11px; color: #999; padding: 0 12px 6px; background: #fff; }

/* tablets and desktop: floating card */
@media (min-width: 768px) {
    #tpc-launcher { right: 24px; bottom: 24px; }
    #tpc-launcher .tpc-lbl { display: inline; }
    #tpc-panel {
        inset: auto 24px 24px auto;
        width: 380px; height: 600px; max-height: calc(100vh - 48px);
        border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    }
    .tpc-head { padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .tpc-msg, .tpc-typing i { animation: none; } }

/* Keep the back-to-top button clear of the chat launcher (stacked just above it) */
.go-top, .go-top.active {
    top: auto;
    transform: none;
    right: 19px;
    bottom: 84px;
    width: 46px;
    height: 46px;
    line-height: 46px;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
}
.go-top:not(.active) { pointer-events: none; }
@media (min-width: 768px) {
    .go-top, .go-top.active { right: 29px; bottom: 92px; }
}

/* attention nudge (shown 10s after page entry) */
.tpc-teaser {
    position: fixed; right: 14px; bottom: 80px; z-index: 99989;
    width: min(260px, calc(100vw - 28px)); padding: 12px 34px 12px 14px;
    background: #fff; color: #333; border-radius: 14px 14px 4px 14px; cursor: pointer;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22); font-size: 14px; line-height: 1.4;
    display: none; flex-direction: column; gap: 2px;
}
.tpc-teaser strong { color: var(--tpc-main); font-size: 15px; }
.tpc-teaser-x {
    position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; border-radius: 50%;
    background: transparent; color: #888; font-size: 20px; line-height: 1; cursor: pointer;
}
#tpc-root.tpc-nudge:not(.tpc-open) .tpc-teaser { display: flex; animation: tpc-pop .35s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes tpc-pop { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: none; } }
#tpc-root.tpc-pulse:not(.tpc-open) #tpc-launcher { animation: tpc-ring 1.6s ease-out 5, tpc-wiggle 1.6s ease-in-out 5; }
@keyframes tpc-ring { 0% { box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 0 0 0 rgba(153, 69, 19, .55); } 70%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 0 0 18px rgba(153, 69, 19, 0); } }
@keyframes tpc-wiggle { 0%, 50%, 100% { transform: none; } 10%, 30% { transform: rotate(-8deg); } 20%, 40% { transform: rotate(8deg); } }
/* keep the back-to-top button above the bubble while it is showing */
body.tpc-teaser-on .go-top.active { bottom: 150px; }
@media (min-width: 768px) {
    .tpc-teaser { right: 24px; bottom: 92px; }
    body.tpc-teaser-on .go-top.active { bottom: 160px; }
}
@media (prefers-reduced-motion: reduce) {
    #tpc-root.tpc-pulse:not(.tpc-open) #tpc-launcher, #tpc-root.tpc-nudge .tpc-teaser { animation: none; }
}