/* ============================================================ MAD Chat — chat interno em tempo real (Laravel Reverb) Porta do protótipo GTalk (chat.css). Estilo único: janelas flutuantes. As CSS vars vivem aqui (auto-hospedadas, escopadas em #mad-chat-root) — o mb-shell.css do protótipo NÃO é portado. Dark mode reaproveita o sinal já existente do notch: [data-theme="dark"] (setado de localStorage notch-dark-mode). Toda regra é escopada sob #mad-chat-root pra não vazar no legado/Bootstrap. ============================================================ */ #mad-chat-root{ --mc-font:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --mc-surface:#ffffff; --mc-panel:#fafafb; --mc-panel-2:#f6f6f8; --mc-border:#ececf0; --mc-border-2:#e3e3e8; --mc-text:#1b1c21; --mc-text-soft:#6c6d77; --mc-text-mut:#9a9ba4; --mc-accent:#3b5bff; --mc-accent-ink:#2b46e0; --mc-accent-soft:rgba(59,91,255,.12); --mc-danger:#ef4444; --mc-on:#28c76f; --mc-away:#f5a623; --mc-busy:#ef4444; --mc-off:#b3b4bd; --mc-shadow-sm:0 1px 2px rgba(20,22,30,.06); --mc-shadow-md:0 6px 22px -8px rgba(20,22,30,.18); --mc-shadow-lg:0 18px 50px -12px rgba(20,22,30,.30); } [data-theme="dark"] #mad-chat-root{ --mc-surface:#16171d; --mc-panel:#131419; --mc-panel-2:#181a21; --mc-border:#25272f; --mc-border-2:#2d2f39; --mc-text:#e9e9ee; --mc-text-soft:#9b9da8; --mc-text-mut:#6c6e7a; --mc-accent:#6f86ff; --mc-accent-ink:#8aa0ff; --mc-accent-soft:rgba(111,134,255,.16); --mc-danger:#f87171; --mc-shadow-sm:0 1px 2px rgba(0,0,0,.4); --mc-shadow-md:0 8px 26px -8px rgba(0,0,0,.55); --mc-shadow-lg:0 22px 60px -14px rgba(0,0,0,.7); } #mad-chat-root{position:fixed;inset:0;z-index:1000;pointer-events:none;font-family:var(--mc-font)} #mad-chat-root *{box-sizing:border-box} #mad-chat-root .pe{pointer-events:auto} /* ---------- notch trigger + badge ---------- */ .notch-pill-icon-btn{position:relative} #chat-badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:9px; background:var(--mc-danger,#ef4444);color:#fff;font-size:10px;font-weight:700;line-height:1; display:flex;align-items:center;justify-content:center} #chat-badge.hidden{display:none} #chat-badge.pop{animation:mcPop .3s ease} @keyframes mcPop{0%{transform:scale(.6)}60%{transform:scale(1.2)}100%{transform:scale(1)}} #chat-icon-btn.is-active{color:var(--mc-accent,#3b5bff)} /* ---------- avatar + presence ---------- */ #mad-chat-root .c-av{position:relative;flex-shrink:0;border-radius:50%;display:flex;align-items:center; justify-content:center;font-weight:600;color:#fff;overflow:visible;user-select:none} #mad-chat-root .c-av img{width:100%;height:100%;border-radius:50%;object-fit:cover} #mad-chat-root .c-av .dot{position:absolute;right:-1px;bottom:-1px;width:30%;height:30%;min-width:9px;min-height:9px; border-radius:50%;border:2px solid var(--mc-surface);background:var(--mc-off)} #mad-chat-root .c-av .dot.on{background:var(--mc-on)} #mad-chat-root .c-av .dot.away{background:var(--mc-away)} #mad-chat-root .c-av .dot.busy{background:var(--mc-busy)} #mad-chat-root .c-av.grp{border-radius:30%} #mad-chat-root .c-av.grp .dot{display:none} /* ---------- conversation list ---------- */ #mad-chat-root .c-list{display:flex;flex-direction:column;min-height:0;overflow-y:auto} #mad-chat-root .c-row{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer; border-radius:12px;position:relative;transition:background .12s} #mad-chat-root .c-row:hover{background:var(--mc-panel-2)} #mad-chat-root .c-row.active{background:var(--mc-accent-soft)} #mad-chat-root .c-row .c-av{width:42px;height:42px;font-size:15px} #mad-chat-root .c-row .mid{flex:1;min-width:0} #mad-chat-root .c-row .nm{font-size:14px;font-weight:600;color:var(--mc-text);display:flex;align-items:center;gap:6px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #mad-chat-root .c-row .pv{font-size:12.5px;color:var(--mc-text-soft);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;margin-top:2px;display:flex;align-items:center;gap:5px} #mad-chat-root .c-row .pv.unread{color:var(--mc-text);font-weight:600} #mad-chat-root .c-row .pv .you{color:var(--mc-text-mut)} #mad-chat-root .c-row .end{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0} #mad-chat-root .c-row .tm{font-size:11px;color:var(--mc-text-mut)} #mad-chat-root .c-row .cnt{min-width:19px;height:19px;padding:0 6px;border-radius:10px;background:var(--mc-accent); color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center} #mad-chat-root .c-row.active .cnt{background:var(--mc-accent-ink)} /* ---------- search ---------- */ #mad-chat-root .c-search{display:flex;align-items:center;gap:9px;height:38px;padding:0 12px;margin:0 0 4px; background:var(--mc-panel-2);border:1px solid var(--mc-border);border-radius:10px;color:var(--mc-text-mut)} #mad-chat-root .c-search svg{width:16px;height:16px;flex-shrink:0} #mad-chat-root .c-search input{flex:1;border:0;background:transparent;outline:none;font:inherit;font-size:13.5px; color:var(--mc-text)} #mad-chat-root .c-search input::placeholder{color:var(--mc-text-mut)} /* ---------- header (conversation) ---------- */ #mad-chat-root .c-head{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--mc-border); flex-shrink:0;background:var(--mc-surface)} #mad-chat-root .c-head .c-av{width:38px;height:38px;font-size:14px} #mad-chat-root .c-head .h-mid{flex:1;min-width:0} #mad-chat-root .c-head .h-nm{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #mad-chat-root .c-head .h-st{font-size:12px;color:var(--mc-text-soft);margin-top:1px;display:flex;align-items:center;gap:5px} #mad-chat-root .c-head .h-st .pdot{width:7px;height:7px;border-radius:50%;background:var(--mc-off)} #mad-chat-root .c-head .h-st .pdot.on{background:var(--mc-on)} #mad-chat-root .c-head .h-st .pdot.away{background:var(--mc-away)} #mad-chat-root .c-head .hbtn{width:34px;height:34px;border-radius:9px;border:0;background:transparent;cursor:pointer; color:var(--mc-text-soft);display:flex;align-items:center;justify-content:center} #mad-chat-root .c-head .hbtn:hover{background:var(--mc-panel-2);color:var(--mc-text)} #mad-chat-root .c-head .hbtn svg{width:18px;height:18px} #mad-chat-root .c-back{margin-right:-4px} /* ---------- messages ---------- */ #mad-chat-root .c-msgs{flex:1;min-height:0;overflow-y:auto;padding:16px 14px 8px;display:flex;flex-direction:column;gap:3px; background:var(--mc-panel)} #mad-chat-root .c-daysep{align-self:center;font-size:11px;color:var(--mc-text-mut);background:var(--mc-surface); border:1px solid var(--mc-border);padding:3px 12px;border-radius:999px;margin:10px 0} #mad-chat-root .c-msg{display:flex;gap:9px;max-width:82%;animation:mcMsgIn .26s cubic-bezier(.2,.7,.3,1)} @keyframes mcMsgIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} #mad-chat-root .c-msg.me{align-self:flex-end;flex-direction:row-reverse} #mad-chat-root .c-msg .c-av{width:28px;height:28px;font-size:11px;align-self:flex-end} #mad-chat-root .c-msg.cont{margin-top:-1px} #mad-chat-root .c-msg.cont .c-av{visibility:hidden} #mad-chat-root .c-bubble{padding:8px 12px;border-radius:15px;background:var(--mc-surface);border:1px solid var(--mc-border); font-size:13.5px;line-height:1.42;color:var(--mc-text);position:relative;word-break:break-word} #mad-chat-root .c-msg.me .c-bubble{background:var(--mc-accent);border-color:transparent;color:#fff} #mad-chat-root .c-msg:not(.me) .c-bubble{border-bottom-left-radius:5px} #mad-chat-root .c-msg.me .c-bubble{border-bottom-right-radius:5px} #mad-chat-root .c-sender{font-size:11.5px;font-weight:700;margin-bottom:2px} #mad-chat-root .c-msg .meta{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:3px; font-size:10.5px;opacity:.8;white-space:nowrap} #mad-chat-root .c-msg.me .meta{color:rgba(255,255,255,.85)} #mad-chat-root .c-msg:not(.me) .meta{color:var(--mc-text-mut)} #mad-chat-root .c-msg .meta svg{width:14px;height:14px} #mad-chat-root .c-check.read{color:#8fd0ff} [data-theme="dark"] #mad-chat-root .c-check.read{color:#bfe0ff} /* attachment image */ #mad-chat-root .c-att{margin:-2px 0 2px;border-radius:11px;overflow:hidden;border:1px solid rgba(0,0,0,.08);max-width:240px} #mad-chat-root .c-att img{width:100%;display:block;cursor:pointer} #mad-chat-root .c-att-ph{display:flex;align-items:center;justify-content:center;height:150px;width:230px; background:repeating-linear-gradient(45deg,var(--mc-panel-2),var(--mc-panel-2) 9px,var(--mc-panel) 9px,var(--mc-panel) 18px); color:var(--mc-text-mut);font-size:11px;font-family:ui-monospace,monospace;gap:6px} #mad-chat-root .c-att-ph svg{width:18px;height:18px} /* reactions */ #mad-chat-root .c-reacts{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap} #mad-chat-root .c-msg.me .c-reacts{justify-content:flex-end} #mad-chat-root .c-react{display:flex;align-items:center;gap:3px;height:21px;padding:0 7px;border-radius:11px; background:var(--mc-surface);border:1px solid var(--mc-border);font-size:11.5px;cursor:pointer;color:var(--mc-text)} #mad-chat-root .c-react.mine{background:var(--mc-accent-soft);border-color:transparent} #mad-chat-root .c-react .rn{font-size:10px;color:var(--mc-text-soft)} /* hover react button */ /* botão de reagir: ESPAÇO sempre reservado (visibility, não display) — não empurra as mensagens ao passar o mouse; só fica visível no hover da mensagem. */ #mad-chat-root .c-msg .react-add{align-self:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--mc-border); background:var(--mc-surface);color:var(--mc-text-mut);cursor:pointer;display:flex;visibility:hidden;align-items:center; justify-content:center;flex-shrink:0} #mad-chat-root .c-msg:hover .react-add{visibility:visible} #mad-chat-root .c-msg .react-add svg{width:14px;height:14px} #mad-chat-root .emoji-pop{position:fixed;display:flex;gap:2px;padding:5px;background:var(--mc-surface); border:1px solid var(--mc-border);border-radius:14px;box-shadow:var(--mc-shadow-lg);z-index:1200} #mad-chat-root .emoji-pop button{width:30px;height:30px;border:0;background:transparent;border-radius:8px;font-size:17px;cursor:pointer} #mad-chat-root .emoji-pop button:hover{background:var(--mc-panel-2);transform:scale(1.15)} /* typing indicator */ #mad-chat-root .c-typing{display:flex;gap:9px;max-width:80%} #mad-chat-root .c-typing .c-av{width:28px;height:28px;font-size:11px;align-self:flex-end} #mad-chat-root .c-typing .dots{display:flex;align-items:center;gap:4px;padding:11px 14px;background:var(--mc-surface); border:1px solid var(--mc-border);border-radius:15px;border-bottom-left-radius:5px} #mad-chat-root .c-typing .dots i{width:7px;height:7px;border-radius:50%;background:var(--mc-text-mut); animation:mcTyp 1.3s infinite ease-in-out} #mad-chat-root .c-typing .dots i:nth-child(2){animation-delay:.18s} #mad-chat-root .c-typing .dots i:nth-child(3){animation-delay:.36s} @keyframes mcTyp{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}} /* ---------- composer ---------- */ #mad-chat-root .c-composer{flex-shrink:0;border-top:1px solid var(--mc-border);padding:10px 12px;background:var(--mc-surface)} #mad-chat-root .c-attbar{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap} #mad-chat-root .c-attchip{display:flex;align-items:center;gap:7px;padding:5px 8px 5px 5px;border-radius:9px; background:var(--mc-panel-2);border:1px solid var(--mc-border);font-size:12px;color:var(--mc-text)} #mad-chat-root .c-attchip .pic{width:30px;height:30px;border-radius:6px;background:var(--mc-accent-soft);color:var(--mc-accent); display:flex;align-items:center;justify-content:center} #mad-chat-root .c-attchip .pic svg{width:15px;height:15px} #mad-chat-root .c-attchip .x{cursor:pointer;color:var(--mc-text-mut);width:18px;height:18px;display:flex;align-items:center;justify-content:center} #mad-chat-root .c-inwrap{display:flex;align-items:flex-end;gap:8px} #mad-chat-root .c-tools{display:flex;gap:2px} #mad-chat-root .c-tool{width:34px;height:34px;border-radius:9px;border:0;background:transparent;color:var(--mc-text-soft); cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0} #mad-chat-root .c-tool:hover{background:var(--mc-panel-2);color:var(--mc-text)} #mad-chat-root .c-tool svg{width:18px;height:18px} #mad-chat-root .c-field{flex:1;min-width:0;display:flex;align-items:center;background:var(--mc-panel-2); border:1px solid var(--mc-border);border-radius:12px;padding:0 4px 0 12px;transition:border-color .14s} #mad-chat-root .c-field:focus-within{border-color:var(--mc-accent);background:var(--mc-surface)} #mad-chat-root .c-field textarea{flex:1;border:0;background:transparent;outline:none;resize:none;font:inherit; font-size:13.5px;color:var(--mc-text);padding:9px 0;max-height:96px;line-height:1.4} #mad-chat-root .c-field textarea::placeholder{color:var(--mc-text-mut)} #mad-chat-root .c-send{width:36px;height:36px;border-radius:50%;border:0;background:var(--mc-accent);color:#fff; cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.14s;margin-left:2px} #mad-chat-root .c-send:hover{filter:brightness(1.07)} #mad-chat-root .c-send:disabled{background:var(--mc-border-2);color:var(--mc-text-mut);cursor:default} #mad-chat-root .c-send svg{width:17px;height:17px} /* emoji picker (composer) */ #mad-chat-root .c-emojis{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;background:var(--mc-surface); border:1px solid var(--mc-border);border-radius:12px;box-shadow:var(--mc-shadow-md);margin-bottom:8px; max-height:150px;overflow-y:auto} #mad-chat-root .c-emojis button{width:30px;height:30px;border:0;background:transparent;border-radius:7px;font-size:18px;cursor:pointer} #mad-chat-root .c-emojis button:hover{background:var(--mc-panel-2)} /* ---------- empty states ---------- */ #mad-chat-root .c-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:40px 28px;color:var(--mc-text-soft);gap:12px} #mad-chat-root .c-empty .ic{width:62px;height:62px;border-radius:18px;background:var(--mc-accent-soft);color:var(--mc-accent); display:flex;align-items:center;justify-content:center} #mad-chat-root .c-empty .ic svg{width:30px;height:30px} #mad-chat-root .c-empty h4{margin:0;font-size:15.5px;font-weight:600;color:var(--mc-text)} #mad-chat-root .c-empty p{margin:0;font-size:13px;max-width:240px;line-height:1.5} /* ============================================================ Janelas flutuantes (GTalk) ============================================================ */ #mad-chat-root .v-float-dock{position:absolute;right:18px;bottom:18px;width:268px;background:var(--mc-surface); border:1px solid var(--mc-border);border-radius:14px 14px 0 0;box-shadow:var(--mc-shadow-lg); display:flex;flex-direction:column;max-height:62vh;pointer-events:auto;overflow:hidden} #mad-chat-root .v-float-dock .dk-head{display:flex;align-items:center;gap:9px;padding:11px 12px;cursor:pointer; border-bottom:1px solid var(--mc-border);flex-shrink:0} #mad-chat-root .v-float-dock .dk-head .nm{flex:1;font-size:13.5px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #mad-chat-root .v-float-dock .dk-head .st{font-size:11px;color:var(--mc-on);display:flex;align-items:center;gap:4px} #mad-chat-root .v-float-dock .dk-head .st i{width:6px;height:6px;border-radius:50%;background:var(--mc-on)} #mad-chat-root .v-float-dock .dk-head .chev{color:var(--mc-text-mut);width:18px;height:18px;transition:transform .2s} #mad-chat-root .v-float-dock.collapsed .chev{transform:rotate(180deg)} #mad-chat-root .v-float-dock.collapsed{max-height:54px} #mad-chat-root .v-float-dock .dk-search{padding:8px 10px 4px;flex-shrink:0} #mad-chat-root .v-float-dock .c-list{padding:2px 6px 8px} #mad-chat-root .v-float-dock .c-row{padding:8px 10px} #mad-chat-root .v-float-dock .c-row .c-av{width:34px;height:34px;font-size:13px} #mad-chat-root .v-float-windows{position:absolute;right:300px;bottom:0;display:flex;align-items:flex-end;gap:12px; pointer-events:none} #mad-chat-root .gt-win{width:320px;min-width:320px;height:392px;background:var(--mc-surface);border:1px solid var(--mc-border); border-radius:12px 12px 0 0;box-shadow:var(--mc-shadow-lg);display:flex;flex-direction:column;overflow:hidden; pointer-events:auto;animation:mcWinIn .26s cubic-bezier(.2,.8,.3,1)} @keyframes mcWinIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}} #mad-chat-root .gt-win.min{height:42px!important;min-width:280px} /* handle de resize (canto superior-esquerdo — janela ancorada à direita/embaixo) */ #mad-chat-root .gt-win .gt-resize{position:absolute;top:0;left:0;width:18px;height:18px;cursor:nwse-resize;z-index:6} #mad-chat-root .gt-win .gt-resize::before{content:"";position:absolute;top:4px;left:4px;width:7px;height:7px; border-top:2px solid var(--mc-text-mut);border-left:2px solid var(--mc-text-mut);border-radius:3px 0 0 0;opacity:.45} #mad-chat-root .gt-win .gt-resize:hover::before{opacity:.9} /* maximizada: modal centralizada 720px */ #mad-chat-root .mc-scrim{position:fixed;inset:0;background:rgba(15,16,22,.34);z-index:1000;pointer-events:auto; animation:mcMsgIn .2s ease} [data-theme="dark"] #mad-chat-root .mc-scrim{background:rgba(0,0,0,.55)} #mad-chat-root .gt-win.max{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:720px;height:80vh; max-width:92vw;max-height:88vh;border-radius:14px;z-index:1001;animation:mcMaxIn .22s cubic-bezier(.2,.8,.3,1)} @keyframes mcMaxIn{from{opacity:0;transform:translate(-50%,-48%) scale(.985)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} #mad-chat-root .gt-win.max .c-msgs{padding:18px 22px 8px} #mad-chat-root .gt-win.max .c-msg{max-width:70%} #mad-chat-root .gt-win.max .c-composer{padding:12px 16px} #mad-chat-root .gt-win.min .c-msgs,#mad-chat-root .gt-win.min .c-composer{display:none} #mad-chat-root .gt-win .gt-bar{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 11px;cursor:pointer; flex-shrink:0;border-bottom:1px solid var(--mc-border);background:var(--mc-surface)} #mad-chat-root .gt-win .gt-bar .c-av{width:26px;height:26px;font-size:10px} #mad-chat-root .gt-win .gt-bar .nm{flex:1;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #mad-chat-root .gt-win .gt-bar .wb{width:26px;height:26px;border-radius:7px;border:0;background:transparent;color:var(--mc-text-mut); cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0} #mad-chat-root .gt-win .gt-bar .wb:hover{background:var(--mc-panel-2);color:var(--mc-text)} #mad-chat-root .gt-win .gt-bar .wb svg{width:15px;height:15px} #mad-chat-root .gt-win .c-msgs{padding:12px 10px 6px} #mad-chat-root .gt-win .c-bubble{font-size:13px} #mad-chat-root .gt-win .c-composer{padding:8px} #mad-chat-root .gt-win .unreadpip{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px; background:var(--mc-danger);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center; justify-content:center;border:2px solid var(--mc-surface)} /* ---------- nova conversa (overlay no dock) ---------- */ #mad-chat-root .c-newconv{flex:1 1 auto;min-height:0;background:var(--mc-surface);display:flex;flex-direction:column;z-index:5} #mad-chat-root .c-newconv .nc-head{display:flex;align-items:center;gap:10px;padding:14px 14px;border-bottom:1px solid var(--mc-border)} #mad-chat-root .c-newconv .nc-head h4{font-size:15px;font-weight:600;margin:0;flex:1} #mad-chat-root .c-newconv .nc-people{flex:1;overflow-y:auto;padding:6px 8px} #mad-chat-root .c-people-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;cursor:pointer} #mad-chat-root .c-people-row:hover{background:var(--mc-panel-2)} #mad-chat-root .c-people-row .c-av{width:38px;height:38px;font-size:13px} #mad-chat-root .c-people-row .nm{font-size:14px;font-weight:600;flex:1} #mad-chat-root .c-people-row .st{font-size:12px;color:var(--mc-text-soft)} #mad-chat-root .c-people-row .chk{width:22px;height:22px;border-radius:7px;border:2px solid var(--mc-border-2);flex-shrink:0} #mad-chat-root .c-people-row.sel .chk{background:var(--mc-accent);border-color:var(--mc-accent); background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:center} #mad-chat-root .c-newconv .nc-foot{padding:12px 14px;border-top:1px solid var(--mc-border)} #mad-chat-root .c-newconv .nc-foot button{width:100%;height:42px;border-radius:11px;border:0;background:var(--mc-accent); color:#fff;font-weight:600;font-size:14px;cursor:pointer} #mad-chat-root .c-newconv .nc-foot button:disabled{background:var(--mc-border-2);color:var(--mc-text-mut)} #mad-chat-root .iconbtn-x{width:34px;height:34px;border-radius:9px;border:0;background:transparent;color:var(--mc-text-soft); cursor:pointer;display:flex;align-items:center;justify-content:center} #mad-chat-root .iconbtn-x:hover{background:var(--mc-panel-2);color:var(--mc-text)} #mad-chat-root .iconbtn-x svg{width:18px;height:18px} /* ---------- toast (som/notificação) ---------- */ #mad-chat-root .c-toast{position:absolute;right:18px;top:88px;display:flex;align-items:center;gap:11px;padding:11px 14px 11px 11px; background:var(--mc-surface);border:1px solid var(--mc-border);border-radius:13px;box-shadow:var(--mc-shadow-lg); pointer-events:auto;cursor:pointer;max-width:320px;animation:mcToastIn .3s cubic-bezier(.2,.8,.3,1)} @keyframes mcToastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}} #mad-chat-root .c-toast.out{animation:mcToastOut .3s forwards} @keyframes mcToastOut{to{opacity:0;transform:translateX(20px)}} #mad-chat-root .c-toast .c-av{width:38px;height:38px;font-size:14px} #mad-chat-root .c-toast .t-mid{min-width:0} #mad-chat-root .c-toast .t-nm{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #mad-chat-root .c-toast .t-tx{font-size:12.5px;color:var(--mc-text-soft);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;max-width:240px} @media (prefers-reduced-motion: reduce){ #mad-chat-root .gt-win,#mad-chat-root .c-msg,#mad-chat-root .c-typing,#mad-chat-root .c-toast{animation:none !important} }