:root{
  --header-h: 68px;
  --dock-h: 110px;

  --bg:#0b0f1a; --card:#0e1430; --stroke:#1b2440; --muted:#b7c2ea; --text:#e9eefc; --primary:#2a63ff;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; background:var(--bg); color:var(--text); overscroll-behavior:none; -webkit-tap-highlight-color:transparent; }

.topbar{
  left:0;
  right:0;
 position:fixed; top:0; z-index:50; display:flex; align-items:center; gap:12px; padding:12px;
  background: color-mix(in srgb, var(--card) 92%, black 8%); border-bottom:1px solid var(--stroke); }
.brand{ display:flex; flex-direction:column; line-height:1.15; }
.brand-title{ font-weight:800; font-size:16px; }
.brand-sub{ font-size:12px; color:var(--muted); margin-top:2px; }

.iconbtn{ width:42px; height:42px; border-radius:12px; border:1px solid color-mix(in srgb, var(--stroke) 80%, white 20%);
  background:transparent; color:var(--text); display:grid; place-items:center; cursor:pointer; }

.burger{ width:18px; height:12px; position:relative; display:block; }
.burger::before,.burger::after,.burger span{ content:""; position:absolute; left:0; right:0; height:2px; border-radius:2px; background:var(--text); }
.burger::before{ top:0; } .burger::after{ bottom:0; } .burger span{ top:5px; }

.x{ width:16px; height:16px; position:relative; display:block; }
.x::before,.x::after{ content:""; position:absolute; inset:0; margin:auto; width:16px; height:2px; background:var(--text); border-radius:2px; }
.x::before{ transform:rotate(45deg);} .x::after{ transform:rotate(-45deg);}

.container{ padding:14px; padding-bottom:calc(18px + env(safe-area-inset-bottom)); max-width:720px; margin:0 auto; display:grid; gap:14px; }
.muted{ color:var(--muted); font-size:13px; }
.hint{ margin-top:8px; font-size:12.5px; color:var(--muted); }

.drawer{ position:fixed; top:0; left:0; height:100%; width:86vw; max-width:360px; background:var(--card); border-right:1px solid var(--stroke);
  z-index:60; transform:translateX(-105%); transition:transform .22s ease; display:flex; flex-direction:column; padding-top:env(safe-area-inset-top);
  box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.drawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 12px 10px; border-bottom:1px solid var(--stroke); }
.drawer-title{ font-weight:900; font-size:14px; }

.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:55; backdrop-filter: blur(2px); }

.character-list{ padding:10px; display:grid; gap:10px; overflow:auto; -webkit-overflow-scrolling:touch; }
.char-item{ display:grid; grid-template-columns:52px 1fr; gap:10px; align-items:center; padding:10px; border-radius:16px; border:1px solid var(--stroke);
  background: color-mix(in srgb, var(--card) 92%, black 8%); cursor:pointer; }
.char-thumb{ width:52px; height:52px; border-radius:14px; object-fit:cover; background:#101a3b; }
.char-item-title{ font-weight:800; font-size:14px; margin:0; }
.char-item-sub{ font-size:12px; color:var(--muted); margin-top:2px; }

.character-card{ display:grid; gap:12px; padding:14px; border:1px solid var(--stroke); border-radius:18px; background:var(--card); box-shadow:var(--shadow); }
.char-image{ width:100%; max-height:240px; aspect-ratio: 16/9; object-fit:contain; border-radius:16px; background:#101a3b; }

.char-name{ margin:2px 0 4px; font-size:22px; font-weight:900; }
.playerbar{ margin-top:10px; border-top:1px solid color-mix(in srgb, var(--stroke) 70%, white 30%); padding-top:12px; display:grid; gap:10px; }
.now-title{ font-weight:800; font-size:14px; }
.now-sub{ font-size:12.5px; }
.player{ width:100%; }

.actions{ display:flex; gap:10px; flex-wrap:wrap; }
button,.button{ border:1px solid #2a3a72; background:transparent; color:var(--text); padding:12px 12px; border-radius:14px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; }
button.primary{ background:var(--primary); border-color:var(--primary); }
button:disabled{ opacity:.55; cursor:not-allowed; }

.section-title{ font-weight:900; font-size:14px; margin:6px 2px 8px; }
.sound-list{ display:grid; gap:10px; }
.sound-item{ padding:12px; border-radius:16px; border:1px solid var(--stroke); background: color-mix(in srgb, var(--card) 92%, black 8%); display:grid; gap:10px; }
.sound-title{ font-size:14px; font-weight:800; line-height:1.25; }
.sound-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.small{ padding:10px 12px; border-radius:14px; }

@media (min-width:960px){
  body{ display:grid; grid-template-columns:360px 1fr; }
  .topbar{
  left:0;
  right:0;
 grid-column:1 / -1; }
  .drawer{ position:sticky; transform:none !important; height:100vh; top:0; box-shadow:none; z-index:1; }
  #overlay{ display:none !important; }
  #btnMenu,#btnCloseDrawer{ display:none; }
  .container{ max-width: 980px; }
}


/* Topbar search */
.top-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.searchbox{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 6px 8px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--stroke) 80%, white 20%);
  background: color-mix(in srgb, var(--card) 88%, black 12%);
  width: min(52vw, 320px);
}
.searchbox input{
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}
.searchbox input::placeholder{ color: color-mix(in srgb, var(--muted) 85%, white 15%); }
.small-icon{ width:34px; height:34px; border-radius: 12px; font-size: 16px; line-height: 1; }
@media (max-width: 420px){
  .searchbox{ width: min(58vw, 240px); }
  .brand-sub{ display:none; }
}


.result-meta{ margin-top: -6px; }
.empty{
  padding: 14px;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--stroke) 70%, white 30%);
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 80%, black 20%);
}


/* ===== Melhorias de usabilidade/visual na lista ===== */
.sound-item{
  gap: 0;
  padding: 10px 12px;
}
.sound-row{
  display:grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items:center;
}
.playbtn{
  width:44px;
  height:44px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--stroke) 70%, white 30%);
  background: color-mix(in srgb, var(--card) 85%, black 15%);
  display:grid;
  place-items:center;
  font-size: 18px;
}
.playbtn:active{ transform: translateY(1px); }
.sound-main{ min-width: 0; }
.sound-title{
  margin:0;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.sound-meta{
  display:flex;
  gap: 8px;
  align-items:center;
  margin-top: 6px;
  flex-wrap: wrap;
}
.pill{
  font-size: 11px;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--stroke) 70%, white 30%);
  background: color-mix(in srgb, var(--card) 80%, black 20%);
}
.sound-actions{
  display:flex;
  gap: 8px;
}
.icon-action{
  width:44px;
  height:44px;
  border-radius: 14px;
  border: 1px solid #2a3a72;
  background: transparent;
  color: var(--text);
  display:grid;
  place-items:center;
  cursor:pointer;
  text-decoration:none;
  font-size: 18px;
}
.icon-action:active{ transform: translateY(1px); }

.sound-item.active{
  border-color: color-mix(in srgb, var(--primary) 80%, white 20%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent 65%);
}

@media (max-width: 380px){
  .sound-row{ grid-template-columns: 40px 1fr auto; }
  .playbtn, .icon-action{ width:40px; height:40px; border-radius: 13px; }
}


.sound-item{
  background: color-mix(in srgb, var(--card) 86%, black 14%);
}
.sound-item + .sound-item{
  border-top-color: color-mix(in srgb, var(--stroke) 60%, white 40%);
}


/* ===== Player Dock (fixo abaixo do header) ===== */
.player-dock{
  position: sticky;
  top: 67px; /* altura aproximada do header */
  z-index: 45;
  margin: 0;
  padding: 10px 12px 12px;
  background: color-mix(in srgb, var(--card) 92%, black 8%);
  border-bottom: 1px solid var(--stroke);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
.player-dock[hidden]{ display:none; }

.player-dock-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.dock-now{ min-width:0; }
.dock-title{ font-weight: 900; font-size: 14px; line-height: 1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dock-sub{ font-size: 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.dock-actions{ display:flex; gap: 8px; align-items:center; }
.dock-player{ width: 100%; margin-top: 10px; }

.dock-hint{ margin-top: 6px; }

.icon-action.wpp .wpp-icon{
  width: 20px;
  height: 20px;
  display:block;
  background: var(--text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='black' d='M19.11 17.36c-.27-.14-1.6-.79-1.85-.88-.25-.09-.43-.14-.61.14-.18.27-.7.88-.86 1.06-.16.18-.32.2-.59.07-.27-.14-1.14-.42-2.17-1.34-.8-.71-1.34-1.6-1.5-1.87-.16-.27-.02-.42.12-.56.12-.12.27-.32.41-.48.14-.16.18-.27.27-.45.09-.18.05-.34-.02-.48-.07-.14-.61-1.48-.84-2.02-.22-.53-.45-.46-.61-.47h-.52c-.18 0-.48.07-.73.34-.25.27-.95.93-.95 2.27 0 1.34.97 2.64 1.11 2.82.14.18 1.91 2.92 4.63 4.1.65.28 1.16.45 1.56.58.66.21 1.26.18 1.73.11.53-.08 1.6-.65 1.83-1.28.23-.63.23-1.17.16-1.28-.07-.11-.25-.18-.52-.32zM16.03 26.5h-.01c-1.76 0-3.48-.47-5-1.36l-.36-.21-3.52.92.94-3.43-.23-.35a10.42 10.42 0 0 1-1.62-5.57c0-5.74 4.69-10.41 10.45-10.41 2.79 0 5.41 1.09 7.38 3.06a10.34 10.34 0 0 1 3.06 7.34c0 5.74-4.69 10.41-10.45 10.41zm8.9-19.32A12.43 12.43 0 0 0 16.3 3.6C9.5 3.6 3.97 9.11 3.97 15.88c0 2.18.58 4.31 1.68 6.18L3.86 28.4l6.48-1.7a12.46 12.46 0 0 0 5.96 1.52h.01c6.8 0 12.33-5.51 12.33-12.28 0-3.27-1.27-6.35-3.71-8.76z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='black' d='M19.11 17.36c-.27-.14-1.6-.79-1.85-.88-.25-.09-.43-.14-.61.14-.18.27-.7.88-.86 1.06-.16.18-.32.2-.59.07-.27-.14-1.14-.42-2.17-1.34-.8-.71-1.34-1.6-1.5-1.87-.16-.27-.02-.42.12-.56.12-.12.27-.32.41-.48.14-.16.18-.27.27-.45.09-.18.05-.34-.02-.48-.07-.14-.61-1.48-.84-2.02-.22-.53-.45-.46-.61-.47h-.52c-.18 0-.48.07-.73.34-.25.27-.95.93-.95 2.27 0 1.34.97 2.64 1.11 2.82.14.18 1.91 2.92 4.63 4.1.65.28 1.16.45 1.56.58.66.21 1.26.18 1.73.11.53-.08 1.6-.65 1.83-1.28.23-.63.23-1.17.16-1.28-.07-.11-.25-.18-.52-.32zM16.03 26.5h-.01c-1.76 0-3.48-.47-5-1.36l-.36-.21-3.52.92.94-3.43-.23-.35a10.42 10.42 0 0 1-1.62-5.57c0-5.74 4.69-10.41 10.45-10.41 2.79 0 5.41 1.09 7.38 3.06a10.34 10.34 0 0 1 3.06 7.34c0 5.74-4.69 10.41-10.45 10.41zm8.9-19.32A12.43 12.43 0 0 0 16.3 3.6C9.5 3.6 3.97 9.11 3.97 15.88c0 2.18.58 4.31 1.68 6.18L3.86 28.4l6.48-1.7a12.46 12.46 0 0 0 5.96 1.52h.01c6.8 0 12.33-5.51 12.33-12.28 0-3.27-1.27-6.35-3.71-8.76z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 420px){
  .player-dock{ top: 64px; }
}


/* Layout com header fixo */
body{
  padding-top: var(--header-h);
}
.player-dock{
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  width: 100%;
}
body.dock-open{
  padding-top: calc(var(--header-h) + var(--dock-h));
}


/* Barra compacta do personagem (sem imagem grande) */
.context-bar{
  padding: 12px;
  border: 1px solid var(--stroke);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.context-title{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.1;
}
.context-sub{
  margin-top: 4px;
}


.context-left{
  display:flex;
  gap: 10px;
  align-items:center;
}
.context-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: cover;
  background: #101a3b;
  border: 1px solid color-mix(in srgb, var(--stroke) 70%, white 30%);
  flex: 0 0 auto;
}
.context-text{
  min-width: 0;
}


/* Ícone do personagem no player dock */
.dock-now{
  display:flex;
  gap: 10px;
  align-items:center;
  min-width: 0;
}
.dock-icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  object-fit: cover;
  background: #101a3b;
  border: 1px solid color-mix(in srgb, var(--stroke) 70%, white 30%);
  flex: 0 0 auto;
}
.dock-now > div{
  min-width: 0;
}