/*!
 * xCast Widgets — estilos compartilhados (w-chat, w-pedidos, futuros w-*).
 * Mesma linguagem visual dos Players 2.0: tokens, accent, dark/light.
 * Tema: body.xw-dark (padrao) / body.xw-light. Accent via --xw-accent inline.
 */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --xw-accent:#1db954;
  --xw-bg:#0d1117; --xw-card:#161b22; --xw-card2:#1c2330; --xw-txt:#e6edf3;
  --xw-mut:#8b949e; --xw-line:rgba(255,255,255,.08); --xw-inp:#0d1117;
  background:var(--xw-bg); color:var(--xw-txt);
}
body.xw-light {
  --xw-bg:#f2f4f8; --xw-card:#ffffff; --xw-card2:#eef1f6; --xw-txt:#1c2330;
  --xw-mut:#5b6472; --xw-line:rgba(15,23,42,.10); --xw-inp:#f6f8fb;
}
.xw-wrap { height:100%; display:flex; flex-direction:column; max-width:680px; margin:0 auto; }

/* header */
.xw-head { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--xw-line); background:var(--xw-card); }
.xw-logo { width:40px; height:40px; border-radius:10px; object-fit:cover; background:var(--xw-card2); }
.xw-head-tit { font-size:15px; font-weight:800; line-height:1.2; }
.xw-head-sub { font-size:11.5px; color:var(--xw-mut); display:flex; align-items:center; gap:6px; margin-top:2px; }
.xw-dot { width:7px; height:7px; border-radius:50%; background:var(--xw-accent); display:inline-block; animation:xw-pulse 1.6s infinite; }
@keyframes xw-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.xw-badge { margin-left:auto; background:var(--xw-card2); border:1px solid var(--xw-line); color:var(--xw-txt); border-radius:20px; padding:5px 12px; font-size:12px; font-weight:700; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.xw-badge b { color:var(--xw-accent); }

/* área rolável / corpo */
.xw-body { flex:1; overflow-y:auto; padding:14px 16px; scroll-behavior:smooth; }
.xw-body::-webkit-scrollbar { width:8px; } .xw-body::-webkit-scrollbar-thumb { background:var(--xw-line); border-radius:4px; }

/* chat: bolhas */
.xw-msg { display:flex; gap:9px; margin-bottom:10px; align-items:flex-end; animation:xw-in .18s ease; }
@keyframes xw-in { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.xw-av { width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; text-transform:uppercase; }
.xw-bub { max-width:78%; background:var(--xw-card); border:1px solid var(--xw-line); border-radius:14px 14px 14px 4px; padding:8px 12px; }
.xw-msg.minha { flex-direction:row-reverse; }
.xw-msg.minha .xw-bub { background:var(--xw-accent); border-color:transparent; color:#fff; border-radius:14px 14px 4px 14px; }
.xw-msg.minha .xw-bub .xw-nm, .xw-msg.minha .xw-bub .xw-hr { color:rgba(255,255,255,.8); }
.xw-msg.oficial .xw-bub { background:linear-gradient(135deg, var(--xw-accent), color-mix(in srgb, var(--xw-accent) 55%, #000)); border-color:transparent; color:#fff; }
.xw-msg.oficial .xw-bub .xw-nm, .xw-msg.oficial .xw-bub .xw-hr { color:rgba(255,255,255,.85); }
.xw-nm { font-size:11px; font-weight:800; color:var(--xw-accent); display:flex; align-items:center; gap:5px; }
.xw-selo { background:rgba(255,255,255,.25); color:#fff; font-size:9px; font-weight:800; letter-spacing:.4px; border-radius:4px; padding:1px 5px; }
.xw-tx { font-size:13.5px; line-height:1.45; word-wrap:break-word; white-space:pre-wrap; }
.xw-hr { font-size:10px; color:var(--xw-mut); margin-top:3px; text-align:right; }
.xw-vazio { text-align:center; color:var(--xw-mut); font-size:13px; padding:34px 10px; }

/* rodapé de envio */
.xw-foot { border-top:1px solid var(--xw-line); background:var(--xw-card); padding:10px 12px; }
.xw-emojis { display:flex; gap:4px; margin-bottom:8px; overflow-x:auto; scrollbar-width:none; }
.xw-emojis::-webkit-scrollbar { display:none; }
.xw-emojis button { background:var(--xw-card2); border:1px solid var(--xw-line); border-radius:8px; font-size:16px; padding:4px 8px; cursor:pointer; transition:transform .12s; }
.xw-emojis button:active { transform:scale(1.25); }
.xw-row { display:flex; gap:8px; }
.xw-input { flex:1; background:var(--xw-inp); border:1px solid var(--xw-line); border-radius:12px; color:var(--xw-txt); font-size:14px; padding:11px 14px; outline:none; transition:border-color .15s; min-width:0; }
.xw-input:focus { border-color:var(--xw-accent); }
.xw-send { background:var(--xw-accent); border:0; border-radius:12px; width:46px; min-width:46px; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:filter .15s, transform .1s; }
.xw-send:hover { filter:brightness(1.1); } .xw-send:active { transform:scale(.94); }
.xw-send:disabled { opacity:.5; cursor:default; }
.xw-send svg { width:20px; height:20px; }

/* formulários (pedidos, recados) */
.xw-card { background:var(--xw-card); border:1px solid var(--xw-line); border-radius:16px; padding:18px; margin-bottom:14px; }
.xw-tit { font-size:16px; font-weight:800; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.xw-sub { font-size:12.5px; color:var(--xw-mut); margin-bottom:14px; }
.xw-label { font-size:11.5px; font-weight:700; color:var(--xw-mut); margin:10px 0 5px; display:block; text-transform:uppercase; letter-spacing:.4px; }
.xw-field { width:100%; background:var(--xw-inp); border:1px solid var(--xw-line); border-radius:10px; color:var(--xw-txt); font-size:14px; padding:11px 13px; outline:none; transition:border-color .15s; }
.xw-field:focus { border-color:var(--xw-accent); }
.xw-btn { width:100%; background:var(--xw-accent); color:#fff; border:0; border-radius:12px; font-size:14.5px; font-weight:800; padding:13px; cursor:pointer; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:8px; transition:filter .15s, transform .1s; }
.xw-btn:hover { filter:brightness(1.1); } .xw-btn:active { transform:scale(.98); }
.xw-btn:disabled { opacity:.55; cursor:default; }
.xw-ok { text-align:center; padding:26px 12px; animation:xw-in .3s ease; }
.xw-ok-ic { width:64px; height:64px; margin:0 auto 12px; border-radius:50%; background:var(--xw-accent); display:flex; align-items:center; justify-content:center; animation:xw-popin .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes xw-popin { from{transform:scale(.3); opacity:0} to{transform:scale(1); opacity:1} }
.xw-ok-ic svg { width:32px; height:32px; }
.xw-ok-tit { font-size:16px; font-weight:800; margin-bottom:4px; }
.xw-ok-sub { font-size:12.5px; color:var(--xw-mut); }

/* listas (tocadas recentes / top / histórico) */
.xw-list { list-style:none; }
.xw-item { display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--xw-line); }
.xw-item:last-child { border-bottom:0; }
.xw-item-hora { font-size:11px; font-weight:700; color:var(--xw-accent); background:var(--xw-card2); border-radius:7px; padding:4px 8px; white-space:nowrap; }
.xw-item-tit { font-size:13px; font-weight:700; line-height:1.3; }
.xw-item-art { font-size:11.5px; color:var(--xw-mut); }
.xw-rodape { text-align:center; font-size:10.5px; color:var(--xw-mut); padding:8px 0 12px; }
.xw-rodape a { color:var(--xw-mut); text-decoration:none; }