/* MYGFstyle.css - Complete Final Version (v6) */

/* --- Base Styles & Variables --- */
:root { --primary-pink: #FFC0CB; --secondary-pink: #FFB6C1; --accent-pink: #FF69B4; --dark-pink: #DB7093; --text-color: #333; --light-text-color: #555; --bubble-user-bg: #D1E8FF; --bubble-gf-bg: #FFE4E1; --border-color: #eee; --background-color: #f9f9f9; --modal-bg: rgba(0, 0, 0, 0.6); --link-color: var(--accent-pink); --font-family: 'Noto Sans TC', sans-serif; --header-height: 70px; --footer-height-actions: 45px; --footer-height-input: 55px; --input-area-padding: 8px; }
body { margin: 0; font-family: var(--font-family); background-color: var(--background-color); color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; }
.app-container { width: 100%; max-width: 1200px; height: 95vh; max-height: 800px; background-color: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-color); }

/* --- Header --- */
.app-header { height: var(--header-height); background: linear-gradient(135deg, var(--primary-pink), var(--secondary-pink)); color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex-shrink: 0; border-bottom: 1px solid var(--dark-pink); }
.header-left { display: flex; align-items: center; }
.logo { width: 64px; height: 64px; margin-right: 15px; cursor: pointer; object-fit: cover; border-radius: 50%; border: 1px solid white; }
.app-title { font-size: 1.5em; font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); }
.header-right { display: flex; align-items: center; gap: 10px; }
.header-icon img { vertical-align: middle; }
#language-switcher { padding: 5px 8px; border-radius: 5px; border: 1px solid var(--dark-pink); background-color: rgba(255, 255, 255, 0.8); cursor: pointer; font-size: 0.9em; }
.icon-button { background: none; border: none; cursor: pointer; padding: 0; line-height: 0; transition: background-color 0.2s ease; border-radius: 5px; }
#copyright-btn span { line-height: 48px; color: white; font-weight: bold; } /* Style for copyright symbol */
.icon-button:hover { background-color: rgba(255, 255, 255, 0.2); }
.icon-button img { display: block; }

/* --- Favorability Bar --- */
.favorability-bar-container { padding: 8px 20px; background-color: #fdf0f3; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; font-size: 0.9em; color: var(--light-text-color); }
#favorability-bar { flex-grow: 1; height: 12px; appearance: none; border: none; border-radius: 6px; overflow: hidden; }
#favorability-bar::-webkit-progress-bar { background-color: #e0e0e0; border-radius: 6px; } #favorability-bar::-moz-progress-bar { background-color: #e0e0e0; border-radius: 6px; }
#favorability-bar::-webkit-progress-value { background: linear-gradient(90deg, var(--accent-pink), var(--primary-pink)); border-radius: 6px; transition: width 0.5s ease-out; } #favorability-bar::-moz-progress-bar { background: linear-gradient(90deg, var(--accent-pink), var(--primary-pink)); border-radius: 6px; transition: width 0.5s ease-out; }
#favorability-value { font-weight: bold; min-width: 80px; text-align: right; }

/* --- Chat Interface --- */
.chat-interface { 
	flex-grow: 1; 
	padding: 15px; 
	overflow-y: auto; 
	background-color: #fff; 
	display: flex; 
	flex-direction: column; 
    position: relative; 

}
.message-container { display: flex; margin-bottom: 15px; max-width: 85%; position: relative; }
.message-avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; align-self: flex-start; cursor: pointer; border: 1px solid var(--border-color); object-fit: cover; }
.message-content { display: flex; flex-direction: column; max-width: calc(100% - 50px); }
.girlfriend-name { font-size: 0.8em; color: var(--light-text-color); margin-bottom: 3px; margin-left: 5px; }
.message-bubble { padding: 10px 15px; border-radius: 18px; position: relative; word-wrap: break-word; hyphens: auto; line-height: 1.5; background-color: var(--bubble-gf-bg); }
.message-bubble p { margin: 0 0 5px 0; }
.message-timestamp { font-size: 0.75em; color: var(--light-text-color); display: block; text-align: right; margin-top: 5px; }
.user-message { align-self: flex-end; margin-left: auto; }
.user-message .message-bubble { background-color: var(--bubble-user-bg); color: #222; border-top-right-radius: 5px; }
.girlfriend-message { align-self: flex-start; margin-right: auto; }
.girlfriend-message .message-bubble { background-color: var(--bubble-gf-bg); border-top-left-radius: 5px; }
.system-message .message-bubble { background-color: #f0f0f0; color: #666; font-style: italic; font-size: 0.9em; text-align: center; border-radius: 5px; padding: 5px 10px; margin: 5px auto; width: fit-content; max-width: 90%; }
.chat-image { max-width: 100%; max-height: 300px; border-radius: 10px; display: block; margin-bottom: 5px; cursor: zoom-in; }
.action-buttons-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; margin-left: 5px; }
.action-button { padding: 5px 12px; background-color: #fff; border: 1px solid var(--accent-pink); color: var(--accent-pink); border-radius: 15px; cursor: pointer; font-size: 0.85em; transition: all 0.2s ease; }
.action-button:hover { background-color: var(--secondary-pink); color: white; border-color: var(--secondary-pink); }
.delete-message-btn { position: absolute; top: -5px; background-color: rgba(255, 255, 255, 0.7); border: 1px solid #ccc; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; line-height: 18px; text-align: center; cursor: pointer; opacity: 0; transition: opacity 0.2s ease; z-index: 5; padding: 0; }
.message-container:hover .delete-message-btn { opacity: 1; }
.user-message .delete-message-btn { left: -10px; } .girlfriend-message .delete-message-btn { right: -10px; }
.delete-message-btn:hover { background-color: #f00; color: white; border-color: #f00; }

/* --- Input Area --- */
.input-area { background-color: #f0f0f0; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; padding: var(--input-area-padding); flex-shrink: 0; gap: 5px; }
.action-buttons-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; height: var(--footer-height-actions); padding-bottom: 5px; }
.action-buttons-group button, .action-buttons-group select { padding: 6px 12px; border: none; border-radius: 15px; background-color: var(--primary-pink); color: white; cursor: pointer; font-size: 0.85em; transition: background-color 0.2s ease; white-space: nowrap; }
.action-buttons-group button:hover { background-color: var(--accent-pink); }
.action-buttons-group select { background-color: #fff; color: var(--text-color); border: 1px solid var(--primary-pink); max-width: 100px; }
.gift-button-container { position: relative; }
.message-input-container { display: flex; align-items: flex-end; width: 100%; gap: 8px; height: var(--footer-height-input); }
#message-input { flex-grow: 1; border: 1px solid var(--border-color); border-radius: 18px; padding: 10px 15px; font-size: 1em; font-family: var(--font-family); resize: none; min-height: 22px; max-height: calc(var(--footer-height-input) - 10px); overflow-y: auto; line-height: 1.4; transition: border-color 0.2s ease; }
#message-input:focus { outline: none; border-color: var(--primary-pink); box-shadow: 0 0 5px rgba(255, 192, 203, 0.5); }
.send-button { background-color: var(--accent-pink); color: white; border: none; border-radius: 50%; width: 40px; height: 40px; flex-shrink: 0; cursor: pointer; transition: background-color 0.2s ease; display: flex; justify-content: center; align-items: center; font-size: 1.6em; padding: 0; line-height: 1; text-align: center; overflow: hidden; }
.send-button:hover { background-color: var(--dark-pink); }
.send-button:disabled { background-color: #ccc; cursor: not-allowed; opacity: 0.7; /* Visual cue for disabled */ }
/* Add styles for other action buttons if needed */
#call-girlfriend-btn:disabled, #gift-btn:disabled { opacity: 0.7; cursor: not-allowed; }


/* --- Modals --- */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: var(--modal-bg); animation: fadeIn 0.3s ease; }
.modal-content { background-color: #fefefe; margin: 10% auto; padding: 25px 30px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 10px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.2); animation: slideIn 0.3s ease; max-height: 80vh; /* Prevent modal from being too tall */ overflow-y: auto; /* Add scroll to modal content if needed */ }
.modal-content.large { max-width: 800px; margin: 5% auto; }
.close-btn { color: #aaa; position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: bold; cursor: pointer; line-height: 1; z-index: 10; } /* Ensure close button is on top */
.close-btn:hover, .close-btn:focus { color: black; text-decoration: none; }
.modal h2 { margin-top: 0; color: var(--dark-pink); border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 20px; }
.setting-item { margin-bottom: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.setting-item label { font-weight: 500; color: var(--light-text-color); min-width: 120px; flex-shrink: 0; }
.setting-item input[type="text"], .setting-item input[type="number"], .setting-item select, .setting-item textarea { flex-grow: 1; padding: 8px 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 0.95em; font-family: var(--font-family); min-width: 200px; box-sizing: border-box; }
.setting-item textarea { min-height: 60px; resize: vertical; }
.setting-item.checkbox-item label { min-width: auto; cursor: pointer; }
#adetailer-options small { color: #777; font-size: 0.85em; display: block; margin-bottom: 10px; }
.modal button { padding: 10px 20px; background-color: var(--primary-pink); color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s ease; margin-top: 10px; }
.modal button:hover { background-color: var(--accent-pink); }
.avatar-thumbnail-container { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; max-height: 150px; overflow-y: auto; padding: 5px; border: 1px solid var(--border-color); border-radius: 5px; min-height: 78px; background-color: #f8f8f8; }
.avatar-thumbnail { width: 64px; height: 64px; object-fit: cover; border-radius: 5px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s ease; background-color: #eee; }
.avatar-thumbnail.selected { border-color: var(--accent-pink); } .avatar-thumbnail:hover { border-color: var(--secondary-pink); }
/* --- Copyright Modal --- */
.copyright-content h3 { margin-top: 15px; margin-bottom: 5px; color: var(--dark-pink); font-size: 1.1em; }
.copyright-content p { margin-bottom: 10px; line-height: 1.6; font-size: 0.9em; color: var(--light-text-color); } /* Slightly smaller text */
.copyright-content p small { font-size: 0.85em; color: #999; }
.gift-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 20px; max-height: 60vh; overflow-y: auto; padding: 10px; }
.gift-item { display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; background-color: #fff; transition: box-shadow 0.2s ease; }
.gift-item:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.1); }
.gift-item img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 8px; }
.gift-name { font-size: 0.9em; font-weight: 500; margin-bottom: 4px; }
.gift-price { font-size: 0.8em; color: var(--light-text-color); margin-bottom: 8px; }
.gift-item .send-gift-confirm-btn { font-size: 0.85em; padding: 5px 10px; margin-top: auto; }
.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.7); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2000; backdrop-filter: blur(3px); }
.loading-spinner { border: 6px solid #f3f3f3; border-top: 6px solid var(--accent-pink); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin-bottom: 15px; }
#loading-text { color: var(--dark-pink); font-weight: 500; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#avatar-cropper-container img { display: block; max-width: 100%; }

/* --- Affection Bubble Effect --- */
.affection-bubble {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.8em;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    z-index: 1100;
    pointer-events: none;
    opacity: 1;
    transition: opacity 5s ease-out; 
}

/* Define the fade in/out animation */
@keyframes affectionFadeInOut {
    0% { opacity: 0; transform: scale(0.8); } /* Start slightly smaller and faded in */
    10% { opacity: 1; transform: scale(1); }  /* Quickly fade in and scale up */
    /* 10% to 37.5% (approx 3s / 8s total) - Stay visible */
    37.5% { opacity: 1; transform: scale(1); }
    /* 37.5% to 100% (approx 5s / 8s total) - Fade out */
    100% { opacity: 0; transform: scale(1.1); } /* Fade out and slightly scale up */
}

/* --- Responsiveness --- */
@media (max-width: 768px) {
    .app-container { height: 100vh; max-height: none; border-radius: 0; border: none; }
    .app-header { padding: 0 10px; height: 60px; } .logo { width: 48px; height: 48px; } .app-title { font-size: 1.2em; } .header-right { gap: 5px; }
    .header-icon img[alt="Settings"], .header-icon img[alt="Image History"] { width: 36px; height: 36px; } .header-icon img[alt="Girlfriend Settings"] { width: 28px; height: 28px; }
    #language-switcher { padding: 4px 6px; font-size: 0.8em;} .favorability-bar-container { padding: 6px 10px; font-size: 0.8em; }
    .chat-interface { padding: 10px; } .message-container { max-width: 90%; }
    .input-area { height: auto; padding: 8px; flex-direction: column; } .action-buttons-group { height: auto; justify-content: space-around; margin-bottom: 5px; }
    .action-buttons-group button, .action-buttons-group select { padding: 6px 10px; font-size: 0.8em; } .message-input-container { height: auto; gap: 5px; }
    #message-input { padding: 8px 12px; max-height: 80px; } .send-button { width: 36px; height: 36px; font-size: 1.4em; }
    .modal-content { width: 90%; margin: 15% auto; padding: 20px; } .modal-content.large { width: 90%; margin: 10% auto; }
    .setting-item { flex-direction: column; align-items: stretch; gap: 5px; } .setting-item label { min-width: 0; text-align: left; margin-bottom: 3px; }
    .setting-item input[type="text"], .setting-item input[type="number"], .setting-item select, .setting-item textarea { min-width: 0; width: 100%; box-sizing: border-box; }
    .image-history-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; } .gift-list-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 15px; }
}
/* --- Masri Cloud login (mylovely-auth.js) --- */
#mc-login-overlay { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(135deg, var(--primary-pink), var(--dark-pink)); }
.mc-login-card { width: 100%; max-width: 360px; background: #fff; border-radius: 16px; padding: 28px 24px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); box-sizing: border-box; }
.mc-login-logo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary-pink); }
.mc-login-card h2 { margin: 12px 0 6px; color: var(--dark-pink); }
.mc-login-card p { margin: 0 0 20px; color: var(--light-text-color); font-size: 0.95em; line-height: 1.5; }
#mc-google-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 16px; border: 1px solid #dadce0; border-radius: 999px; background: #fff; color: #3c4043; font: 500 1em var(--font-family); cursor: pointer; }
#mc-google-btn:hover { background: #f8f9fa; }
#mc-google-btn:disabled { opacity: 0.7; cursor: wait; }
#mc-login-error { min-height: 1.2em; margin: 10px 0 4px; color: #c62828; font-size: 0.85em; }
.mc-login-card small { color: #999; }
.mc-login-card a { color: var(--link-color); }
.mc-user-chip { background: rgba(255, 255, 255, 0.85); border: 1px solid var(--dark-pink); color: var(--dark-pink); border-radius: 999px; padding: 5px 10px; font: 500 0.85em var(--font-family); cursor: pointer; white-space: nowrap; }
.mc-user-chip:hover { background: #fff; }
.mc-quota-badge { background: rgba(255, 255, 255, 0.7); border: 1px dashed var(--dark-pink); color: var(--dark-pink); border-radius: 999px; padding: 4px 9px; font: 500 0.8em var(--font-family); white-space: nowrap; cursor: help; }
.mc-quota-badge.pro { border-style: solid; background: #fff4d6; border-color: #d4a017; color: #8a6400; }
.mc-quota-badge.low { background: #ffe3e3; border-color: #d33; color: #b00; }
@media (max-width: 480px) { .mc-quota-badge { font-size: 0.72em; padding: 3px 7px; } }
/* MyLovely extra-quota purchase (Duitku) */
.mc-buy-btn { background: var(--dark-pink); color: #fff; border: 0; border-radius: 999px; width: 28px; height: 28px; font-size: 0.85em; cursor: pointer; line-height: 1; }
.mc-buy-btn:hover { filter: brightness(1.1); }
.mc-overlay { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.45); }
.mc-pack-list { display: flex; flex-direction: column; gap: 10px; }
.mc-pack { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 12px; border: 2px solid var(--primary-pink); border-radius: 12px; background: #fff; cursor: pointer; font-family: var(--font-family); }
.mc-pack b { color: var(--dark-pink); font-size: 1.15em; }
.mc-pack span { color: var(--light-text-color); font-size: 0.9em; }
.mc-pack:hover { background: #fff5f8; }
.mc-pack:disabled { opacity: 0.6; cursor: wait; }
#mc-buy-error { min-height: 1.2em; margin: 10px 0 4px; color: #c62828; font-size: 0.85em; }
.mc-buy-cancel { margin-top: 6px; background: none; border: 0; color: var(--light-text-color); cursor: pointer; text-decoration: underline; }
/* About modal (Masri Cloud) */
.copyright-content a { color: var(--link-color, var(--dark-pink)); }
.copyright-content .about-note { font-size: 0.9em; color: var(--light-text-color); background: #fff5f8; border-left: 3px solid var(--primary-pink); padding: 8px 10px; border-radius: 6px; }
.copyright-content .about-copy { font-weight: 600; color: var(--dark-pink); margin-top: 12px; }
/* Consent (18+/terms) gate + account menu */
#mc-consent-overlay { background: linear-gradient(135deg, var(--primary-pink), var(--dark-pink)); }
.mc-consent-card { text-align: left; }
.mc-consent-card h2, .mc-consent-card .mc-login-logo { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.mc-check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 0.92em; line-height: 1.45; cursor: pointer; }
.mc-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--dark-pink); }
.mc-primary { width: 100%; margin-top: 14px; padding: 12px 16px; border: 0; border-radius: 999px; background: var(--dark-pink); color: #fff; font: 600 1em var(--font-family); cursor: pointer; }
.mc-primary:disabled { opacity: 0.45; cursor: not-allowed; }
#mc-c-error, #mc-acc-error { min-height: 1.2em; margin: 8px 0 4px; color: #c62828; font-size: 0.85em; text-align: center; }
.mc-consent-card small { display: block; text-align: center; }
.mc-menu { display: flex; flex-direction: column; gap: 8px; }
.mc-menu-item { display: block; width: 100%; padding: 11px 14px; border: 1px solid #f0c4d8; border-radius: 10px; background: #fff; color: var(--text-color, #333); font: 500 0.95em var(--font-family); text-align: left; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.mc-menu-item:hover { background: #fff5f8; }
.mc-menu-item.mc-danger { color: #c62828; border-color: #f5c2c2; }
.mc-menu-item:disabled { opacity: 0.6; cursor: wait; }

/* =====================================================================
   MASRI CLOUD THEME (2026-09-28) — dark navy + glass + aurora gradient,
   tokens from masri.cloud/public/assets/css/style.css. Overrides the
   original pink theme above; remove this block to revert.
   ===================================================================== */
@font-face { font-family: 'Masri Cloud'; src: url('fonts/MasriCloud-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Masri Cloud'; src: url('fonts/MasriCloud-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
:root {
  --mc-bg: #050810; --mc-bg-2: #080d1a; --mc-bg-3: #0c1220;
  --mc-surface: rgba(255,255,255,0.04); --mc-surface-2: rgba(255,255,255,0.07); --mc-surface-3: rgba(255,255,255,0.11);
  --mc-border: rgba(255,255,255,0.08); --mc-border-2: rgba(255,255,255,0.14);
  --mc-text: #f0f4ff; --mc-text-2: #94a3b8; --mc-text-3: #64748b;
  --mc-aurora-1: #2563eb; --mc-aurora-2: #7c3aed; --mc-aurora-3: #0ea5e9;
  --mc-primary: #3b82f6; --mc-primary-glow: rgba(59,130,246,0.35); --mc-accent: #67e8f9; --mc-accent-warm: #a78bfa;
  --mc-love: #f472b6;
  --mc-grad: linear-gradient(135deg, var(--mc-aurora-1), var(--mc-aurora-2));
  --mc-font-display: 'Masri Cloud', 'Syne', sans-serif;
  /* remap the original variables so every old rule follows the new theme */
  --primary-pink: var(--mc-primary); --secondary-pink: var(--mc-accent-warm); --accent-pink: var(--mc-aurora-2); --dark-pink: var(--mc-accent-warm);
  --text-color: var(--mc-text); --light-text-color: var(--mc-text-2); --border-color: var(--mc-border);
  --bubble-user-bg: var(--mc-aurora-1); --bubble-gf-bg: var(--mc-surface-2); --background-color: var(--mc-bg);
  --modal-bg: rgba(2,4,10,0.72); --link-color: var(--mc-accent);
  --font-family: 'Inter', 'Segoe UI', 'Noto Sans TC', system-ui, sans-serif;
  color-scheme: dark;
}
body {
  background: var(--mc-bg);
  background-image: radial-gradient(900px 500px at 10% -10%, rgba(37,99,235,0.22), transparent 60%),
                    radial-gradient(800px 500px at 110% 10%, rgba(124,58,237,0.20), transparent 60%),
                    radial-gradient(700px 400px at 50% 120%, rgba(14,165,233,0.12), transparent 60%);
  background-attachment: fixed; color: var(--mc-text); -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(124,58,237,0.45); color: #fff; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #334155; }

.app-container { background: rgba(8,13,26,0.78); border: 1px solid var(--mc-border); border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(59,130,246,0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* header */
.app-header { background: linear-gradient(180deg, rgba(12,18,32,0.95), rgba(8,13,26,0.9)); border-bottom: 1px solid var(--mc-border); position: relative; }
.app-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--mc-aurora-1), var(--mc-aurora-2), transparent); opacity: 0.8; }
.logo { border: 2px solid transparent; background: var(--mc-grad) border-box; box-shadow: 0 0 18px rgba(124,58,237,0.35); }
.app-title { font-family: var(--mc-font-display); font-weight: 700; letter-spacing: 0.3px; text-shadow: none;
  background: linear-gradient(90deg, #fff 10%, var(--mc-accent) 55%, var(--mc-accent-warm)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#language-switcher { background: var(--mc-surface-2); color: var(--mc-text); border: 1px solid var(--mc-border-2); border-radius: 9999px; padding: 6px 10px; }
#language-switcher option { background: var(--mc-bg-3); color: var(--mc-text); }
.icon-button { border-radius: 12px; transition: background-color .15s, transform .15s; }
.icon-button:hover { background: var(--mc-surface-2); transform: translateY(-1px); }

/* favorability */
.favorability-bar-container { background: var(--mc-surface); border-bottom: 1px solid var(--mc-border); color: var(--mc-text-2); }
#favorability-bar::-webkit-progress-bar { background: var(--mc-surface-3); } #favorability-bar::-moz-progress-bar { background: linear-gradient(90deg, var(--mc-aurora-2), var(--mc-love)); }
#favorability-bar::-webkit-progress-value { background: linear-gradient(90deg, var(--mc-aurora-2), var(--mc-love)); }
#favorability-value { color: var(--mc-love); }

/* chat */
.chat-interface { background: transparent; }
.message-avatar { border: 2px solid var(--mc-border-2); }
.girlfriend-name { color: var(--mc-accent-warm); font-weight: 500; }
.message-bubble { color: var(--mc-text); box-shadow: 0 4px 18px rgba(0,0,0,0.25); }
.girlfriend-message .message-bubble { background: var(--mc-surface-2); border: 1px solid var(--mc-border); }
.user-message .message-bubble { background: var(--mc-grad); color: #fff; border: 0; box-shadow: 0 6px 22px rgba(0,0,0,0.35); }
.user-message .message-timestamp { color: rgba(255,255,255,0.7); }
.message-timestamp { color: var(--mc-text-3); }
.system-message .message-bubble { background: var(--mc-surface); color: var(--mc-text-2); border: 1px dashed var(--mc-border-2); box-shadow: none; }
.message-metadata { color: var(--mc-text-3); font-size: 0.75em; display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.action-button { background: var(--mc-surface); border: 1px solid rgba(167,139,250,0.45); color: #c4b5fd; border-radius: 9999px; }
.action-button:hover { background: var(--mc-grad); border-color: transparent; color: #fff; }
.delete-message-btn { background: var(--mc-bg-3); border: 1px solid var(--mc-border-2); color: var(--mc-text-2); }
.delete-message-btn:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
.chat-image { border: 1px solid var(--mc-border); }

/* input area */
.input-area { background: rgba(12,18,32,0.85); border-top: 1px solid var(--mc-border); }
.action-buttons-group button { background: var(--mc-surface-2); color: var(--mc-text); border: 1px solid var(--mc-border-2); border-radius: 9999px; transition: all .15s; }
.action-buttons-group button:hover { background: var(--mc-grad); border-color: transparent; color: #fff; }
.action-buttons-group select { background: var(--mc-surface-2); color: var(--mc-text); border: 1px solid var(--mc-border-2); border-radius: 9999px; }
.action-buttons-group select option { background: var(--mc-bg-3); }
#message-input { background: var(--mc-surface); color: var(--mc-text); border: 1px solid var(--mc-border-2); }
#message-input::placeholder { color: var(--mc-text-3); }
#message-input:focus { border-color: var(--mc-primary); box-shadow: 0 0 0 3px var(--mc-primary-glow); }
.send-button { background: var(--mc-grad); box-shadow: 0 6px 20px rgba(59,130,246,0.35); }
.send-button:hover { background: var(--mc-grad); filter: brightness(1.15); }
.send-button:disabled { background: var(--mc-surface-3); box-shadow: none; }

/* modals */
.modal { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-content { background: linear-gradient(180deg, #0f172a, #0a1020); color: var(--mc-text); border: 1px solid var(--mc-border-2); border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.close-btn { color: var(--mc-text-3); } .close-btn:hover, .close-btn:focus { color: #fff; }
.modal h2 { font-family: var(--mc-font-display); color: var(--mc-text); border-bottom: 1px solid var(--mc-border); }
.setting-item input[type="text"], .setting-item input[type="number"], .setting-item select, .setting-item textarea {
  background: var(--mc-surface); color: var(--mc-text); border: 1px solid var(--mc-border-2); border-radius: 10px; }
.setting-item select option { background: var(--mc-bg-3); }
.setting-item input:focus, .setting-item select:focus, .setting-item textarea:focus { outline: none; border-color: var(--mc-primary); box-shadow: 0 0 0 3px var(--mc-primary-glow); }
#adetailer-options small { color: var(--mc-text-3); }
.modal button { background: var(--mc-grad); border-radius: 9999px; font-weight: 600; }
.modal button:hover { background: var(--mc-grad); filter: brightness(1.15); }
.avatar-thumbnail-container { background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: 12px; }
.avatar-thumbnail { background: var(--mc-bg-3); border-radius: 10px; }
.avatar-thumbnail.selected { border-color: var(--mc-accent); box-shadow: 0 0 0 2px rgba(103,232,249,0.35); } .avatar-thumbnail:hover { border-color: var(--mc-accent-warm); }
.copyright-content h3 { color: var(--mc-accent-warm); }
.copyright-content p small { color: var(--mc-text-3); }
.copyright-content .about-note { background: rgba(124,58,237,0.10); border-left-color: var(--mc-aurora-2); color: var(--mc-text-2); }
.copyright-content .about-copy { color: var(--mc-accent); }
.gift-item { background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: 16px; transition: transform .15s, border-color .15s, box-shadow .15s; }
.gift-item:hover { transform: translateY(-3px); border-color: rgba(167,139,250,0.5); box-shadow: 0 10px 30px rgba(124,58,237,0.2); }
.loading-overlay { background: rgba(5,8,16,0.75); }
.loading-spinner { border-color: var(--mc-surface-3); border-top-color: var(--mc-aurora-2); }
#loading-text { color: var(--mc-text); }

/* Masri Cloud login / consent / account / buy overlays */
#mc-login-overlay, #mc-consent-overlay { background: var(--mc-bg); background-image: radial-gradient(700px 420px at 15% 0%, rgba(37,99,235,0.30), transparent 60%), radial-gradient(700px 420px at 90% 100%, rgba(124,58,237,0.28), transparent 60%); }
.mc-overlay { background: rgba(2,4,10,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mc-login-card { background: linear-gradient(180deg, #0f172a, #0a1020); color: var(--mc-text); border: 1px solid var(--mc-border-2); border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(59,130,246,0.12); }
.mc-login-card h2 { font-family: var(--mc-font-display); color: var(--mc-text); }
.mc-login-card p { color: var(--mc-text-2); }
.mc-login-card a { color: var(--mc-accent); }
.mc-login-card small { color: var(--mc-text-3); }
.mc-login-logo { border: 3px solid transparent; background: var(--mc-grad) border-box; box-shadow: 0 0 24px rgba(124,58,237,0.4); }
#mc-google-btn { background: #fff; color: #1f1f1f; border: 0; }
#mc-google-btn:hover { background: #f1f5ff; }
.mc-check { color: var(--mc-text); } .mc-check input { accent-color: var(--mc-aurora-2); }
.mc-primary { background: var(--mc-grad); box-shadow: 0 6px 22px rgba(59,130,246,0.3); }
.mc-menu-item { background: var(--mc-surface); color: var(--mc-text); border: 1px solid var(--mc-border-2); }
.mc-menu-item:hover { background: var(--mc-surface-3); }
.mc-menu-item.mc-danger { color: #fca5a5; border-color: rgba(239,68,68,0.35); }
.mc-pack { background: var(--mc-surface); border: 1px solid var(--mc-border-2); border-radius: 16px; }
.mc-pack:hover { background: var(--mc-surface-3); border-color: var(--mc-accent-warm); }
.mc-pack b { color: var(--mc-accent); } .mc-pack span { color: var(--mc-text-2); }
.mc-buy-cancel { color: var(--mc-text-3); }
#mc-login-error, #mc-buy-error, #mc-c-error, #mc-acc-error { color: #fca5a5; }
.mc-user-chip { background: var(--mc-surface-2); border: 1px solid var(--mc-border-2); color: var(--mc-text); }
.mc-user-chip:hover { background: var(--mc-surface-3); }
.mc-quota-badge { background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.35); color: #bfdbfe; }
.mc-quota-badge.pro { background: rgba(167,139,250,0.14); border-color: rgba(167,139,250,0.5); color: #ddd6fe; }
.mc-quota-badge.low { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.45); color: #fecaca; }
.mc-buy-btn { background: var(--mc-grad); box-shadow: 0 4px 14px rgba(59,130,246,0.35); }

@media (max-width: 768px) {
  .app-container { border-radius: 0; border: 0; }
  body { background-attachment: scroll; }
}

/* ---- Theme toggle button ---- */
.mc-theme-btn { width: 36px; height: 36px; border-radius: 9999px; border: 1px solid var(--mc-border-2); background: var(--mc-surface-2); cursor: pointer; font-size: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: transform .2s, background-color .15s; }
.mc-theme-btn:hover { transform: rotate(-15deg); background: var(--mc-surface-3); }
.mc-theme-btn .mc-theme-moon { display: none; }
[data-theme="light"] .mc-theme-btn .mc-theme-sun { display: none; }
[data-theme="light"] .mc-theme-btn .mc-theme-moon { display: inline; }

/* =====================================================================
   LIGHT MODE — same tokens as masri.cloud [data-theme="light"]
   ===================================================================== */
[data-theme="light"] {
  --mc-bg: #f8faff; --mc-bg-2: #f0f4ff; --mc-bg-3: #e8eeff;
  --mc-surface: rgba(15,23,42,0.03); --mc-surface-2: rgba(15,23,42,0.06); --mc-surface-3: rgba(15,23,42,0.10);
  --mc-border: rgba(15,23,42,0.08); --mc-border-2: rgba(15,23,42,0.14);
  --mc-text: #0f172a; --mc-text-2: #475569; --mc-text-3: #94a3b8;
  --mc-accent: #0369a1; --mc-accent-warm: #6d28d9; --mc-love: #db2777; --mc-primary-glow: rgba(59,130,246,0.22);
  --modal-bg: rgba(15,23,42,0.35);
  color-scheme: light;
}
[data-theme="light"] body {
  background-image: radial-gradient(900px 500px at 10% -10%, rgba(37,99,235,0.10), transparent 60%),
                    radial-gradient(800px 500px at 110% 10%, rgba(124,58,237,0.09), transparent 60%),
                    radial-gradient(700px 400px at 50% 120%, rgba(14,165,233,0.07), transparent 60%);
}
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
[data-theme="light"] .app-container { background: rgba(255,255,255,0.82); box-shadow: 0 20px 60px rgba(15,23,42,0.10), 0 0 40px rgba(59,130,246,0.06); }
[data-theme="light"] .app-header { background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(248,250,255,0.95)); }
[data-theme="light"] .app-title { background: linear-gradient(90deg, #1d4ed8, #7c3aed 60%, #db2777); -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] #language-switcher option, [data-theme="light"] .action-buttons-group select option, [data-theme="light"] .setting-item select option { background: #fff; color: #0f172a; }
[data-theme="light"] .girlfriend-message .message-bubble { background: #ffffff; box-shadow: 0 4px 16px rgba(15,23,42,0.06); }
[data-theme="light"] .message-bubble { box-shadow: 0 4px 16px rgba(15,23,42,0.06); }
[data-theme="light"] .action-button { background: #fff; border-color: rgba(109,40,217,0.35); color: #6d28d9; }
[data-theme="light"] .delete-message-btn { background: #fff; }
[data-theme="light"] .input-area { background: rgba(248,250,255,0.95); }
[data-theme="light"] #message-input { background: #fff; }
[data-theme="light"] .modal-content, [data-theme="light"] .mc-login-card { background: #ffffff; box-shadow: 0 20px 60px rgba(15,23,42,0.15); }
[data-theme="light"] .setting-item input[type="text"], [data-theme="light"] .setting-item input[type="number"], [data-theme="light"] .setting-item select, [data-theme="light"] .setting-item textarea { background: #fff; }
[data-theme="light"] .close-btn:hover, [data-theme="light"] .close-btn:focus { color: #0f172a; }
[data-theme="light"] .gift-item { background: #fff; }
[data-theme="light"] .gift-item:hover { box-shadow: 0 10px 30px rgba(124,58,237,0.12); }
[data-theme="light"] .loading-overlay { background: rgba(248,250,255,0.8); }
[data-theme="light"] #mc-login-overlay, [data-theme="light"] #mc-consent-overlay { background-image: radial-gradient(700px 420px at 15% 0%, rgba(37,99,235,0.14), transparent 60%), radial-gradient(700px 420px at 90% 100%, rgba(124,58,237,0.12), transparent 60%); }
[data-theme="light"] .mc-overlay { background: rgba(15,23,42,0.35); }
[data-theme="light"] #mc-google-btn { border: 1px solid #dadce0; }
[data-theme="light"] .mc-menu-item, [data-theme="light"] .mc-pack { background: #fff; }
[data-theme="light"] .mc-menu-item.mc-danger { color: #b91c1c; border-color: rgba(185,28,28,0.3); }
[data-theme="light"] #mc-login-error, [data-theme="light"] #mc-buy-error, [data-theme="light"] #mc-c-error, [data-theme="light"] #mc-acc-error { color: #b91c1c; }
[data-theme="light"] .mc-quota-badge { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.3); color: #1d4ed8; }
[data-theme="light"] .mc-quota-badge.pro { background: rgba(109,40,217,0.08); border-color: rgba(109,40,217,0.35); color: #6d28d9; }
[data-theme="light"] .mc-quota-badge.low { background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.35); color: #b91c1c; }
[data-theme="light"] .copyright-content .about-note { background: rgba(109,40,217,0.06); }
[data-theme="light"] .system-message .message-bubble { background: rgba(15,23,42,0.03); }
@media (max-width: 480px) { .mc-theme-btn { width: 30px; height: 30px; font-size: 14px; } }

/* ---- Chat background = current character avatar (set by setChatBackdrop in MYGFjs.js) ---- */
.app-container { position: relative; isolation: isolate; }
#chat-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: cover; background-position: center 20%;
  filter: blur(3px) saturate(1.1); transform: scale(1.03); opacity: 0; transition: opacity .8s ease, background-image .3s; }
#chat-backdrop.on { opacity: 0.85; }
#chat-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,16,0.45), rgba(5,8,16,0.2) 35%, rgba(5,8,16,0.35) 65%, rgba(5,8,16,0.75)); }
.app-container { background: rgba(8,13,26,0.55); }
.chat-interface { background: transparent; }
.girlfriend-message .message-bubble { background: rgba(15,23,42,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.system-message .message-bubble { background: rgba(15,23,42,0.6); }
.app-header { background: linear-gradient(180deg, rgba(12,18,32,0.9), rgba(8,13,26,0.78)); }
.favorability-bar-container { background: rgba(8,13,26,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.input-area { background: rgba(12,18,32,0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
[data-theme="light"] #chat-backdrop.on { opacity: 0.75; }
[data-theme="light"] #chat-backdrop::after { background: linear-gradient(180deg, rgba(248,250,255,0.45), rgba(248,250,255,0.15) 35%, rgba(248,250,255,0.3) 65%, rgba(248,250,255,0.75)); }
[data-theme="light"] .app-container { background: rgba(255,255,255,0.55); }
[data-theme="light"] .girlfriend-message .message-bubble { background: rgba(255,255,255,0.85); }
[data-theme="light"] .system-message .message-bubble { background: rgba(255,255,255,0.7); }
[data-theme="light"] .app-header { background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,255,0.82)); }
[data-theme="light"] .favorability-bar-container { background: rgba(255,255,255,0.6); }
[data-theme="light"] .input-area { background: rgba(248,250,255,0.88); }
@media (prefers-reduced-motion: reduce) { #chat-backdrop { transition: none; } }

/* sharper backdrop → keep chat text readable */
.girlfriend-message .message-bubble { background: rgba(15,23,42,0.82); }
.message-timestamp, .girlfriend-name, .message-metadata { text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
[data-theme="light"] .girlfriend-message .message-bubble { background: rgba(255,255,255,0.9); }
[data-theme="light"] .message-timestamp, [data-theme="light"] .girlfriend-name, [data-theme="light"] .message-metadata { text-shadow: 0 1px 2px rgba(255,255,255,0.8); }

/* Built-in avatars carry a name, so each thumbnail in the picker gets a caption */
.avatar-pick { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; cursor: pointer; }
.avatar-pick-name { font-size: 11px; line-height: 1.2; text-align: center; opacity: .8; }
.avatar-thumbnail-container { max-height: 190px; }

/* Picking who the character is, right where the portraits are - the same choice as in the settings form,
   put where people actually look for it. */
#avatar-gender-switch .gender-pick { padding: 4px 12px; font-size: 13px; opacity: .65; }
#avatar-gender-switch .gender-pick.active { opacity: 1; font-weight: 600; outline: 2px solid currentColor; }