/* ==================================================
   ROCKY CHATBOT - STABLE ARCHITECTURE VERSION
================================================== */
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');
#rocky-chatbot-container {
    position: fixed;
    bottom: 24px;
    right: 12px;
    z-index: 2147483647;

    --pclr: #5b7f95;
    --bdrclr: #ff671f;
    --inrclr: #eaebeb;
    --bggr: linear-gradient(142deg, var(--pclr) 0%, hsl(from var(--pclr) h s calc(l - 8)) 100%);
}
#rocky-chatbot-container,
#rocky-chatbot-container :is( div, p, h3, textarea, input, ::placeholder) {
    font-family: "Karla", sans-serif;
}
#rocky-chatbot-container ::placeholder {
    color: #aaa;
}

/* =========================
   OUTER SHELL (MINIMIZE CONTROL)
========================= */

#rocky-chat-shell {
    width: 400px;
    max-width: 80vw;
    height: 0;
    max-height: 75vh;
    overflow: hidden;
    transition: height 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    box-shadow: 0 0 0 0 #0000, 0 0 0 0 #fff0;
    border-radius: 20px;
    opacity: 0;
}

#rocky-chatbot-container.open #rocky-chat-shell {
    box-shadow: 0 4px 12px 0 #0004, 0 0 0 2px var(--bdrclr);
    height: 75vh;
    opacity: 1;
}
#rocky-chatbot-container.open #rocky-toggle { height: 0px !important; overflow: hidden; padding: 0; opacity: 0; }

/* =========================
   INNER CHAT LAYOUT
========================= */

#rocky-chat-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    overflow: hidden;
    border-radius: 20px;
}

/* =========================
   HEADER
========================= */

.rocky-header {
    background: var(--bggr);
    color: white;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid #0001;
    h3 { font-size: 20px; font-weight: 600; margin: 8px 0 0 0; }
    .rocky-status { padding-top: 2px; }
}

.rocky-header-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.rocky-avatar {
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: inset 0 0 0 2px #0003;
    img { width: 80%; height: 80%; }
}
.rocky-avatar.large {
    width: 80px;
    height: 80px;
}
#rocky-toggle:hover .rocky-avatar img { 
    animation-name: hover-wiggle;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    display: inline-block;
}
@keyframes hover-wiggle {
  0% { transform: rotate(0deg); }
  4% { transform: rotate(-12deg); }
  8% { transform: rotate(12deg); } 
  12% { transform: rotate(-12deg); } 
  16% { transform: rotate(0deg); } 
}

.rocky-minimize {
    background: #000;
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    font-size: 18px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    right: 12px; top: 12px;
    opacity: 0.42;
    &:hover { opacity: 1; }
}
#rocky-chatbot-container:not( .open ) .rocky-minimize { display: none; }

/* =========================
   MESSAGES (SCROLL AREA)
========================= */

#rocky-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--inrclr);
}

.rocky-message {
    margin-bottom: 12px;
}

.rocky-message-content {
    padding: 12px 16px;
    border-radius: 18px;
    max-width: 85%;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 1.42;
}

.rocky-bot .rocky-message-content {
    background: white;
    border-radius: 18px 18px 18px 4px;
    border: 1px solid #ddd;
    a { color: var(--pclr); }
}

.rocky-user .rocky-message-content {
    background: var(--bggr);
    color: white;
    border-radius: 18px 18px 4px 18px;
    margin-left: auto;
}

.rocky-message-time {
    font-size: 10px;
    opacity: 0.6;
    margin-top: 4px;
}

/* =========================
   INPUT
========================= */

.rocky-input-area {
    padding: 12px;
    padding-bottom: 4px;
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    background: var(--inrclr);
    border-top: 1px solid #0001;
}

#rocky-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #ddd;
    font-size: 16px;
    resize: none;
    &::-webkit-scrollbar { display: none; }
    -ms-overflow-style: none;
    scrollbar-width: none;
    &:focus { outline: none; }
}
@media screen and (max-width: 600px) { 
    #rocky-input { height: 48px; }
}

#rocky-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--pclr);
    box-shadow: inset 0 0 0 1px #fff4;
    color: white;
    cursor: pointer;
    &:hover { 
        animation-name: hover-wiggle;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        display: inline-block;
    }
}
#rocky-send::before {
    content: ''; display: block;
    width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='14' viewBox='0 0 13 14' fill='none'%3E%3Cpath d='M12.9318 1.6004C13.2507 0.650217 12.3958 -0.270542 11.5135 0.0737485L0.730766 4.27362C-0.154448 4.6187 -0.261501 5.91954 0.552837 6.42762L3.99476 8.57368L7.06828 5.26355C7.20752 5.11871 7.39401 5.03857 7.58759 5.04038C7.78117 5.04219 7.96634 5.12582 8.10323 5.27324C8.24011 5.42066 8.31776 5.62009 8.31944 5.82857C8.32112 6.03705 8.24671 6.2379 8.11222 6.38787L5.03871 9.69799L7.0321 13.4049C7.50313 14.2819 8.71098 14.1658 9.0314 13.2133L12.9318 1.6004Z' fill='white'/%3E%3C/svg%3E");
    background-size: 64%; background-position: 50% 54%;
    background-repeat: no-repeat;
}

.rocky-disclosure {
    padding: 0 0 6px 28px;
    background: var(--inrclr);
    color: #aaa;
    font-size: 12px;
    font-weight: 400;
}

/* =========================
   FOOTER
========================= */

.rocky-footer {
    padding: 8px;
    font-size: 10px;
    font-weight: 400;
    text-align: center;
    background: var(--bggr);
    color: #fffa;
    border-top: 1px solid #0001;
    flex-shrink: 0;
    a { 
        color: #fffd; font-weight: 700; text-decoration: none;
        &:hover { text-decoration: underline; color: #fff; }
    }
}

/* =========================
   TOGGLE BUBBLE
========================= */

#rocky-toggle {
    background: var(--bggr);
    color: white;
    box-shadow: 0 4px 8px 0 #0004, inset 0 0 0 2px var(--bdrclr);
    padding: 8px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: end;
    width: fit-content;
    gap: 10px;
    cursor: pointer;
    margin-left: auto;
}

.rocky-toggle-text { 
    padding: 8px 16px;
    font-weight: 500;
}
@media screen and (max-width: 600px) {
    .rocky-toggle-text{ display: none; }
    #rocky-toggle::before { 
        /* content: "Chat Here"; */
        display: inline-block;
        width: fit-content;
        padding: 8px 16px;
        font-weight: 500;
    }
}

/* =========================
   TYPING INDICATOR
========================= */

.rocky-typing .rocky-message-content {
    background: #f0f0f0 !important;
    padding: 10px 16px !important;
    width: fit-content;
}

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

.rocky-typing-dots span {
    width: 6px;
    height: 6px;
    background: #999;
    border-radius: 50%;
    display: inline-block;
    animation: rocky-typing-blink 1.4s infinite both;
}

.rocky-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.rocky-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes rocky-typing-blink {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.1); }
}