/** JUQOR — Chat View (Bloco 2) */
.chat-view{display:none;flex-direction:column;height:100%;background:var(--bg0)}
.chat-view.active{display:flex}
.chat-header{padding:10px 14px;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:10px;background:var(--bg1);flex-shrink:0}
.chat-header-avatar{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.chat-header-avatar.dm{background:rgba(6,214,160,.08);border:1px solid rgba(6,214,160,.08)}
.chat-header-avatar.grp{background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.08)}
.chat-header-info{flex:1}
.chat-header-name{font-size:14px;color:var(--t0);font-weight:600}
.chat-header-status{font-size:9px;color:var(--green);display:flex;align-items:center;gap:4px}
.chat-header-actions{display:flex;gap:6px}

/* E2E Banner */
.e2e-banner{padding:5px 0;background:linear-gradient(90deg,rgba(6,214,160,.02),rgba(6,214,160,.06),rgba(6,214,160,.02));display:flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0}
.e2e-banner span{font-size:8px;color:var(--a);letter-spacing:1px;font-weight:500}

/* Messages container */
.messages{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:4px}

/* Message */
.msg{display:flex;max-width:80%}
.msg.mine{align-self:flex-end}
.msg.system{align-self:center}
.msg-wrap{max-width:100%;position:relative}
.msg-sender{font-size:9px;color:var(--a);margin-left:6px;margin-bottom:2px;font-weight:600}

/* Bubble */
.msg-bubble{padding:10px 14px;border-radius:16px;word-break:break-word;position:relative}
.msg.mine .msg-bubble{background:linear-gradient(135deg,rgba(6,214,160,.8),rgba(4,184,144,.73));border-bottom-right-radius:4px}
.msg:not(.mine):not(.system) .msg-bubble{background:var(--card);border:1px solid var(--b1);border-bottom-left-radius:4px}
.msg.system .msg-bubble{padding:4px 12px;background:var(--bg2);border:1px solid var(--b1);border-radius:8px}
.msg.system .msg-bubble span{font-size:10px;color:var(--t3)}

/* Text */
.msg-text{font-size:13px;line-height:1.5}
.msg.mine .msg-text{color:var(--bg0)}
.msg:not(.mine) .msg-text{color:var(--t0)}

/* Time + read receipt */
.msg-time{font-size:8px;text-align:right;margin-top:4px;display:flex;align-items:center;justify-content:flex-end;gap:3px}
.msg.mine .msg-time{color:rgba(4,6,12,.45)}
.msg:not(.mine) .msg-time{color:var(--t4)}

/* Photo placeholder */
.msg-photo{width:200px;height:140px;border-radius:12px;background:linear-gradient(135deg,var(--bg3),var(--bg2));display:flex;align-items:center;justify-content:center;margin:4px}

/* Reply quote inside bubble */
.msg-reply-quote{margin:-4px -4px 8px -4px;padding:6px 10px;border-left:3px solid var(--a);border-radius:4px;font-size:11px;color:var(--t2)}

/* Reactions under bubble */
.msg-reactions{display:flex;gap:3px;margin-top:4px;margin-left:4px;flex-wrap:wrap}
.msg-reaction{display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;background:var(--bg2);border:1px solid var(--b1);border-radius:12px;font-size:12px;cursor:pointer;transition:all .2s}
.msg-reaction:hover{background:var(--bg3);transform:scale(1.15)}

/* Typing indicator */
#typing-indicator{padding:4px 14px;font-size:11px;color:var(--a);font-style:italic;flex-shrink:0}

/* Chat input bar */
.chat-input-bar{padding:10px 14px;border-top:1px solid var(--b1);display:flex;align-items:center;gap:8px;background:var(--bg1);flex-shrink:0}
.send-btn{width:38px;height:38px;border-radius:11px;border:none;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.send-btn.active{background:linear-gradient(135deg,var(--a),#04b890);box-shadow:0 4px 12px rgba(6,214,160,.2);cursor:pointer}
.send-btn:not(.active){background:var(--bg3);cursor:default}

/* Reply bar (above input) */
#reply-bar{padding:8px 14px;background:var(--bg2);border-top:1px solid var(--b1);border-left:3px solid var(--a);display:none;align-items:center;justify-content:space-between;flex-shrink:0}

/* Long press hint */
.msg:not(.system) .msg-wrap{cursor:pointer;-webkit-user-select:none;user-select:none}
.msg:not(.system) .msg-wrap:active{opacity:.85}