.teamchat-emoji-dialog { width: min(360px, 90vw); max-height: 80vh; overflow: auto; border: 1px solid #b8d1d6; border-radius: 14px; padding: 16px; background: #f7fbfb; color: #153742; font: inherit; }
.teamchat-emoji-dialog::backdrop { background: #001f2b99; }
.teamchat-emoji-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.teamchat-emoji-dialog input { box-sizing: border-box; width: 100%; margin-bottom: 12px; padding: 10px; border: 1px solid #b8d1d6; border-radius: 8px; font: inherit; }
.teamchat-emoji-dialog button, .teamchat-reactions button, .teamchat-emoji-compose { cursor: pointer; border: 1px solid #b8d1d6; border-radius: 10px; color: #087f79; background: #fff; }
.teamchat-emoji-dialog header button { padding: 7px 10px; }
.teamchat-emoji-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.teamchat-emoji-grid button { min-height: 42px; padding: 4px; font: 24px "Segoe UI Emoji", "Apple Color Emoji", sans-serif; }
.teamchat-emoji-grid [hidden] { display: none !important; }
.teamchat-emoji-dialog p { font-size: 12px; line-height: 1.5; }
.teamchat-emoji-compose { display:inline-flex; align-items:center; justify-content:center; align-self:flex-end; box-sizing:border-box; flex:0 0 40px; width:40px; height:40px; min-height:40px; padding:9px; border:0; border-radius:50%; background:transparent; }
.teamchat-emoji-compose svg { display:block; width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform 160ms ease; }
body.launcher-webstyle .teamchat-compact .teamchat-emoji-compose { align-self:flex-end; border:0; background:transparent; }
body.launcher-webstyle .teamchat-compact .teamchat-emoji-compose:hover:not(:disabled) { background:#def0ee; }
.teamchat-emoji-compose:hover:not(:disabled) svg { transform:scale(1.1) rotate(-7deg); }
.teamchat-emoji-compose:focus-visible { outline:2px solid #087f79; outline-offset:1px; }
@media(prefers-reduced-motion:reduce) { .teamchat-emoji-compose svg { transition:none; } .teamchat-emoji-compose:hover:not(:disabled) svg { transform:none; } }
.teamchat-reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.teamchat-reactions button { min-height: 28px; padding: 3px 9px; font-family: "Segoe UI Emoji", "Segoe UI", sans-serif; font-size: 13px; }
.teamchat-reactions .is-own { border-color: #087f79; background: #d6edeb; }
.teamchat-reactions button:hover:not(:disabled), .teamchat-emoji-grid button:hover { background: #e6f3f1; border-color: #087f79; }
.teamchat-reactions button:disabled { cursor: default; opacity: .75; }
.teamchat-message-head .teamchat-reaction-add { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; box-sizing: border-box; width: 32px; height: 32px; min-height: 32px; padding: 6px; border: 0; border-radius: 50%; background: transparent; color: #7b858c; cursor: pointer; opacity: 0; pointer-events: none; }
.teamchat-reaction-add svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.teamchat-message:hover .teamchat-reaction-add, .teamchat-message:focus-within .teamchat-reaction-add { opacity: 1; pointer-events: auto; }
.teamchat-message-head .teamchat-reaction-add:hover { background: #e5eaee; }
.teamchat-message-head .teamchat-reaction-add:focus-visible { outline: 2px solid #7b858c; outline-offset: 2px; }
@media (hover: none) { .teamchat-message-head .teamchat-reaction-add { opacity: 1; pointer-events: auto; } }