/* ============================================
   Dế Mèn Chatbot - Stylesheet
   17 nhân vật từ "Dế Mèn phiêu lưu ký"
   ============================================ */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Arial,sans-serif;background:linear-gradient(135deg,#e8f5e9 0%,#fff8e1 50%,#e3f2fd 100%);min-height:100vh;padding:12px}
.app{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:10px}

/* Header */
.hdr{background:linear-gradient(135deg,#4e342e,#6d4c41);color:#fff;border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:12px;box-shadow:0 3px 14px rgba(78,52,46,.3)}
.hdr-av{width:48px;height:48px;background:#fff3e0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}
.hdr h1{font-size:16px}.hdr p{font-size:11px;opacity:.85;margin-top:2px}
.hdr .back{margin-left:auto;color:#ffcc80;text-decoration:none;font-size:12px}

/* Character selector */
.char-bar{display:flex;gap:6px;flex-wrap:wrap;padding:8px 10px;background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.char-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border:2px solid #e0d6ce;border-radius:20px;background:#fafaf8;font-size:11px;cursor:pointer;transition:all .2s;white-space:nowrap}
.char-btn:hover{background:#efebe9;border-color:#bcaaa4}
.char-btn.active{background:#5d4037;color:#fff;border-color:#5d4037}
.char-btn .em{font-size:16px}
.char-btn .ini{display:inline-flex;width:20px;height:20px;border-radius:50%;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;flex-shrink:0}

/* Main layout */
.main{display:flex;gap:10px;min-height:440px}
@media(max-width:700px){.main{flex-direction:column}.sb{max-height:180px}}

/* Chat area */
.chat{flex:1;background:#fff;border-radius:14px;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(0,0,0,.07);overflow:hidden}
.msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.m{display:flex;gap:7px;max-width:88%}.m.u{align-self:flex-end;flex-direction:row-reverse}
.m-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.m.b .m-av{background:#efebe9}.m.u .m-av{background:#e3f2fd}
.m-bb{padding:9px 13px;border-radius:14px;font-size:13px;line-height:1.5;white-space:pre-wrap}
.m.b .m-bb{background:#f5f5f5;color:#333;border-bottom-left-radius:3px}
.m.u .m-bb{background:#5d4037;color:#fff;border-bottom-right-radius:3px}

/* Typing indicator */
.typ{display:flex;gap:4px;padding:8px 13px}
.typ .d{width:6px;height:6px;background:#a1887f;border-radius:50%;animation:bn 1.2s infinite}
.typ .d:nth-child(2){animation-delay:.2s}.typ .d:nth-child(3){animation-delay:.4s}
@keyframes bn{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}

/* Quick replies */
.qr{padding:6px 14px;display:flex;flex-wrap:wrap;gap:5px;border-top:1px solid #f0f0f0}
.qr button{padding:5px 10px;background:#efebe9;border:1px solid #d7ccc8;border-radius:14px;font-size:11px;cursor:pointer;color:#5d4037;transition:all .15s}
.qr button:hover{background:#d7ccc8}

/* Input area */
.inp{display:flex;gap:7px;padding:10px 14px;border-top:1px solid #eee;background:#fafafa}
.inp input{flex:1;padding:9px 13px;border:1px solid #d7ccc8;border-radius:20px;font-size:13px;outline:none}
.inp input:focus{border-color:#8d6e63}
.inp .snd{width:38px;height:38px;background:#5d4037;color:#fff;border:none;border-radius:50%;font-size:16px;cursor:pointer}

/* Sidebar */
.sb{width:240px;background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.07);overflow-y:auto;padding:12px;flex-shrink:0}
.sb h3{font-size:13px;color:#5d4037;margin-bottom:8px}
.mi{background:#fafaf6;border:1px solid #e8e0d8;border-radius:9px;padding:9px;margin-bottom:7px;font-size:11px}
.mi .ct{display:inline-block;background:#efebe9;color:#5d4037;padding:2px 7px;border-radius:7px;font-weight:600;font-size:10px}
.mi .us{margin-top:3px;color:#888}.mi .pt{margin-top:3px;color:#a1887f;font-style:italic}
.nm{color:#bbb;font-size:12px;text-align:center;margin-top:16px}
.mi.ms{border-left:3px solid #ef5350}

/* Log bar */
.log-bar{display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:8px 14px;box-shadow:0 2px 10px rgba(0,0,0,.06);font-size:11px;color:#888;flex-wrap:wrap}
.log-bar .lc{font-weight:600;color:#5d4037}
.log-bar .miss-c{color:#c62828;font-weight:600}
.log-btn{padding:5px 12px;background:#5d4037;color:#fff;border:none;border-radius:8px;font-size:11px;cursor:pointer}
.log-btn:hover{background:#4e342e}
.log-btn.clr{background:#ef5350}.log-btn.clr:hover{background:#c62828}

/* Profile card */
.prof{background:#fff;border-radius:14px;padding:12px 16px;box-shadow:0 2px 10px rgba(0,0,0,.07);font-size:12px;line-height:1.6;color:#555;display:flex;gap:12px;align-items:flex-start}
.prof .pav{font-size:36px;flex-shrink:0}
.prof strong{color:#5d4037}.prof .pn{font-size:15px;font-weight:700;color:#4e342e}