/* chat-panel.css - shared chat CSS for all 3 dashboard views */

/* === Split layout (talks/manage inline panel) === */
.split{display:flex;flex:1;min-height:0;overflow:hidden}
.left-panel{width:380px;flex-shrink:0;overflow-y:auto;border-right:none;padding:0 6px}
.resize-handle{width:5px;flex-shrink:0;background:#2a2d37;cursor:col-resize;transition:background .2s}
.resize-handle:hover,.resize-handle.dragging{background:#7dd3fc}
.right-panel{flex:1;display:flex;flex-direction:column;min-width:0}

/* === Talk list items === */
.talk-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#1a1d27;border-radius:8px;border:1px solid #2a2d37;margin-bottom:4px;cursor:pointer;transition:border-color .2s,background .2s;position:relative}
.talk-item:hover{border-color:#7dd3fc}
.talk-item.selected{background:#1e2a3a;border-color:#7dd3fc}
.talk-menu-btn{color:#555;cursor:pointer;font-size:16px;padding:4px 6px;border-radius:4px;flex-shrink:0}
.talk-menu-btn:hover{color:#aaa;background:#2a2d37}
.talk-menu{position:absolute;right:8px;top:100%;background:#2a2d37;border:1px solid #3a3d47;border-radius:8px;padding:6px 0;z-index:50;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,0.5);display:none}
.talk-menu-item{padding:8px 14px;font-size:13px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:8px}
.talk-menu-item:hover{background:#3a3d47}
.talk-menu-item.danger{color:#f87171}
.talk-menu-item.active-sns{color:#4ade80}
.talk-menu-divider{border-top:1px solid #3a3d47;margin:4px 0}
.talk-img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#2a2d37}
.talk-body{flex:1;min-width:0}
.talk-name-row{display:flex;align-items:center;gap:6px;min-width:0}
.talk-name{font-size:14px;font-weight:bold;color:#fff;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.talk-uid{font-size:10px;color:#666;line-height:1.2;flex-shrink:0}
.talk-preview{font-size:11px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;line-height:1.3}
.talk-right{text-align:right;flex-shrink:0;min-width:80px}
.talk-time{font-size:10px}
.talk-status{font-size:9px;margin-top:1px}
.unreplied-badge{color:#f87171;font-size:10px;font-weight:bold}
.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:3px}

/* === SNS icons === */
.sns-icon{display:inline-block;width:16px;height:16px;border-radius:3px;text-align:center;line-height:16px;font-size:9px;font-weight:bold;color:#fff;vertical-align:middle;margin-left:1px}
.sns-ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.sns-line{background:#06c755}
.sns-kakao{background:#fee500;color:#3c1e1e}

/* === Stage badges === */
.stage-badge{display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;margin-left:4px;vertical-align:middle}
.stage-idle{background:#2a2d37;color:#888}
.stage-replied{background:#065f46;color:#34d399}
.stage-m2_sent{background:#1e3a5f;color:#60a5fa}
.stage-m3_sent{background:#4c1d95;color:#a78bfa}
.stage-blocked,.stage-timeout_blocked{background:#7f1d1d;color:#f87171}
.stage-manual_intervention{background:#78350f;color:#fbbf24}

/* === Chat header === */
.chat-placeholder{display:flex;align-items:center;justify-content:center;flex:1;color:#555;font-size:15px}
.chat-header{background:#1a1d27;padding:8px 16px;border-bottom:1px solid #2a2d37;display:flex;align-items:center;gap:10px;flex-shrink:0;position:relative}
.chat-menu-btn{color:#555;cursor:pointer;font-size:18px;padding:4px 8px;border-radius:4px;margin-left:auto}
.chat-menu-btn:hover{color:#aaa;background:#2a2d37}
.chat-hdr-menu{position:absolute;right:8px;top:100%;background:#2a2d37;border:1px solid #3a3d47;border-radius:8px;padding:6px 0;z-index:50;min-width:160px;box-shadow:0 4px 12px rgba(0,0,0,0.5);display:none}
.chat-hdr-menu .talk-menu-item{padding:8px 14px;font-size:13px;cursor:pointer;white-space:nowrap}
.chat-hdr-menu .talk-menu-item:hover{background:#3a3d47}
.chat-hdr-menu .talk-menu-item.danger{color:#f87171}
.chat-himg{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#2a2d37}
.chat-hbody{flex:1;min-width:0}
.chat-hname{font-size:15px;font-weight:bold;color:#fff}
.chat-hmeta{font-size:11px;color:#888}
.chat-hactions{display:flex;gap:6px;flex-shrink:0}
.chat-hactions a{font-size:11px;padding:4px 10px;border-radius:5px;cursor:pointer;text-decoration:none;border:1px solid #3a3d47;background:#2a2d37;color:#aaa}
.chat-hactions a:hover{color:#fff;border-color:#7dd3fc}

/* === Chat state bar === */
.chat-state{background:#1a1d27;padding:4px 16px;border-bottom:1px solid #2a2d37;font-size:10px;color:#888;flex-shrink:0}
.chat-state span{margin-right:10px}

/* === Chat messages === */
.chat-msgs{flex:1;overflow-y:auto;padding:10px 16px;display:flex;flex-direction:column;gap:3px}
.msg-wrap{display:flex;align-items:flex-start;gap:4px;position:relative}
.msg-wrap.sent{flex-direction:row-reverse}
.msg{max-width:75%;padding:7px 11px;border-radius:10px;font-size:13px;line-height:1.4;word-break:break-word}
.msg.sent{background:#1e3a5f;color:#e0e0e0;border-bottom-right-radius:4px}
.msg.received{background:#2a2d37;color:#e0e0e0;border-bottom-left-radius:4px}
.msg .time{font-size:9px;color:#666;margin-top:2px}
.msg.system{align-self:center;background:transparent;color:#666;font-size:12px;padding:4px}
.msg.yoro{background:#4c1d95;color:#a78bfa}
.msg.cancelled{opacity:0.4;text-decoration:line-through}
.msg.pending-send{background:#78350f;color:#fbbf24;border:1px dashed #fbbf24}
.msg-cancel{color:#555;cursor:pointer;font-size:12px;align-self:center;visibility:hidden;padding:2px 4px}
.msg-wrap.sent:hover .msg-cancel{visibility:visible}
.msg-cancel:hover{color:#f87171}

/* === Chat compose === */
.chat-pending{background:#1a1d27;padding:6px 16px;border-top:1px solid #2a2d37;display:flex;gap:6px;flex-shrink:0;align-items:center}
.chat-pending span{font-size:10px;color:#fbbf24;white-space:nowrap}
.chat-pending textarea{flex:1;background:#2a2d37;border:1px solid #3a3d47;border-radius:6px;padding:5px 8px;color:#e0e0e0;font-size:16px;outline:none;font-family:inherit;resize:none;line-height:1.4}
.chat-pending button{border:none;border-radius:6px;padding:5px 10px;cursor:pointer;font-size:11px}
.chat-compose{background:#1a1d27;padding:8px 16px;border-top:1px solid #2a2d37;display:flex;gap:8px;flex-shrink:0}
.chat-compose textarea{flex:1;background:#2a2d37;border:1px solid #3a3d47;border-radius:8px;padding:7px 11px;color:#e0e0e0;font-size:16px;outline:none;font-family:inherit;line-height:1.4}
.chat-compose textarea:focus{border-color:#7dd3fc}
.chat-compose button{background:#7dd3fc;color:#0f1117;border:none;border-radius:8px;padding:7px 14px;cursor:pointer;font-weight:bold;font-size:13px}
.chat-compose button:disabled{background:#2a2d37;color:#666;cursor:not-allowed}

/* === Mobile chat === */
@media(max-width:900px){.left-panel{width:320px}}
@media(max-width:768px){
    .split{flex-direction:column;position:relative}
    .left-panel{width:100%;flex:1;border-right:none;max-height:none}
    .right-panel{position:absolute;top:0;left:0;width:100%;height:100%;background:#0f1117;z-index:10;display:none;flex-direction:column}
    .right-panel.mobile-show{display:flex}
    .mobile-back{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#1a1d27;border-bottom:1px solid #2a2d37;cursor:pointer;color:#7dd3fc;font-size:13px;flex-shrink:0}
    .mobile-back:hover{background:#2a2d37}
    .talk-item{align-items:flex-start;gap:8px;padding:9px 10px}
    .talk-img{width:38px;height:38px}
    .talk-body{flex:1 1 auto;min-width:0;padding-right:2px}
    .talk-right{min-width:64px;max-width:76px}
    .talk-preview{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;font-size:12px;color:#a8a29e}
    .talk-menu-btn{padding:2px 4px;margin-left:-4px}
}
@media(max-width:500px){
    .sort-bar{gap:3px}.sort-btn{font-size:10px;padding:3px 7px}
}

/* === Misc === */
.empty{text-align:center;color:#666;padding:40px;font-size:14px}
.load-more{text-align:center;padding:12px;color:#555;font-size:12px}

/* === chat.html full-page specifics === */
.header{background:#1a1d27;padding:10px 16px;border-bottom:1px solid #2a2d37;display:flex;align-items:center;gap:12px;flex-shrink:0}
.header .back{color:#7dd3fc;text-decoration:none;font-size:20px}
.header .user-info{flex:1}
.header .user-name{font-size:16px;font-weight:bold;color:#fff}
.header .user-meta{font-size:12px;color:#888}
.header .actions{display:flex;gap:6px}
.btn{padding:6px 14px;border-radius:6px;border:none;cursor:pointer;font-size:12px;font-weight:bold}
.btn-fav{background:#fbbf24;color:#0f1117}
.btn-fav.active{background:#78350f;color:#fbbf24}
.btn-block{background:#7f1d1d;color:#f87171}
.btn-unblock{background:#065f46;color:#34d399}
.messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:4px}
.state-info{background:#1a1d27;padding:8px 16px;border-bottom:1px solid #2a2d37;font-size:11px;color:#888;flex-shrink:0}
.state-info span{margin-right:12px}
.compose{background:#1a1d27;padding:10px 16px;border-top:1px solid #2a2d37;display:flex;gap:8px;flex-shrink:0}
.compose textarea{flex:1;background:#2a2d37;border:1px solid #3a3d47;border-radius:8px;padding:8px 12px;color:#e0e0e0;font-size:16px;outline:none;font-family:inherit;line-height:1.4}
.compose textarea:focus{border-color:#7dd3fc}
.compose .send-btn{background:#7dd3fc;color:#0f1117;border:none;border-radius:8px;padding:8px 16px;cursor:pointer;font-weight:bold;font-size:14px}
.compose .send-btn:hover{background:#38bdf8}
.compose .send-btn:disabled{background:#2a2d37;color:#666;cursor:not-allowed}

/* chat.html msg menu */
.msg-menu-btn{color:#555;cursor:pointer;font-size:16px;line-height:1;padding:2px 4px;border-radius:4px;user-select:none;align-self:center;visibility:hidden}
.msg-wrap:hover .msg-menu-btn{visibility:visible}
.msg-menu-btn:hover{color:#aaa;background:#2a2d37}
.msg-menu{position:absolute;background:#2a2d37;border:1px solid #3a3d47;border-radius:8px;padding:4px 0;z-index:50;min-width:120px;box-shadow:0 4px 12px rgba(0,0,0,0.4);display:none}
.msg-wrap.sent .msg-menu{right:0;top:100%}

/* === Tab bar === */
.tab-bar{display:flex;justify-content:center;gap:4px;margin-bottom:6px}
.tab-btn{padding:5px 14px;border-radius:6px;cursor:pointer;font-size:12px;background:#2a2d37;color:#888;border:1px solid #3a3d47}
.tab-btn.active{background:#7dd3fc;color:#0f1117;font-weight:bold;border-color:#7dd3fc}
.tab-btn .tab-count{font-size:10px;opacity:0.7;margin-left:3px}