*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',sans-serif;background:#f5e6d3;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:10px}
.c{background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.2);width:100%;max-width:1100px;height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* HEADER */
.h{background:linear-gradient(135deg,#d2691e,#8b4513);color:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0;position:sticky;top:0;z-index:100}
.h h1{font-size:16px}.h p{font-size:10px;opacity:.9}
.h-right{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.h-right a{color:#fff;text-decoration:none;font-size:11px;font-weight:bold}
.h-right button{background:#8b4513;color:#fff;border:none;padding:4px 10px;border-radius:15px;cursor:pointer;font-size:10px;font-weight:bold}
.guest-badge{background:#ff9800;color:#fff;padding:2px 7px;border-radius:10px;font-size:9px;font-weight:bold;display:none}

/* ACTION ROW */
.action-row{display:flex;justify-content:flex-end;gap:6px;padding:6px 10px;background:#fff;border-bottom:1px solid #f0e0d0;flex-shrink:0}
.chat-history-label{margin-right:auto;font-size:14px;font-weight:bold;color:#fff;background:#8b4513;padding:5px 15px;border-radius:20px;display:inline-block;line-height:1.2;align-self:center}
.action-btn{background:#d2691e;color:#fff;border:none;padding:5px 12px;border-radius:15px;cursor:pointer;font-size:11px;font-weight:bold;white-space:nowrap}
.action-danger{background:#d32f2f}

/* MAIN ROW: sidebar + chat */
.main-row{display:flex;flex:1;overflow:hidden;min-height:0;position:relative}

/* SIDEBAR */
.sidebar{display:flex;flex-direction:column;width:180px;background:#faf5f0;border-right:2px solid #e0c8a8;overflow-y:auto;flex-shrink:0}
.tabs-container{display:flex;flex-direction:column;flex:1;overflow-y:auto}
.tabs{display:flex;flex-direction:column;padding:4px}
.tab{padding:8px 10px;background:#f5e6d3;border:1px solid #e0c8a8;border-radius:8px;margin:2px 0;cursor:pointer;font-size:11px;display:flex;align-items:center;gap:4px}
.tab.active{background:#fff;border:2px solid #d2691e;font-weight:bold;color:#8b4513}
.tab .del{width:20px;height:20px;background:#e0a0a0;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer;margin-left:auto;font-weight:bold}
.tab .rename-btn{width:22px;height:22px;background:#999;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer;margin-left:3px;font-weight:bold}

/* CHAT AREA */
.chat-area{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;overflow:hidden;width:100%;max-width:100%}
#b{flex:1;overflow-y:auto;padding:10px 15px;background:#fffaf5;scroll-behavior:smooth;min-height:0}

/* MESSAGES */
.m-wrapper{display:flex;align-items:flex-end;gap:6px;margin:8px 0;width:100%;max-width:100%;overflow:hidden}
.m-wrapper.user{justify-content:flex-end}
.m-wrapper.bot{justify-content:flex-start}
.m{max-width:85%;padding:10px 14px;border-radius:16px;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;font-size:13px;line-height:1.8}
.u{background:#8b4513;color:#fff}
.s{background:#fff;border:2px solid #d2691e}

/* MARKDOWN */
.markdown-body h1,.markdown-body h2{color:#8b4513;margin:14px 0 8px;font-size:18px;font-weight:bold}
.markdown-body h3{color:#d2691e;margin:20px 0 10px;font-size:14px;font-weight:bold}
.markdown-body p{margin:14px 0;line-height:2.0}
.markdown-body strong{color:#8b4513;font-weight:bold}

/* TYPING */
.typing-indicator{display:none;padding:8px 15px;align-items:center;gap:4px}
.typing-indicator.show{display:flex}
.typing-dot{width:7px;height:7px;background:#d2691e;border-radius:50%;animation:typing 1.4s infinite}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}

/* SINGLE INPUT BAR */
.single-bar{display:flex;align-items:center;gap:18px;padding:8px 15px;background:#fff;border-top:1px solid #f0e0d0;flex-shrink:0;position:sticky;bottom:0;z-index:100}
.single-bar .attach-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:#f0e0d0;border-radius:50%;cursor:pointer;font-size:16px;flex-shrink:0;border:none}
.single-bar #q{flex:1;min-width:0;padding:10px 12px;margin-left:25px;border:2px solid #e0c8a8;border-radius:25px;font-size:14px;outline:0;min-height:40px;font-family:inherit}
.single-bar #q:focus{border-color:#d2691e}
.single-bar #askBtn{background:#d2691e;color:#fff;border:0;padding:12px 20px;border-radius:35px;cursor:pointer;font-weight:700;font-size:16px;flex-shrink:0;white-space:nowrap}

/* FOOTER */
.f{text-align:center;padding:8px 6px;font-size:9px;color:#999;flex-shrink:0;background:#fff;position:sticky;bottom:0;z-index:100}
.f a{color:#d2691e;text-decoration:none}

/* TOAST */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 24px;border-radius:25px;font-size:14px;opacity:0;transition:opacity .3s;z-index:1000}
.toast.show{opacity:1}

/* SEARCH */
.search-bar{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#fff;border-bottom:1px solid #f0e0d0;flex-shrink:0}
.search-bar input{flex:1;padding:6px 12px;border:2px solid #e0c8a8;border-radius:20px;font-size:12px;outline:0}
.search-results{display:none;background:#fff;border:2px solid #d2691e;border-radius:10px;max-height:200px;overflow-y:auto;position:absolute;z-index:100}

@media(max-width:600px){.c{height:100vh;border-radius:0}.sidebar{width:140px}}

/* MOBILE RESPONSIVE */
@media(max-width:600px){
    body{padding:0}
    .c{height:100vh;border-radius:0;max-width:100%}
    
    .h{padding:8px 10px;gap:6px}
    .h h1{font-size:14px}
    .h p{font-size:9px}
    .h-right a,.h-right button{font-size:9px;padding:3px 8px}
    
    .action-row{padding:4px 8px;gap:4px}
    .chat-history-label{font-size:11px;padding:4px 10px}
    .action-btn{font-size:10px;padding:4px 8px}
    
    .main-row{flex-direction:column}
    .sidebar{display:none;position:fixed;top:0;left:0;width:250px;height:100vh;z-index:1000;background:#faf5f0;border-right:2px solid #e0c8a8;box-shadow:2px 0 10px rgba(0,0,0,.2)}
    .sidebar.show{display:flex}
    
    .chat-area{width:100%;flex:1}
    #b{flex:1;overflow-y:auto;padding:10px 15px;background:#fffaf5;scroll-behavior:smooth;min-height:0}
    
    .m{max-width:90%;font-size:12px;padding:8px 10px}
    
    .single-bar{padding:6px 8px;gap:6px}
    .single-bar .attach-btn{width:28px;height:28px;font-size:14px}
    .single-bar #q{font-size:13px;padding:8px 10px;min-height:36px;margin-left:0}
    .single-bar #askBtn{padding:8px 16px;font-size:14px}
    
    .f{font-size:8px;padding:4px}
    .f a{font-size:8px}
}

.hamburger-btn{display:none;background:#f0e0d0;border:none;color:#8b4513;font-size:18px;cursor:pointer;padding:4px 10px;border-radius:6px;margin:6px;align-self:flex-start}
@media(max-width:600px){
    .hamburger-btn{display:block}
    .guest-badge{display:none !important}
    .h-right #userName{display:none}
    .h-right a{display:none}
    .h-right button{display:none}
}


/* LOGIN PAGE */
.login-body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#f5e6d3;padding:20px}
.login-container{background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.2);width:100%;max-width:420px;padding:35px 30px;text-align:center}
.login-container h1{color:#8b4513;font-size:22px;margin-bottom:4px}
.login-container p{color:#888;font-size:13px;margin-bottom:20px}
.tab-row{display:flex;background:#faf5f0;border-radius:25px;padding:4px;margin-bottom:20px;border:1px solid #e0c8a8}
.tab-btn{flex:1;padding:10px;text-align:center;border-radius:20px;cursor:pointer;font-size:13px;font-weight:bold;color:#888;border:none;background:none;transition:all .3s}
.tab-btn.active{background:#d2691e;color:#fff}
.login-container label{display:block;font-size:12px;color:#555;margin-bottom:5px;font-weight:600;text-align:left}
.login-container input{width:100%;padding:12px 14px;border:2px solid #e0c8a8;border-radius:10px;font-size:14px;outline:0;margin-bottom:15px;transition:border .3s;box-sizing:border-box}
.login-container input:focus{border-color:#d2691e}
.login-container input::placeholder{color:#bbb}
.login-container button[type=submit]{width:100%;padding:14px;background:#d2691e;color:#fff;border:none;border-radius:10px;cursor:pointer;font-weight:bold;font-size:15px;transition:background .3s}
.login-container button[type=submit]:hover{background:#8b4513}
.forgot-link{display:block;text-align:center;margin-top:12px;color:#d2691e;text-decoration:none;font-size:12px;font-weight:600;cursor:pointer}
.forgot-link:hover{text-decoration:underline}
.back{display:block;text-align:center;margin-top:15px;color:#888;text-decoration:none;font-size:12px}
.back:hover{color:#d2691e}
.msg{padding:10px;border-radius:8px;font-size:12px;margin-top:15px;display:none;text-align:center}
.msg.success{display:block;background:#e8f5e9;color:#2e7d32}
.msg.error{display:block;background:#ffebee;color:#d32f2f}
@media(max-width:400px){
    .login-container{padding:25px 20px}
    .login-container h1{font-size:20px}
}


/* FEEDBACK */
.feedback-btn{position:fixed;bottom:100px;right:99px;background:#d2691e;color:#fff;border:none;padding:10px 14px;border-radius:25px;cursor:pointer;font-weight:bold;font-size:12px;z-index:900;box-shadow:0 4px 15px rgba(0,0,0,.2);white-space:nowrap}
@media(max-width:600px){.feedback-btn{right:9px;bottom:79px}}
.feedback-btn:hover{background:#8b4513}
.feedback-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1000;justify-content:center;align-items:center;padding:20px}
.feedback-modal.show{display:flex}
.feedback-content{background:#fff;border-radius:15px;padding:25px;width:100%;max-width:400px;max-height:90vh;overflow-y:auto}
.feedback-content h3{color:#8b4513;font-size:18px;margin-bottom:4px;text-align:center}
.feedback-subtitle{color:#888;font-size:12px;text-align:center;margin-bottom:15px}
.star-rating{display:flex;justify-content:center;gap:8px;margin-bottom:15px;font-size:28px}
.star-rating span{cursor:pointer;transition:transform .2s;opacity:.4}
.star-rating span.active{opacity:1;transform:scale(1.2)}
.feedback-content input,.feedback-content select,.feedback-content textarea{width:100%;padding:10px 12px;border:2px solid #e0c8a8;border-radius:8px;font-size:13px;margin-bottom:10px;outline:0;box-sizing:border-box;font-family:inherit}
.feedback-content input:focus,.feedback-content select:focus,.feedback-content textarea:focus{border-color:#d2691e}
.fb-submit{width:100%;padding:12px;background:#d2691e;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:bold;font-size:14px;margin-bottom:8px}
.fb-submit:hover{background:#8b4513}
.fb-cancel{width:100%;padding:10px;background:#f0e0d0;color:#8b4513;border:none;border-radius:8px;cursor:pointer;font-weight:bold;font-size:13px}
.fb-cancel:hover{background:#e0c8a8}


/* CHAT HISTORY TITLE IN SIDEBAR */
.chat-history-title{display:none;padding:12px 15px;font-size:14px;font-weight:bold;color:#fff;background:linear-gradient(135deg,#d2691e,#8b4513);text-align:left;flex-shrink:0}
@media(max-width:600px){
    .chat-history-title{display:block}
}


/* Hide Chrome PWA install badge */
body > div[style*='position: fixed'][style*='bottom'] {
    display: none !important;
}


/* Hide Chrome PWA install badge */
div[class*='install'], div[id*='install'], .pwa-install-banner, .chrome-install-badge {
    display: none !important;
}


/* Hide Chrome PWA install badge */
@media(max-width:600px){
    div[style*='position: fixed'][style*='bottom'], 
    div[style*='position:fixed'][style*='bottom'],
    .pwa-install-banner,
    chrome-pwa-install-banner {
        display: none !important;
    }
}