.frame{background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 60px -30px rgba(60,40,20,.3);overflow:hidden}
.frame-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--line2);font-size:.78rem;color:var(--ink3);background:var(--surface)}
.frame-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.frame-bar span{margin-left:8px}

.inbox{display:grid;grid-template-columns:280px 1fr 250px;height:560px}
@media (max-width:1020px){.inbox{grid-template-columns:240px 1fr}.inbox .side{display:none}}
@media (max-width:680px){.inbox{grid-template-columns:1fr;height:auto}.inbox .list{max-height:240px;border-right:0!important;border-bottom:1px solid var(--line2)}.inbox .thread{height:480px}}
.list{border-right:1px solid var(--line2);overflow-y:auto}
.list-head{padding:12px;display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line2);position:sticky;top:0;background:var(--white);z-index:2}
.chip{font-size:.76rem;padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--ink2);font-weight:500;transition:background .2s}
.chip:hover{background:var(--paper)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.conv{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line2);cursor:pointer;position:relative;transition:background .2s}
.conv:hover{background:var(--surface)}
.conv.active{background:var(--water-soft)}
.conv.new{animation:flash 1.8s}
@keyframes flash{from{background:var(--copper-soft)}to{background:transparent}}
.cav{position:relative;flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:.78rem;background:var(--paper2);color:var(--ink2)}
.cav .ch{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;border:2px solid var(--white)}
.ch.wa{background:var(--wa)}.ch.ig{background:var(--ig)}.ch.fb{background:var(--fb)}.ch.gg{background:var(--gg)}.ch.mail{background:var(--mail)}
.cmeta{min-width:0;flex:1}
.cmeta b{font-size:.86rem;font-weight:600;display:flex;justify-content:space-between;gap:6px}
.cmeta b small{font-weight:400;color:var(--ink3);font-size:.72rem;white-space:nowrap}
.cmeta p{font-size:.8rem;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread{position:absolute;right:14px;bottom:15px;width:8px;height:8px;border-radius:50%;background:var(--copper)}
.thread{display:flex;flex-direction:column;min-width:0}
.th-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line2)}
.th-head b{font-size:.95rem;font-weight:600}
.th-head select{border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:.8rem;background:var(--white)}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.m{max-width:78%;padding:9px 13px;border-radius:16px;font-size:.87rem;line-height:1.45;animation:pop .35s cubic-bezier(.16,1,.3,1) both}
.m.in{align-self:flex-start;background:#efebe4;border-bottom-left-radius:5px}
.m.out{align-self:flex-end;background:var(--water);color:#fff;border-bottom-right-radius:5px}
.m.ai{align-self:flex-end;background:var(--water-soft);color:var(--ink);border:1px solid #c5dbd2;border-bottom-right-radius:5px}
.m.note{align-self:center;background:var(--copper-soft);color:#6d3518;font-size:.8rem;max-width:92%}
.m small{display:block;font-size:.7rem;opacity:.75;margin-top:3px}
.avail{align-self:center;width:min(100%,380px);background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.82rem;animation:pop .35s both}
.avail b{display:block;margin-bottom:4px}
.avail .row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid var(--line2)}
.composer{border-top:1px solid var(--line2);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.tools{display:flex;gap:6px;flex-wrap:wrap}
.tool{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;padding:6px 10px;border-radius:8px;border:1px solid var(--line);color:var(--ink);font-weight:500;transition:background .2s}
.tool:hover{background:var(--paper)}
.tool .ico{width:14px;height:14px}
.tool.ai{border-color:#c5dbd2;background:var(--water-soft);color:var(--water2)}
.cbox{display:flex;gap:8px}
.cbox input,.bot-in input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:.88rem;outline:none;background:var(--white)}
.cbox input:focus,.bot-in input:focus{border-color:var(--water)}
.side{border-left:1px solid var(--line2);padding:16px;overflow-y:auto;font-size:.84rem}
.side h5{font-size:.78rem;font-weight:600;color:var(--ink3);margin:18px 0 8px}
.side h5:first-child{margin-top:0}
.kv{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid var(--line2)}
.kv span{color:var(--ink2)}
.tag{display:inline-block;font-size:.74rem;padding:3px 8px;border-radius:6px;background:var(--paper);border:1px solid var(--line);margin:2px 3px 2px 0}