/* Mobile-First Reset */
* { box-sizing: border-box; }

body { 
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
   background-color: #ffffff; 
   color: #333; 
   margin: 0; 
   display: flex;
   flex-direction: column;
   height: 100vh;
   height: 100dvh;
   overflow: hidden;
}

.chat-container { 
   display: flex; 
   flex-direction: column; 
   width: 100%; 
   height: 100%; 
   background: white;
}

@media (min-width: 768px) {
   body {
       justify-content: center;
       align-items: center;
       background-color: #fcfcfc;
   }
   .chat-container { 
       width: 95%; 
       max-width: 850px; 
       height: 90vh; 
       border: 1px solid #eaeaea;
       border-radius: 16px; 
       box-shadow: 0 10px 40px rgba(129, 105, 255, 0.1); 
   }
}

header {
    background: #000;
    color: white;
    padding: 20px;
    text-align: center;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

header p {
    max-height: 60px;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.35s ease, 
                margin 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
}

header.scrolled p {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

header.scrolled {
    padding-top: 12px;
    padding-bottom: 12px;
}



header h1 { font-size: 1.3rem; margin: 0; }
header p { font-size: 0.85rem; margin: 5px 0 0; opacity: 0.9; }

.chat-history { 
   flex: 1; 
   padding: 20px; 
   overflow-y: auto;
   display: flex; 
   flex-direction: column; 
   gap: 15px;
   background: #ffffff;
}

.message { 
   padding: 12px 16px; 
   border-radius: 14px; 
   max-width: 85%; 
   line-height: 1.5; 
}

.message p {
   margin: 0 0 4px 0;
}

.user-message { 
   background-color: #000000; 
   color: white; 
   align-self: flex-end; 
   border-bottom-right-radius: 2px; 
}

.bot-message { 
   background-color: #f2f0ff; 
   color: #2c2c2c; 
   align-self: flex-start; 
   border-bottom-left-radius: 2px; 
}

/* ── SUGGESTION CHIPS ────────────────────────────────────────────────────── */
.suggestion-chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    align-items: flex-start;
}

.chip {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #9b8fd4;
    color: #6b5fb0;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    line-height: 1.4;
    white-space: normal;
    width: auto;
}

.chip:hover, .chip:active {
    background: #9b8fd4;
    color: white;
}

.chip:hover, .chip:active {
   background: #9b8fd4;
   color: white;
}

/* ── TYPING INDICATOR ────────────────────────────────────────────────────── */
.typing-indicator {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    width: fit-content;
    background: transparent;
    box-shadow: none;
    padding: 4px 8px;
}

.spark-bolt {
    font-size: 1.4rem;
    display: inline-block;
    animation: spark-pulse 1s infinite ease-in-out;
    transform-origin: center;
}

@keyframes spark-pulse {
    0%   { transform: scale(1)    rotate(-10deg); opacity: 0.5; }
    25%  { transform: scale(1.3)  rotate(10deg);  opacity: 1;   }
    50%  { transform: scale(0.95) rotate(-8deg);  opacity: 0.7; }
    75%  { transform: scale(1.2)  rotate(6deg);   opacity: 1;   }
    100% { transform: scale(1)    rotate(-10deg); opacity: 0.5; }
}





/* ── SOURCE BADGE ────────────────────────────────────────────────────────── */
.source-badge {
   align-self: flex-start;
   font-size: 0.75rem;
   color: #888;
   padding: 4px 10px;
   border-radius: 20px;
   border: 1px solid #e0e0e0;
   background: #fafafa;
   margin-top: -8px;
}

.input-area { 
   padding: 20px; 
   border-top: 1px solid #f0f0f0; 
   display: flex; 
   gap: 12px;
   background: #fff;
   flex-shrink: 0;
}

textarea { 
   flex: 1; 
   padding: 12px; 
   border: 1px solid #ddd; 
   border-radius: 10px; 
   resize: none; 
   font-size: 16px; 
}

button#send-btn { 
   padding: 0 20px; 
   background: #000000; 
   color: white; 
   border: none; 
   border-radius: 10px; 
   cursor: pointer; 
   font-weight: bold; 
}



/* ── SPARK MEDIA STYLES ──────────────────────────────────────────────────── */

.media-wrapper {
   margin: 12px 0 4px 0;
   border-radius: 10px;
   overflow: visible;
   max-width: 100%;
   background: transparent;
   line-height: 0;
   font-size: 0;
}

.media-wrapper iframe {
   display: block;
   width: 100%;
   min-height: 200px;
   border: none;
}

.media-wrapper img {
   display: block;
   width: 100%;
   height: auto;
   object-fit: cover;
   border-radius: 10px;
}

/* ── PROJECT LINKS ───────────────────────────────────────────────────────── */
.project-link {
    display: inline-block;
    color: #6b5fb0;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    font-size: 1rem;
    margin-bottom: 4px;
}

.project-link:hover, .project-link:active {
    color: #9b8fd4;
}

/* ── CONTACT LINK ────────────────────────────────────────────────────────── */
.contact-link {
    align-self: flex-start;
    font-size: 0.78rem;
    margin-top: -8px;
}

.contact-link a {
    color: #9b8fd4;
    text-decoration: none;
    font-weight: 500;
}

.contact-link a:hover, .contact-link a:active {
    text-decoration: underline;
}

/* ── CHAT FOOTER ─────────────────────────────────────────────────────────── */
.chat-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-top: 1px solid #f0f0f0;
    background: #fff;
    flex-shrink: 0;
}

.footer-link {
    font-size: 0.78rem;
    color: #9b8fd4;
    text-decoration: none;
    font-weight: 500;
    text-align: center;
}

.footer-link:hover {
    text-decoration: underline;
}

.footer-divider {
    color: #ddd;
    font-size: 0.85rem;
}

/* ── INLINE VIDEO ────────────────────────────────────────────────────────── */
.inline-video-wrapper {
    margin: 12px 0;
    border-radius: 10px;
    overflow: hidden;
    max-width: 100%;
    line-height: 0;
    font-size: 0;
}

/* ── COVER LETTER ────────────────────────────────────────────────────────── */
.cover-letter pre {
    white-space: pre-wrap;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.85rem;
    line-height: 1.7;
    color: #2c2c2c;
    margin: 0;
}

/* ── FOLLOW-UP CHIPS ─────────────────────────────────────────────────────── */
.follow-up-chips {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    align-items: flex-start;
}

/* ── INLINE IMAGES ───────────────────────────────────────────────────────── */
.inline-image-wrapper {
    margin: 32px 0 12px 0;
    border-radius: 10px;
    overflow: hidden;
    max-width: 100%;
}

.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-overlay img {
    max-width: 95%;
    max-height: 95%;
    border-radius: 8px;
    object-fit: contain;
}