@charset "UTF-8";

/* =======================================================
   STRICT ANDROID KEYBOARD LOCKS
   ======================================================= */
body, html { height: 100% !important; position: fixed !important; width: 100% !important; overflow: hidden !important; top: 0 !important; left: 0 !important; overscroll-behavior: none !important; }
.app { height: 100% !important; display: flex !important; flex-direction: column !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; }
.main { flex: 1 !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; }

/* =======================================================
   FIXED TOPBAR LAYOUT (EDGE TO EDGE & FLUID)
   ======================================================= */
.topbar { 
    flex-shrink: 0 !important; 
    position: relative !important; 
    z-index: 9999 !important; 
    height: auto !important; 
    min-height: 60px !important; 
    padding-top: calc(10px + env(safe-area-inset-top)) !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: space-between !important; 
    width: 100vw !important; 
    max-width: 100vw !important;
    padding: 10px clamp(10px, 3.5vw, 20px) !important; /* Relaxed padding for breathing room */
    border-bottom: 1px solid var(--border) !important; 
    box-sizing: border-box !important;
    margin: 0 !important;
    left: 0 !important;
}

.mobile-toggle { 
    display: block !important; 
    background: transparent !important; 
    border: none !important; 
    color: var(--text) !important; 
    /* INCREASED: Makes the 3-line hamburger menu significantly bigger on your screen */
    font-size: clamp(1.4rem, 6.5vw, 1.8rem) !important; 
    cursor: pointer !important; 
    padding: 0 !important; 
    /* INCREASED: Forces a much wider gap between the hamburger and the logo */
    margin-right: clamp(12px, 4vw, 20px) !important; 
}

.nav-brand.absolute-center { 
    position: relative !important; 
    left: 0 !important; 
    transform: none !important; 
    flex: 1 !important; 
    display: flex !important; 
    justify-content: flex-start !important; 
    align-items: center !important;
    overflow: hidden !important;
    /* Adds a gap between the graphical logo and the MentoraGen text */
    gap: clamp(6px, 1.5vw, 10px) !important; 
}

/* FLUID TYPOGRAPHY: Bigger and bolder on large screens, safe on small ones */
.brand-text-topbar { 
    /* INCREASED: Scales the MentoraGen text up to match your larger screen */
    font-size: clamp(1.25rem, 5.5vw, 1.6rem) !important; 
    font-weight: 800 !important; 
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.2px !important; /* Relaxed the letter crunching */
}

.top-actions { 
    gap: clamp(4px, 1.5vw, 8px) !important; 
    flex-shrink: 0 !important; 
    display: flex !important; 
    align-items: center !important; 
}

/* FLUID TOP BUTTONS */
.icon-action { 
    width: clamp(32px, 8vw, 38px) !important; 
    height: clamp(32px, 8vw, 38px) !important; 
    box-sizing: border-box !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    border-radius: 8px !important; 
    font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important; 
}

.premium-btn { 
    display: flex !important; 
    height: clamp(32px, 8vw, 38px) !important; 
    box-sizing: border-box !important; 
    align-items: center !important; 
    justify-content: center !important; 
    border-radius: 8px !important; 
    padding: 0 clamp(8px, 2.5vw, 12px) !important; 
    font-size: clamp(0.85rem, 3.5vw, 1rem) !important; 
    font-weight: 700 !important; 
    white-space: nowrap !important;
}

/* =======================================================
   SIDEBAR & CHAT BUBBLE OVERRIDES
   ======================================================= */
.right-sidebar { display: none !important; }
.sidebar { position: fixed !important; left: -300px !important; top: 0 !important; height: 100dvh !important; z-index: 10001 !important; transition: left 0.3s ease !important; box-shadow: 10px 0 30px rgba(0,0,0,0.5) !important; width: 280px !important; }
.sidebar.mobile-open { left: 0 !important; }
.sidebar-overlay { z-index: 10000 !important; }

.chat-column { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; }
.chat-inner-wrapper { padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important;}

.message-wrapper { max-width: 90% !important; }
.message-wrapper.user { display: flex !important; flex-direction: column !important; align-items: flex-end !important; width: 100% !important; margin-right: 0 !important; margin-bottom: 10px !important; }
.message-wrapper.user .message { background-color: #262627 !important; border: 1px solid rgba(255,255,255,0.05) !important; border-radius: 20px 20px 4px 20px !important; max-width: 85vw !important; padding: 14px 18px 24px 18px !important; color: #ececec !important; word-wrap: break-word !important; text-align: left !important; }
.message-wrapper.bot { margin-left: 5px !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; }
.message-wrapper.bot .message { max-width: 95% !important; word-wrap: break-word !important; overflow-wrap: break-word !important; box-sizing: border-box !important; }
.message-wrapper.bot pre { max-width: 100% !important; width: 100% !important; overflow-x: auto !important; box-sizing: border-box !important; }
::-webkit-scrollbar { display: none !important; }

/* =======================================================
   GEMINI-STYLE DYNAMIC INTRO CENTERING
   ======================================================= */
.chat-area { display: flex !important; flex-direction: column !important; padding-top: 24px !important; padding-left: 10px !important; padding-right: 10px !important; min-height: 0 !important; flex: 1 !important; padding-bottom: 5px !important; }
.chat-inner-wrapper { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; }
.intro-screen { margin: auto !important; max-width: 100% !important; padding-bottom: 20px !important; }
.message-wrapper:last-child { margin-bottom: 5px !important; }

/* =======================================================
   TYPEBOX ADJUSTMENTS (FLUID & UNBREAKABLE)
   ======================================================= */
.input-section { flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; padding: 10px clamp(5px, 2vw, 10px) !important; padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; background: var(--bg-main) !important; width: 100% !important; box-sizing: border-box !important; }

.input-pill { 
    display: flex !important; 
    flex-direction: row !important; 
    align-items: flex-end !important; 
    gap: clamp(4px, 1.5vw, 8px) !important; /* FLUID GAP to squeeze icons */
    width: 100% !important; 
    box-sizing: border-box !important; 
    padding: 6px clamp(6px, 2vw, 10px) !important; 
    background: rgba(0, 0, 0, 0.3) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important; 
    border-radius: 20px !important; 
    flex-wrap: nowrap !important; 
}

#user-input { 
    flex: 1 1 0% !important; 
    min-width: 0 !important; 
    font-size: clamp(14px, 4vw, 16px) !important; 
    padding: 8px 0 !important; 
    line-height: 24px !important; 
    margin: 0 clamp(2px, 1vw, 5px) !important; 
    min-height: 24px !important; 
    max-height: 120px !important; 
    background: transparent !important; 
    border: none !important; 
    color: #fff !important; 
    resize: none !important; 
    outline: none !important; 
    align-self: stretch !important; 
    white-space: pre-wrap !important; 
    word-break: break-word !important; 
    width: 100% !important; 
}

/* THE FIX FOR THE BROKEN PLACEHOLDER: Forces one line, uses "..." if too small */
#user-input::placeholder {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    font-size: clamp(13px, 3.8vw, 15px) !important;
}

#user-input:placeholder-shown { height: 40px !important; }

.attach-wrapper, .right-input-actions { 
    height: 40px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    flex-shrink: 0 !important; 
    margin-bottom: 2px !important; 
    gap: clamp(2px, 1vw, 6px) !important;
}

/* FLUID INPUT TOOLS: Mic, Send, Plus shrink perfectly to protect text box */
.input-tool { 
    width: clamp(32px, 8vw, 38px) !important; 
    height: clamp(32px, 8vw, 38px) !important; 
    font-size: clamp(1.1rem, 3.5vw, 1.25rem) !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    background: transparent !important; 
    color: var(--text-muted) !important; 
    border: none !important; 
    cursor: pointer !important; 
}

/* Disclaimer & Voice Visualizer for Mobile */
.disclaimer-text { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; text-align: center !important; font-size: 12px !important; margin-top: 8px !important; line-height: 1.4 !important; min-height: 16px !important; color: #94a3b8 !important; }
.pc-only-bar { display: none !important; }
.voice-visualizer { max-width: 200px !important; gap: 3px !important; }

.chat-column::before { opacity: 0.4 !important; }

/* =======================================================
   SYNTAX HIGHLIGHTING & BUTTONS
   ======================================================= */
.hljs { background: transparent !important; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag { color: #ff79c6 !important; }
.hljs-string, .hljs-title, .hljs-section, .hljs-attribute, .hljs-literal, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-addition { color: #f1fa8c !important; }
.hljs-comment, .hljs-quote, .hljs-deletion, .hljs-meta { color: #6272a4 !important; font-style: italic !important; }
.hljs-number, .hljs-regexp, .hljs-link { color: #bd93f9 !important; }
.hljs-variable, .hljs-template-variable { color: #50fa7b !important; }

.msg-actions i { width: 38px !important; height: 38px !important; font-size: 1.1rem !important; border-radius: 8px !important; display: inline-flex !important; justify-content: center !important; align-items: center !important; transition: all 0.2s !important; }
.msg-actions i.fa-volume-up:hover, .msg-actions i.fa-volume-up:active { color: #10b981 !important; background: rgba(16, 185, 129, 0.15) !important; border-color: rgba(16, 185, 129, 0.3) !important; }
.msg-actions i.fa-stop-circle:hover, .msg-actions i.fa-stop-circle:active { color: #ef4444 !important; background: rgba(239, 68, 68, 0.15) !important; border-color: rgba(239, 68, 68, 0.3) !important; }
.message-wrapper.user .msg-actions i.fa-edit:hover, .message-wrapper.user .msg-actions i.fa-edit:active { color: #8b5cf6 !important; background: rgba(139, 92, 246, 0.15) !important; }
.message-wrapper.user .msg-actions i.fa-copy:hover, .message-wrapper.user .msg-actions i.fa-copy:active { color: #38bdf8 !important; background: rgba(56, 189, 248, 0.15) !important; }
.msg-actions i.fa-copy:hover, .msg-actions i.fa-copy:active { color: #38bdf8 !important; background: rgba(56, 189, 248, 0.15) !important; }
.msg-actions i.fa-sync:hover, .msg-actions i.fa-sync:active { color: #38bdf8 !important; background: rgba(56, 189, 248, 0.15) !important; }
.msg-actions i.fa-thumbs-up:hover, .msg-actions i.fa-thumbs-up:active { color: #10b981 !important; background: rgba(16, 185, 129, 0.15) !important; }
.msg-actions i.fa-thumbs-down:hover, .msg-actions i.fa-thumbs-down:active { color: #ef4444 !important; background: rgba(239, 68, 68, 0.15) !important; }

/* INLINE EDIT BOX (MOBILE) */
.message-wrapper.user .inline-edit-box { width: 100% !important; min-width: 100% !important; background: rgba(0, 0, 0, 0.25) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; padding: 12px 15px !important; border-radius: 12px !important; font-family: inherit !important; font-size: 15px !important; line-height: 1.5 !important; resize: none !important; outline: none !important; margin-bottom: 12px !important; box-sizing: border-box !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important; }
.message-wrapper.user .inline-edit-actions { display: flex !important; justify-content: flex-end !important; gap: 10px !important; width: 100% !important; }
.message-wrapper.user .btn-cancel, .message-wrapper.user .btn-save { padding: 8px 18px !important; border-radius: 20px !important; border: none !important; cursor: pointer !important; font-weight: 600 !important; font-size: 0.85rem !important; transition: all 0.2s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.message-wrapper.user .btn-cancel { background: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; }
.message-wrapper.user .btn-cancel:hover, .message-wrapper.user .btn-cancel:active { background: rgba(255, 255, 255, 0.25) !important; }
.message-wrapper.user .btn-save { background: #ffffff !important; color: var(--accent-solid) !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important; }
.message-wrapper.user .btn-save:hover, .message-wrapper.user .btn-save:active { transform: translateY(-2px) !important; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25) !important; }

/* =========================================================
   GEMINI-STYLE ATTACH MENU & IMAGE UPLOAD PREVIEW
   ========================================================= */

/* Push Attach Menu Above Typebox */
.attach-wrapper { position: relative !important; }
.attach-menu {
    position: absolute !important;
    bottom: calc(100% + 15px) !important;
    left: 0 !important;
    transform: translateY(10px) scale(0.95);
    transform-origin: bottom left;
}
.attach-menu.show {
    transform: translateY(0) scale(1);
}

/* Align Image Preview Above Typebox */
.input-section {
    display: flex !important;
    flex-direction: column !important;
}
#image-preview-container {
    position: relative !important;
    margin: 0 auto 10px auto !important; /* Centers above pill */
    width: 100% !important;
    max-width: 850px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 15px !important;
    text-align: left !important;
}
#image-preview {
    height: 70px !important;
    width: 70px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    border: 2px solid var(--border) !important;
    background: var(--bg-card) !important;
    display: inline-block !important;
}
#remove-image-btn {
    top: -8px !important;
    right: auto !important;
    left: 70px !important; /* Overlaps top right corner of the 70px image */
}
/* =========================================================
   MOBILE TYPEBOX TEXT CLIPPING FIX
   ========================================================= */
#user-input {
    padding: 10px 0 !important; 
    line-height: 1.5 !important; 
    min-height: 44px !important; 
}

.input-pill {
    min-height: 52px !important; 
    align-items: center !important; 
}

/* =========================================================
   INLINE MODEL SELECTOR (MOBILE OVERRIDES & FLUIDITY)
   ========================================================= */
#current-model-name.hide-on-mobile { 
    display: none !important; 
}

.inline-selector .model-selector { 
    padding: clamp(4px, 1.5vw, 6px) clamp(6px, 2vw, 8px) !important; 
    height: clamp(28px, 7vw, 32px) !important; 
    font-size: clamp(0.8rem, 3vw, 0.9rem) !important;
}

.inline-selector .model-dropdown { 
    width: 250px !important; 
    right: 0 !important; /* FIXED: Anchors perfectly on mobile now */
} /* <--- P.S. I ADDED THIS MISSING CLOSING BRACKET FOR YOU! */

/* =========================================================
   ACTION BUTTONS FIX (MOBILE SIZING & ALIGNMENT)
   ========================================================= */

/* 1. Make the icons larger and easier to tap on mobile */
.msg-actions {
    display: flex !important;
    width: 100% !important;
    gap: clamp(14px, 4vw, 18px) !important; /* Spaces them out perfectly */
    margin-top: 6px !important;
}

.msg-actions i {
    font-size: clamp(1rem, 4.5vw, 1.15rem) !important; /* Much bigger on mobile */
    padding: 4px !important; /* Adds invisible touch-target area for fingers */
    cursor: pointer;
}

/* 2. Force User Actions (Copy, Edit) to stay strictly on the right side */
.message-wrapper.user {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important; /* Pushes everything to the right */
}

.message-wrapper.user .msg-actions {
    justify-content: flex-end !important; /* Locks the icons under the blue bubble */
    padding-right: 5px !important; /* Tiny nudge so they align visually */
}

/* 3. Keep Bot Actions on the left side */
.message-wrapper.bot {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.message-wrapper.bot .msg-actions {
    justify-content: flex-start !important;
    padding-left: 5px !important;
}