/* ==========================================================================
   AK FAMILY MEDIATOR - STYLE.CSS (VERSION 5.4)
   Theme: Compact Font | Safe Spacing | No Overlap
   ========================================================================== */

/* 1. CORE LAYOUT */
#ak-game-wrapper {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 85vh;
    max-height: 850px;
    min-height: 600px;
    margin: 30px auto;
    border-radius: 35px;
    overflow: hidden;
    box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.25);
    border: 8px solid #fff;
    background: #fff;
    box-sizing: border-box;
    z-index: 999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#ak-3d-background {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
    background: linear-gradient(180deg, #a18cd1 0%, #fbc2eb 100%);
}

.ak-game-container {
    position: relative; z-index: 1; width: 100%; height: 100%;
    display: flex; flex-direction: column;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* 2. SELECT SCREEN */
.ak-select-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #fff;
    z-index: 20;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    text-align: center;
    padding: 20px;
}
.ak-select-screen h2 { font-size: 1.6rem; margin: 0 0 10px 0; color: #764ba2; font-weight: 800; }
.ak-select-screen p { color: #666; margin-bottom: 30px; }
.ak-char-options { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; width: 100%; }
.char-option {
    background: #fff; border: 2px solid #f0f0f0; border-radius: 20px;
    padding: 15px; width: 100px; cursor: pointer;
    transition: all 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex; flex-direction: column; align-items: center;
}
.char-option:hover { transform: translateY(-8px); border-color: #a18cd1; box-shadow: 0 15px 30px rgba(161, 140, 209, 0.2); }
.char-option img { width: 65px; height: 65px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; border: 3px solid #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.char-option span { font-weight: 700; color: #444; font-size: 0.85rem; }

/* 3. HEADER */
.ak-header {
    padding: 15px 20px; text-align: center; background: rgba(255,255,255,0.9);
    border-bottom: 1px solid rgba(0,0,0,0.05); flex-shrink: 0; position: relative;
}
.ak-badge { background: linear-gradient(45deg, #ff9a9e, #fad0c4); color: #fff; padding: 4px 12px; border-radius: 15px; font-size: 0.6rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.ak-header h2 { margin: 8px 0 2px; font-size: 1.1rem; color: #333; font-weight: 800; }
.ak-subtitle { margin: 0; font-size: 0.75rem; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ak-close-mobile { display: none; position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 1.5rem; color: #999; cursor: pointer; padding: 0; }

/* 4. CHAT WINDOW (ĐÃ ĐIỀU CHỈNH FONT VÀ MARGIN) */
.ak-chat-window {
    flex-grow: 1; 
    overflow-y: auto; 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    
    /* Khoảng cách giữa các khối tin nhắn */
    gap: 40px; 
    
    padding-top: 40px;
    padding-bottom: 30px;
    scroll-behavior: smooth; 
    -webkit-overflow-scrolling: touch;
}
.ak-chat-window::-webkit-scrollbar { width: 5px; }
.ak-chat-window::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; }

.chat-message { 
    display: flex; 
    align-items: flex-end; 
    gap: 10px; 
    opacity: 0; 
    transform: translateY(15px); 
    animation: msgSlideIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    position: relative;
    
    /* QUAN TRỌNG: Tạo khoảng trống phía trên mỗi tin nhắn để chứa tên nhân vật */
    margin-top: 25px; 
}
@keyframes msgSlideIn { to { opacity: 1; transform: translateY(0); } }

.chat-avatar img { 
    width: 38px; height: 38px; 
    border-radius: 50%; border: 2px solid #fff; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); object-fit: cover; 
}

.bubble { 
    padding: 12px 16px; 
    border-radius: 18px; 
    
    /* FONT NHỎ GỌN HƠN */
    font-size: 0.95rem; 
    line-height: 1.45; 
    
    max-width: 80%; 
    position: relative; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.04); 
    word-wrap: break-word; 
}

/* TÊN NHÂN VẬT (ĐẨY LÊN TRÊN BUBBLE) */
.sender-name { 
    position: absolute; 
    top: -22px; /* Nằm ngay trên bubble */
    left: 12px; 
    font-size: 0.7rem; 
    font-weight: 700;
    color: #999; 
    white-space: nowrap;
    pointer-events: none;
}

/* Style nhân vật */
.chat-message.khang .bubble { background: #fff; color: #333; border-bottom-left-radius: 4px; }
.chat-message.nhi .bubble { background: #fff5f7; color: #c026d3; border-bottom-left-radius: 4px; border: 1px solid rgba(240, 101, 149, 0.15); }
.chat-message.nhi .sender-name { color: #d946ef; }
.chat-message.trung .bubble { background: #f0f9ff; color: #0284c7; border-bottom-left-radius: 4px; border: 1px solid rgba(14, 165, 233, 0.15); }
.chat-message.trung .sender-name { color: #0ea5e9; }

/* Style User */
.chat-message.user { flex-direction: row-reverse; }
.chat-message.user .bubble { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    color: white; 
    border-bottom-right-radius: 4px; 
    box-shadow: 0 4px 10px rgba(118, 75, 162, 0.25); 
}

/* Tin nhắn hệ thống */
.chat-message.system { 
    justify-content: center; margin: 5px 0; gap: 0; margin-top: 5px; 
}
.chat-message.system span { 
    background: rgba(0,0,0,0.06); color: #666; padding: 5px 12px; 
    border-radius: 20px; font-size: 0.75rem; font-weight: 600; 
}

/* 5. INPUT AREA */
.ak-interaction-panel { padding: 15px; background: #fff; border-top: 1px solid rgba(0,0,0,0.06); flex-shrink: 0; }
.ak-controls { display: flex; gap: 10px; align-items: center; background: #f5f7fa; padding: 8px; border-radius: 35px; border: 1px solid #e1e4e8; }
#player-input { flex-grow: 1; border: none; background: transparent; padding: 10px 15px; font-size: 0.95rem; outline: none; color: #333; }
.ak-btn { border: none; background: linear-gradient(45deg, #667eea, #764ba2); color: white; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; flex-shrink: 0; transition: transform 0.2s; box-shadow: 0 4px 8px rgba(118, 75, 162, 0.3); }
.ak-btn:active { transform: scale(0.9); }
.ak-btn.start { width: auto; padding: 0 25px; border-radius: 25px; font-size: 0.85rem; font-weight: 700; }
.ak-credit { text-align: center; margin-top: 10px; font-size: 0.7rem; color: #bbb; font-weight: 600; letter-spacing: 0.5px; }

/* 6. MOBILE FULLSCREEN */
@media (max-width: 768px) {
    #ak-game-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100dvh; max-height: none; min-height: none; margin: 0; border: none; border-radius: 0; z-index: 999999; }
    #ak-close-mobile { display: block; }
    .ak-game-container { background: rgba(255, 255, 255, 0.98); }
    .ak-char-options { flex-direction: column; gap: 15px; width: 85%; }
    .char-option { width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; padding: 12px 20px; gap: 20px; }
    .ak-header { padding: 12px 15px; }
    
    /* Mobile spacing */
    .ak-chat-window { 
        padding: 20px; 
        gap: 45px; 
        padding-top: 45px; 
    } 
    
    .bubble { font-size: 0.95rem; padding: 12px 15px; }
    .ak-interaction-panel { padding-bottom: 30px; }
    #player-input { font-size: 16px; }
}