/* ui-coin-chat-style.css — coin chat preview (simulated, no backend). External file, no inline styles (CSP style-src 'self'). */
/* base first, so the mobile rule below can hide it */
.coin-chat{display:flex;flex-direction:column;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
/* desktop: the chat sits beside the chart; the chart column keeps at least ~800 px at 1440 */
@media(min-width:1101px){
 .token-workspace.has-chat{grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
 .coin-chat{position:sticky;top:72px;height:calc(100vh - 180px);min-height:420px}
 .token-workspace .tabs [data-tab=chat]{display:none}
}
@media(min-width:761px) and (max-width:1100px){
 .token-workspace.has-chat{grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
 .coin-chat{position:sticky;top:72px;height:calc(100vh - 180px);min-height:420px}
 .token-workspace .tabs [data-tab=chat]{display:none}
}
/* mobile: the chat is a tab; it replaces the detail panel while selected */
@media(max-width:760px){
 .coin-chat{display:none}
 .token-workspace[data-tab=chat] .coin-chat{display:flex;height:min(72vh,620px);margin-bottom:calc(var(--bottom-nav-height,84px) + 16px)}
 .token-workspace[data-tab=chat] .detailpanel{display:none}
}
.cc-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.cc-title{font-size:14px;margin:0;font-weight:700;white-space:nowrap}.cc-sym{color:var(--green)}
.cc-watch{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.cc-demo{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.02em;color:#1a1204;background:var(--amber);border-radius:6px;padding:2px 6px;white-space:nowrap}
.cc-rules{margin:0;padding:6px 12px;font-size:11px;color:var(--muted);border-bottom:1px solid var(--line);background:#0d1215}
.cc-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 0;scrollbar-width:thin;scrollbar-color:rgba(121,229,177,.30) transparent}
@media(prefers-reduced-motion:no-preference){.cc-scroll{scroll-behavior:smooth}}
.cc-list{list-style:none;margin:0;padding:0}
.cc-msg{display:flex;gap:9px;padding:7px 12px;position:relative}
.cc-msg:hover,.cc-msg:focus-within{background:#151c20}
.cc-msg.own{background:rgba(121,229,177,.05)}
.cc-avatar{width:28px;height:28px;flex:none;border-radius:9px;background:#0b1013;padding:3px;margin-top:2px}
.cc-h0{color:#79e5b1}.cc-h1{color:#7cc4ff}.cc-h2{color:#ff9fd2}.cc-h3{color:#ffd166}.cc-h4{color:#b69cff}.cc-h5{color:#ff9b71}.cc-h6{color:#5ee0e0}.cc-h7{color:#c2e872}
.cc-body{min-width:0;flex:1}
.cc-meta{display:flex;align-items:center;gap:6px;font-size:11px;line-height:1.3;color:var(--muted);min-height:18px}
.cc-meta>*{line-height:1.3}
.cc-wallet{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#c9d3d8}
.cc-holder{font-size:10px;font-weight:700;color:#06130d;background:var(--green);border-radius:5px;padding:1px 5px}
.cc-time{margin-left:auto;font-variant-numeric:tabular-nums}
.cc-pending{font-style:italic}
.cc-report{opacity:0;border:0;background:none;color:var(--muted);font-size:12px;min-height:22px;min-width:22px;padding:0 4px;border-radius:5px;cursor:pointer}
.cc-msg:hover .cc-report,.cc-msg:focus-within .cc-report,.cc-report:focus-visible{opacity:1}
.cc-report:hover{color:var(--red);background:rgba(255,121,133,.12)}
@media(hover:none){.cc-report{opacity:.7}}
.cc-text{margin:2px 0 0;font-size:13px;line-height:1.45;overflow-wrap:anywhere;color:#e8eef1}
.cc-flag{display:inline-flex;align-items:baseline;gap:4px;border-radius:5px;padding:0 4px;margin:0 1px}
.cc-chip{font-size:10px;font-weight:700;white-space:nowrap}
.cc-raw{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;text-decoration:line-through dotted;cursor:not-allowed;user-select:all}
.cc-link{background:rgba(235,187,101,.13);color:var(--amber);border:1px dashed rgba(235,187,101,.6)}
.cc-mint{background:rgba(255,121,133,.12);color:var(--red);border:1px dashed rgba(255,121,133,.6)}
.cc-this{background:rgba(121,229,177,.10);color:var(--green)}.cc-this .cc-raw{text-decoration:none;cursor:text}
.cc-hidden{margin:2px 0 0;font-size:12px;color:var(--muted);font-style:italic}
.cc-msg.hidden .cc-avatar{opacity:.4}
.cc-msg.reported .cc-text{opacity:.55}
.cc-note{margin:2px 0 0;font-size:11px;color:var(--amber)}
.cc-reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.cc-react{display:inline-flex;align-items:center;gap:3px;min-height:24px;padding:0 7px;border-radius:999px;border:1px solid var(--line);background:#0d1215;color:#c9d3d8;font-size:12px;cursor:pointer}
.cc-react:hover{border-color:#3a4a52}.cc-react.mine{border-color:rgba(121,229,177,.7);background:rgba(121,229,177,.12);color:var(--green)}
.cc-n{font-variant-numeric:tabular-nums;font-size:11px}
.cc-addreact{opacity:0;border:0;background:none;color:var(--muted);font-size:12px;min-height:22px;padding:0 4px;border-radius:5px;cursor:pointer}
.cc-msg:hover .cc-addreact,.cc-msg:focus-within .cc-addreact,.cc-addreact:focus-visible,.cc-addreact[aria-expanded=true]{opacity:1}.cc-addreact:hover{color:#e8eef1;background:#1b2429}
@media(hover:none){.cc-addreact{opacity:.7}}
.cc-picker{position:absolute;right:12px;top:26px;z-index:2;display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:999px;background:#0b1013}
.cc-picker button{border:0;background:none;font-size:16px;min-width:30px;min-height:28px;padding:0 4px;border-radius:999px;cursor:pointer}.cc-picker button:hover,.cc-picker button:focus-visible{background:#1b2429}
.cc-newpill{align-self:center;margin:-38px 0 8px;position:relative;z-index:1;border:1px solid rgba(121,229,177,.5);background:#0f1a16;color:var(--green);border-radius:999px;font-size:12px;padding:4px 12px;cursor:pointer}
.cc-foot{border-top:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.cc-guest,.cc-hint{margin:0;font-size:12px;color:var(--muted)}.cc-hint{color:var(--amber)}
.cc-primary{background:var(--green);color:#06130d;border:0;border-radius:9px;font-weight:700;min-height:36px;padding:6px 12px;cursor:pointer}
.cc-ghost{background:none;border:1px solid var(--line);color:#c9d3d8;border-radius:9px;min-height:32px;padding:4px 12px;cursor:pointer}
.cc-wallets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.cc-walletbtn{min-height:36px;padding:6px 8px;border-radius:9px;border:1px solid var(--line);background:#0d1215;color:#e8eef1;cursor:pointer}
.cc-signmsg{margin:0;max-height:140px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;line-height:1.4;background:#0b1013;border:1px solid var(--line);border-radius:8px;padding:8px;color:#c9d3d8}
.cc-signrow{display:grid;grid-template-columns:2fr 1fr;gap:6px}
.cc-me{display:flex;align-items:center;gap:6px;font-size:11px}.cc-me .cc-avatar{width:20px;height:20px;padding:2px;margin:0}.cc-signout{margin-left:auto;min-height:24px;font-size:11px;padding:0 8px}
.cc-form{display:flex;gap:6px}.cc-input{flex:1;min-width:0;min-height:36px;border-radius:9px;border:1px solid var(--line);background:#0b1013;color:#e8eef1;padding:0 10px;font-size:13px}
.cc-input:focus-visible{outline:2px solid rgba(121,229,177,.6);outline-offset:1px}
.cc-send{min-height:36px;min-width:72px;padding:0 12px;border-radius:9px;border:0;background:var(--green);color:#06130d;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-send:disabled{background:#1b2429;color:var(--muted);cursor:not-allowed}
.cc-send[data-reason=cooldown]{color:var(--amber)}
.cc-count{font-size:10px;color:var(--muted);align-self:flex-end;margin-top:-4px}.cc-count.over{color:var(--red)}
.cc-status{margin:0;font-size:11px;color:var(--amber);min-height:14px}
/* playful, but calm: a new message slides in once (220 ms); a reaction bumps once (180 ms); nothing loops */
@keyframes cc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cc-bump{50%{transform:scale(1.15)}}
.cc-enter{animation:cc-in .22s ease-out}
.cc-bump{animation:cc-bump .18s ease-out}
@media(prefers-reduced-motion:reduce){.cc-enter,.cc-bump{animation:none!important}.cc-scroll{scroll-behavior:auto}}
@media(max-width:760px){.coin-chat{scroll-margin-top:124px}.token-workspace .tabs{scroll-margin-top:124px}}