/* 
 * TILT AI CHAT STYLES 
 * Static assets for caching optimization.
 * Variables are injected via PHP inline styles.
 */

#cc-floating-container {
    position: fixed; 
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Positioning is handled via inline styles in PHP due to logic complexity */
}

.cc-chat-wrapper {
    position: absolute; 
    width: 360px; 
    height: 600px;
    max-height: calc(100vh - 160px);
    max-width: calc(100vw - 40px);
    background: var(--cc-bg-window);
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: none; 
    flex-direction: column; 
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    /* Wrapper alignment handled via inline styles */
}

.cc-chat-wrapper.active { 
    display: flex; 
    animation: cc-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
}

/* TRIGGER BUTTON */
#cc-toggle-trigger {
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--cc-accent); color: var(--cc-header-text);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.3); border: none; outline: none;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}
#cc-toggle-trigger:hover { transform: scale(1.1); }

/* NUDGE (Oblačić) */
#cc-nudge {
    position: absolute; 
    /* Bottom/Right offsets are handled via inline styles for desktop/mobile consistency */
    background: #ffffff; color: #1f2937; padding: 14px 20px;
    border-radius: 16px; 
    box-shadow: 0 8px 30px rgba(0,0,0,0.12); font-size: 14px; font-weight: 600;
    white-space: nowrap; display: none; cursor: pointer; z-index: 999998;
}
#cc-nudge.active { display: block; animation: cc-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }

#cc-nudge-close { 
    position: absolute; top: -8px; right: -8px; 
    background: #f3f4f6; border-radius: 50%; width: 24px; height: 24px; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 14px; color: #6b7280; cursor: pointer; opacity: 0; 
    transition: all 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.1); border: 1px solid #fff; 
}
#cc-nudge:hover #cc-nudge-close { opacity: 1; transform: scale(1.1); }

/* HEADER */
.cc-header { 
    background: var(--cc-header-bg); 
    color: var(--cc-header-text); 
    padding: 20px; text-align: center; font-weight: 800; 
    position: relative; letter-spacing: 0.5px; 
}
#cc-close-btn { 
    position: absolute; right: 20px; top: 20px; 
    cursor: pointer; opacity: 0.8; font-size: 20px; transition: opacity 0.2s; 
}
#cc-close-btn:hover { opacity: 1; }

/* MESSAGES AREA */
.cc-messages { 
    flex-grow: 1; overflow-y: auto; padding: 20px; 
    background: var(--cc-bg-chat); 
    display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; 
}
.cc-message { 
    max-width: 85%; padding: 12px 16px; border-radius: 18px; 
    font-size: 14px; line-height: 1.5; word-wrap: break-word; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
}
.cc-message a { color: var(--cc-link-color); text-decoration: underline; font-weight: bold; }
.cc-message a:hover { opacity: 0.8; }

.cc-bot { 
    align-self: flex-start; 
    background: var(--cc-bot-bg); color: var(--cc-bot-text); 
    border-bottom-left-radius: 4px; 
}
.cc-user { 
    align-self: flex-end; 
    background: var(--cc-user-bg); color: var(--cc-user-text); 
    border-bottom-right-radius: 4px; 
}

/* CHIPS (Suggestions) */
.cc-chips-area { 
    padding: 12px 20px; display: flex; flex-wrap: wrap; gap: 8px; 
    background: var(--cc-bg-chat); border-top: 1px solid rgba(0,0,0,0.03); 
}
.cc-chip { 
    font-size: 12px; background: #ffffff; color: var(--cc-bot-text); 
    padding: 6px 14px; border-radius: 20px; cursor: pointer; 
    transition: all 0.2s; border: 1px solid rgba(0,0,0,0.08); font-weight: 500; 
}
.cc-chip:hover { 
    background: var(--cc-accent); color: var(--cc-header-text); 
    border-color: var(--cc-accent); transform: translateY(-1px); 
}

/* INPUT AREA */
.cc-input-area { 
    display: flex; padding: 16px; border-top: 1px solid rgba(0,0,0,0.05); 
    background: var(--cc-bg-window); gap: 10px; align-items: center; 
}
.cc-input-area input { 
    flex-grow: 1; padding: 12px 16px; 
    border: 1px solid var(--cc-input-border); 
    background: var(--cc-input-bg); color: var(--cc-input-text); 
    border-radius: 24px; outline: none; font-size: 14px; transition: border-color 0.2s; 
}
.cc-input-area input:focus { border-color: var(--cc-accent); }

.cc-input-area button { 
    background: var(--cc-accent); color: var(--cc-header-text); border: none; 
    padding: 0 20px; height: 42px; border-radius: 24px; cursor: pointer; 
    font-weight: 700; transition: transform 0.1s; 
}
.cc-input-area button:active { transform: scale(0.95); }
.cc-input-area button:disabled { opacity: 0.5; cursor: not-allowed; }

.sys-control-group { position: absolute; opacity: 0; pointer-events: none; }

/* ANIMATIONS */
@keyframes cc-wiggle {
    0%, 7% { transform: rotateZ(0); }
    15% { transform: rotateZ(-15deg); } 20% { transform: rotateZ(10deg); }
    25% { transform: rotateZ(-10deg); } 30% { transform: rotateZ(6deg); }
    35% { transform: rotateZ(-4deg); } 40%, 100% { transform: rotateZ(0); }
}
.cc-wiggle-anim { animation: cc-wiggle 2s linear infinite; }

@keyframes cc-bounce-in {
    0% { opacity: 0; transform: translateY(20px) scale(0.8); }
    50% { transform: translateY(-5px) scale(1.05); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cc-pop { 
    from { opacity: 0; transform: scale(0.95) translateY(10px); } 
    to { opacity: 1; transform: scale(1) translateY(0); } 
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .cc-chat-wrapper {
        width: 320px;
        max-width: calc(100vw - 20px);
        height: 500px;
        max-height: calc(100vh - 130px);
        max-height: calc(100dvh - 130px); 
    }
    #cc-nudge-close { opacity: 1 !important; }
}