/* [하모이닷컴] 메아리 — 2026-08-25 인라인에서 분리
   상자 크기·배경 같은 뼈대는 페이지 안에 남겨 두고(자리가 흔들리지 않도록),
   나머지 꾸밈은 여기로 옮겨 첫 화면 그리기를 막지 않게 했다. */
#hamoi-public-widget .hpw-badge { display:inline-block; margin-left:6px; padding:1px 6px; background:#357; color:#fff; font-size:11px; border-radius:4px; vertical-align:middle; }
#hamoi-public-widget .hpw-status-group { display:flex; align-items:center; gap:8px; }
#hamoi-public-widget .hpw-status { font-size:12px; color:#9c9; }
#hpw-participants-toggle { background:none; border:none; color:#ccc; font-size:16px; cursor:pointer; padding:3px 6px; border-radius:5px; line-height:1; }
#hpw-participants-toggle:hover { background:#2a2a2a; }
#hpw-stealth-toggle { background:none; border:none; color:#ccc; font-size:16px; cursor:pointer; padding:3px 6px; border-radius:5px; line-height:1; opacity:.5; }
#hpw-stealth-toggle:hover { background:#2a2a2a; }
#hpw-stealth-toggle.on { opacity:1; background:#3b2f5c; color:#c4b5fd; }
#hpw-participants-panel { display:none; position:absolute; right:16px; top:44px; background:#242424; border:1px solid #444; border-radius:6px; padding:6px 0; font-size:13px; color:#ddd; max-height:220px; overflow-y:auto; z-index:20; min-width:150px; box-shadow:0 4px 12px rgba(0,0,0,.5); }
#hpw-participants-panel .p-title { padding:6px 12px; font-size:11px; color:#888; border-bottom:1px solid #3a3a3a; margin-bottom:2px; }
#hpw-participants-panel .p-item { padding:6px 12px; }
#hpw-participants-panel .p-item.me { color:#7cf; }
#hpw-participants-panel .p-empty { padding:10px 12px; color:#777; }
#hpw-pinned { display:none; padding:8px 16px; background:#2a2410; border-bottom:1px solid #444; color:#fde68a; font-size:13px; line-height:1.4; }
#hamoi-public-widget .msg.me { color:#7cf; }
#hamoi-public-widget .msg.whisper { color:#f9a; font-style:italic; }
#hamoi-public-widget .msg.call { color:#ff0; font-weight:bold; }
#hamoi-public-widget .msg.pending { opacity:.6; }
#hamoi-public-widget .msg .nick { font-size:12px; color:#bbb; margin-right:6px; cursor:pointer; text-decoration:underline dotted; }
#hamoi-public-widget .msg .nick:hover { color:#fff; }
#hamoi-public-widget .msg .nick.bot { cursor:default; text-decoration:none; color:#9c9; }
#hamoi-public-widget .msg .time { font-size:11px; color:#666; }
#hamoi-public-widget .msg.emoji .emoji-content { font-size:28px; line-height:1.2; }
#hamoi-public-widget .msg.image img { max-width:220px; max-height:220px; border-radius:8px; display:block; margin:4px auto 0; cursor:pointer; }
#hpw-new-msg-btn { display:none; position:absolute; bottom:10px; left:50%; transform:translateX(-50%); background:#357; color:#fff; border:none; border-radius:16px; padding:6px 14px; font-size:12px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.5); z-index:10; }
.hpw-reactions { display:inline-flex; flex-wrap:nowrap; gap:2px; align-items:center; margin-left:6px; vertical-align:middle; }
.hpw-reactions .react-pill { background:#2a2a2a; border:1px solid #444; border-radius:10px; padding:0px 6px; font-size:10px; color:#ddd; cursor:pointer; line-height:1.5; }
.hpw-reactions .react-pill:hover { background:#333; }
.hpw-reactions .react-pill.mine { background:#2d4a63; border-color:#4a90c2; color:#bfe3ff; }
.hpw-reactions .react-add-btn { background:none; border:1px dashed #555; border-radius:10px; padding:0px 5px; font-size:10px; color:#888; cursor:pointer; line-height:1.5; }
.hpw-reactions .react-add-btn:hover { background:#2a2a2a; color:#ccc; }
.hpw-reactions .react-report-btn { background:none; border:none; font-size:10px; color:#775; cursor:pointer; padding:0 3px; opacity:.6; }
.hpw-reactions .react-report-btn:hover { opacity:1; }
#hpw-reaction-picker { position:fixed; z-index:999; background:#2a2a2a; border:1px solid #555; border-radius:20px; box-shadow:0 4px 12px rgba(0,0,0,.5); display:none; padding:4px 6px; gap:2px; }
#hpw-reaction-picker button { background:none; border:none; font-size:18px; cursor:pointer; padding:3px 5px; border-radius:50%; line-height:1; }
#hpw-reaction-picker button:hover { background:#3a3a3a; }
#hpw-toolbar-row { display:flex; gap:2px; align-items:center; padding:6px 10px; border-top:1px solid #444; background:#161616; }
#hpw-toolbar-row button { background:none; border:none; font-size:19px; cursor:pointer; padding:4px 8px; border-radius:5px; line-height:1; }
#hpw-toolbar-row button:hover { background:#2a2a2a; }
#hpw-emoji-panel { display:none; grid-template-columns:repeat(8, 1fr); gap:2px; max-height:160px; overflow-y:auto; padding:8px 10px; border-top:1px solid #444; background:#161616; }
#hpw-emoji-panel button { background:none; border:none; font-size:20px; cursor:pointer; padding:5px; border-radius:5px; line-height:1; }
#hpw-emoji-panel button:hover { background:#2a2a2a; }
#hpw-shop-panel { display:none; flex-wrap:wrap; gap:6px; max-height:160px; overflow-y:auto; padding:8px 10px; border-top:1px solid #444; background:#161616; }
#hpw-shop-panel img { width:38px; height:38px; object-fit:contain; background:#101010; border-radius:6px; cursor:pointer; }
#hpw-shop-panel .hpw-shop-empty { font-size:12px; color:#999; padding:4px; }
#hpw-color-btn { background:none; border:none; font-size:17px; cursor:pointer; padding:4px 8px; border-radius:5px; }
#hpw-color-btn:hover { background:#2a2a2a; }
#hpw-color-row { display:none; flex-wrap:wrap; gap:6px; padding:8px 10px; border-top:1px solid #444; background:#161616; align-items:center; max-height:70px; overflow-y:auto; }
#hpw-color-row .swatch { width:20px; height:20px; border-radius:50%; cursor:pointer; border:2px solid transparent; padding:0; flex-shrink:0; }
#hpw-color-row .swatch.selected { border-color:#fff; }
#hpw-input-wrap { position:relative; border-top:1px solid #444; }
#hpw-mention-list { display:none; position:absolute; bottom:100%; left:0; right:0; background:#242424; border:1px solid #444; border-radius:6px 6px 0 0; max-height:160px; overflow-y:auto; z-index:15; }
#hpw-mention-list .m-item { padding:8px 12px; font-size:13px; color:#ddd; cursor:pointer; }
#hpw-mention-list .m-item:hover { background:#333; }
#hpw-input-row { display:flex; }
#hpw-input { flex:1; padding:10px; background:#111; color:#eee; border:none; outline:none; }
#hpw-send { padding:10px 16px; background:#357; color:#fff; border:none; cursor:pointer; }
#hpw-waiting { text-align:center; padding:24px 16px; color:#fc6; font-size:14px; }
#hpw-nick-menu { position:fixed; z-index:999; background:#2a2a2a; border:1px solid #555; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.5); min-width:140px; display:none; overflow:hidden; }
#hpw-nick-menu .menu-title { padding:8px 12px; font-size:12px; color:#999; border-bottom:1px solid #444; }
#hpw-nick-menu button { display:block; width:100%; text-align:left; padding:9px 12px; background:none; border:none; color:#eee; font-size:14px; cursor:pointer; }
#hpw-nick-menu button:hover { background:#3a3a3a; }