/* PriceLive shared UI layer: theme, navigation, liquid-glass controls, chatbot and character. */
:root {
  --pl-orange: #f59e0b;
  --pl-orange-2: #ffb83d;
  --pl-surface: rgba(255,255,255,.56);
  --pl-surface-strong: rgba(255,255,255,.72);
  --pl-border: rgba(255,255,255,.68);
  --pl-text: #172033;
  --pl-muted: #64748b;
  --pl-shadow: 0 8px 22px rgba(15,23,42,.10);
  --pl-ease: cubic-bezier(.2,.8,.2,1);
}
html[data-theme="dark"] {
  --pl-surface: rgba(15,23,42,.68);
  --pl-surface-strong: rgba(15,23,42,.80);
  --pl-border: rgba(148,163,184,.22);
  --pl-text: #f8fafc;
  --pl-muted: #a8b4c6;
  --pl-shadow: 0 10px 28px rgba(0,0,0,.26);
}
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* Shared liquid-glass controls */
.pl-liquid,
button.theme-toggle,
button.sidebar-toggle,
button.refresh-btn,
button.copy-table-btn,
button.user-login-btn,
button.asset-action-btn,
button.tf-btn,
button.currency-toggle-btn,
button.calc-tab,
button.asset-chart-btn,
.ai-chat-input button {
  -webkit-tap-highlight-color: transparent;
}
.pl-liquid,
button.refresh-btn,
button.copy-table-btn,
button.user-login-btn,
button.asset-action-btn,
button.tf-btn,
button.currency-toggle-btn,
button.asset-chart-btn,
button.calc-tab.active,
.ai-chat-input button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.48) !important;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.28));
  color: var(--text-primary, var(--pl-text));
  box-shadow: 0 8px 24px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.82), inset 0 -1px 0 rgba(148,163,184,.10);
  transition:transform .18s ease,opacity .18s ease,border-color .18s ease;
}

.pl-liquid:hover,
button.refresh-btn:hover,
button.copy-table-btn:hover,
button.user-login-btn:hover,
button.asset-action-btn:hover,
button.tf-btn:hover,
button.currency-toggle-btn:hover,
button.asset-chart-btn:hover,
button.calc-tab.active:hover,
.ai-chat-input button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(245,158,11,.45) !important;
  box-shadow: 0 14px 32px rgba(15,23,42,.14), 0 0 0 3px rgba(245,158,11,.07), inset 0 1px 0 rgba(255,255,255,.92);
}
.pl-liquid:active,
button.refresh-btn:active,
button.copy-table-btn:active,
button.user-login-btn:active,
button.asset-action-btn:active,
button.tf-btn:active,
button.currency-toggle-btn:active,
button.asset-chart-btn:active,
.ai-chat-input button:active {
  transform: scale(.965);
  box-shadow: 0 4px 12px rgba(15,23,42,.12), inset 0 2px 5px rgba(15,23,42,.10);
}
html[data-theme="dark"] .pl-liquid,
html[data-theme="dark"] button.user-login-btn,
html[data-theme="dark"] button.asset-action-btn,
html[data-theme="dark"] button.tf-btn,
html[data-theme="dark"] button.currency-toggle-btn,
html[data-theme="dark"] button.asset-chart-btn {
  background: linear-gradient(180deg, rgba(71,85,105,.62), rgba(30,41,59,.46));
  border-color: rgba(148,163,184,.25) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12);
}

/* Standard shared sidebar */
.pl-sidebar-overlay {
  position: fixed; inset: 0; z-index: 899;
  background: rgba(2,6,23,.46);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.pl-sidebar-overlay.is-open { opacity: 1; pointer-events: auto; }
.pl-sidebar {
  position: fixed; inset: 0 0 0 auto; z-index: 950;
  width: min(330px, 88vw); height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--pl-surface-strong);
  color: var(--text-primary, var(--pl-text));
  border-left: 1px solid var(--pl-border);
  box-shadow: -10px 0 28px rgba(15,23,42,.12);
  transform: translateX(105%); transition: transform .38s var(--pl-ease);
  overflow: hidden;
}
.pl-sidebar.is-open { transform: translateX(0); }
.pl-sidebar-header {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; color:#fff;
  background: linear-gradient(135deg, rgba(255,184,61,.96), rgba(245,158,11,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
}
.pl-sidebar-brand { display:flex; align-items:center; gap:9px; font-weight:800; }
.pl-sidebar-close { width:36px; height:36px; border:1px solid rgba(255,255,255,.34); border-radius:50%; background:rgba(255,255,255,.18); color:#fff; cursor:pointer; }
.pl-sidebar-user { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border-color, rgba(148,163,184,.2)); }
.pl-sidebar-avatar { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(245,158,11,.14); color:var(--pl-orange); flex:none; }
.pl-sidebar-user-info { min-width:0; flex:1; }
.pl-sidebar-user-name { font-weight:700; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-sidebar-user-status { color:var(--text-secondary, var(--pl-muted)); font-size:.68rem; margin-top:2px; }
.pl-sidebar-login { padding:8px 12px; border-radius:999px; border:1px solid rgba(245,158,11,.35); background:rgba(245,158,11,.10); color:var(--pl-orange); font:inherit; cursor:pointer; }
.pl-sidebar-nav { padding:12px 10px 18px; overflow:auto; flex:1; }
.pl-nav-label { color:var(--text-secondary, var(--pl-muted)); font-size:.68rem; padding:12px 10px 6px; }
.pl-nav-item { display:flex; align-items:center; gap:8px; width:100%; min-height:46px; padding:8px 11px; margin:3px 0; border:1px solid transparent; border-radius:15px; background:transparent; color:inherit; font:inherit; text-decoration:none; cursor:pointer; text-align:right; }
.pl-nav-item:hover { background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.34); }
.pl-nav-item.is-active { background:rgba(245,158,11,.13); border-color:rgba(245,158,11,.22); color:var(--pl-orange); }
.pl-nav-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:rgba(148,163,184,.10); flex:none; }
.pl-nav-item.is-active .pl-nav-icon { background:rgba(245,158,11,.15); }
.pl-nav-chevron { margin-inline-start:auto; transition:transform .25s ease; }
.pl-nav-group.is-open > .pl-nav-item .pl-nav-chevron { transform:rotate(-90deg); }
.pl-subnav { display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease; }
.pl-nav-group.is-open .pl-subnav { grid-template-rows:1fr; }
.pl-subnav-inner { min-height:0; overflow:hidden; }
.pl-subnav a { display:flex; align-items:center; gap:9px; padding:8px 20px 8px 12px; color:var(--text-secondary, var(--pl-muted)); text-decoration:none; font-size:.76rem; border-radius:11px; }
.pl-subnav a:hover, .pl-subnav a.is-active { color:var(--pl-orange); background:rgba(245,158,11,.08); }
.pl-sub-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.pl-sidebar-footer { padding:12px 16px; border-top:1px solid var(--border-color, rgba(148,163,184,.2)); color:var(--text-secondary, var(--pl-muted)); font-size:.64rem; text-align:center; }
.pl-global-controls { position:fixed; top:max(14px, env(safe-area-inset-top)); right:max(14px, env(safe-area-inset-right)); z-index:880; display:flex; gap:8px; direction:ltr; }
.pl-global-controls button { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--text-primary, var(--pl-text)); }

.pl-sidebar-lock { overflow:hidden !important; }

/* Shared chatbot */
.pl-ai-widget { position:fixed; right:max(18px, env(safe-area-inset-right)); bottom:max(18px, env(safe-area-inset-bottom), calc(var(--pl-keyboard-gap, 0px) + 12px)); z-index:1200; display:flex; flex-direction:column; align-items:flex-end; gap:12px; pointer-events:none; }
.pl-ai-fab { pointer-events:auto; width:58px; height:58px; border:1px solid rgba(255,255,255,.48); border-radius:50%; background:linear-gradient(180deg,#ffc55c,#f59e0b); color:#fff; cursor:pointer; box-shadow:0 8px 22px rgba(245,158,11,.20); position:relative; display:grid; place-items:center; font-size:1.15rem; transition:transform .22s var(--pl-ease), box-shadow .28s ease; }
.pl-ai-fab:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 10px 26px rgba(245,158,11,.24); }
.pl-ai-online { position:absolute; width:12px; height:12px; border-radius:50%; right:2px; bottom:2px; background:#10b981; border:2px solid #fff; }
.pl-ai-box { pointer-events:auto; width:min(390px, calc(100vw - 28px)); height:min(560px, calc(100dvh - 110px)); min-height:320px; display:none; flex-direction:column; overflow:hidden; border:1px solid var(--pl-border); border-radius:26px; background:var(--pl-surface-strong); box-shadow:var(--pl-shadow); }
.pl-ai-box.is-open { display:flex; animation:plChatIn .18s ease-out; }
@keyframes plChatIn { from {opacity:0; transform:translateY(14px) scale(.98)} to {opacity:1; transform:none} }
.pl-ai-header { display:flex; align-items:center; gap:10px; padding:12px 14px; color:#fff; background:linear-gradient(135deg,rgba(255,190,66,.96),rgba(245,158,11,.92)); flex:none; }
.pl-ai-avatar { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.2); flex:none; }
.pl-ai-title { font-weight:800; font-size:.9rem; }
.pl-ai-sub { font-size:.62rem; opacity:.86; margin-top:2px; }
.pl-ai-close { margin-inline-start:auto; width:34px; height:34px; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(255,255,255,.16); color:#fff; cursor:pointer; }
.pl-ai-messages { flex:1; min-height:0; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; background:rgba(248,250,252,.28); overscroll-behavior:contain; }
html[data-theme="dark"] .pl-ai-messages { background:rgba(2,6,23,.32); }
.pl-ai-msg { max-width:88%; padding:8px 11px; border-radius:16px; line-height:1.65; font-size:.78rem; white-space:pre-wrap; word-break:break-word; }
.pl-ai-msg.user { align-self:flex-end; color:#fff; background:linear-gradient(135deg,#fbbf24,#f59e0b); border-bottom-right-radius:4px; }
.pl-ai-msg.bot { align-self:flex-start; color:var(--text-primary, var(--pl-text)); background:rgba(255,255,255,.44); border:1px solid var(--pl-border); border-bottom-left-radius:4px; }
html[data-theme="dark"] .pl-ai-msg.bot { background:rgba(30,41,59,.56); }
.pl-ai-time { display:block; margin-top:3px; font-size:.54rem; opacity:.58; direction:ltr; text-align:left; }
.pl-ai-copy { margin-top:5px; border:1px solid var(--border-color, rgba(148,163,184,.22)); border-radius:999px; background:transparent; color:inherit; padding:2px 9px; cursor:pointer; font:inherit; font-size:.62rem; }
.pl-ai-limit { display:none; padding:7px 12px; border-top:1px solid var(--border-color, rgba(148,163,184,.2)); color:var(--text-secondary, var(--pl-muted)); font-size:.66rem; text-align:center; }
.pl-ai-limit.is-visible { display:block; }
.pl-ai-limit a { color:var(--pl-orange); }
.pl-ai-input { display:flex; gap:7px; padding:9px; border-top:1px solid var(--border-color, rgba(148,163,184,.2)); background:rgba(255,255,255,.35); flex:none; }
html[data-theme="dark"] .pl-ai-input { background:rgba(15,23,42,.48); }
.pl-ai-input input { flex:1; min-width:0; height:42px; padding:0 13px; border-radius:999px; border:1px solid var(--border-color, rgba(148,163,184,.22)); background:rgba(255,255,255,.46); color:var(--text-primary, var(--pl-text)); outline:none; font:inherit; font-size:.78rem; }
html[data-theme="dark"] .pl-ai-input input { background:rgba(30,41,59,.56); }
.pl-ai-input button { flex:none; min-width:72px; height:42px; padding:0 13px; color:#fff; cursor:pointer; }
.pl-ai-input button:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* Disable legacy per-page character; the shared component below is the single source of truth. */
.background-character { display:none !important; }

/* Character shared component */
.pl-character { position:fixed; z-index:0; left:max(-34px, env(safe-area-inset-left)); bottom:8px; width:clamp(230px, 25vw, 390px); height:clamp(230px, 25vw, 390px); pointer-events:none; opacity:.34; filter:none; }
.pl-character img { width:100%; height:100%; object-fit:contain; object-position:bottom left; }
html[data-theme="dark"] .pl-character { opacity:.38; filter:none; }

/* Ensure common controls are visible in both themes */
input, textarea, select { color-scheme: inherit; }

@media (max-width: 768px) {
  .pl-global-controls { top:max(10px, env(safe-area-inset-top)); right:max(10px, env(safe-area-inset-right)); }
  .pl-global-controls button { width:40px; height:40px; }
  .pl-sidebar { width:min(320px, 90vw); }
  .pl-ai-widget { right:14px; bottom:14px; }
  .pl-ai-box { width:calc(100vw - 28px); height:min(520px, calc(100dvh - 100px)); border-radius:22px; }
  .pl-ai-fab { width:54px; height:54px; }
  .pl-character { width:clamp(200px, 55vw, 300px); height:clamp(200px, 55vw, 300px); left:-42px; bottom:6px; opacity:.20; }
  html[data-theme="dark"] .pl-character { opacity:.24; }
}
@media (max-width: 480px) {
  .pl-ai-box { width:calc(100vw - 20px); min-height:300px; height:min(500px, calc(100dvh - 86px)); border-radius:20px; }
  .pl-ai-msg { max-width:92%; font-size:.76rem; }
  .pl-ai-input input { height:40px; }
  .pl-ai-input button { height:40px; min-width:62px; padding:0 10px; }
  .pl-character { width:240px; height:240px; left:-50px; opacity:.17; }
  html[data-theme="dark"] .pl-character { opacity:.21; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Admin panel theme bridge */
.pl-admin-theme { position:fixed; top:14px; left:14px; z-index:2000; width:44px; height:44px; border-radius:50%; cursor:pointer; color:var(--text-primary,#f0ece3); display:grid; place-items:center; }
html[data-theme="light"] body.pl-admin { --bg-primary:#f5f7fb; --bg-secondary:#ffffff; --bg-card:#ffffff; --bg-card-hover:#f8fafc; --bg-input:#f8fafc; --text-primary:#1e293b; --text-secondary:#64748b; --text-muted:#94a3b8; --border-gold:rgba(245,158,11,.22); --border-subtle:rgba(15,23,42,.08); --shadow-card:0 12px 40px rgba(15,23,42,.08); }
html[data-theme="light"] body.pl-admin, html[data-theme="light"] body.pl-admin .sidebar, html[data-theme="light"] body.pl-admin .topbar, html[data-theme="light"] body.pl-admin .card, html[data-theme="light"] body.pl-admin .panel, html[data-theme="light"] body.pl-admin .table-card, html[data-theme="light"] body.pl-admin .modal-content { background:var(--bg-card); color:var(--text-primary); }
html[data-theme="light"] body.pl-admin .sidebar { background:var(--bg-secondary); border-color:var(--border-gold); box-shadow:-8px 0 30px rgba(15,23,42,.08); }
html[data-theme="light"] body.pl-admin input, html[data-theme="light"] body.pl-admin textarea, html[data-theme="light"] body.pl-admin select { background:var(--bg-input) !important; color:var(--text-primary) !important; border-color:var(--border-subtle) !important; }

/* PriceLive WebView performance layer */
@media (hover:none),(pointer:coarse){
  .card:hover,.currency-card:hover,.crypto-card:hover,.banner-ad-wrapper:hover,.price-item:hover,.tab-btn:hover,.nav-item:hover,.sub-nav-item:hover,.refresh-btn:hover,.copy-table-btn:hover{
    transform:none;
    box-shadow:inherit;
  }
  .card:hover::before,.currency-card:hover::after,.crypto-card:hover::after,.tab-btn:hover::after,.nav-item:hover::after,.sub-nav-item:hover::after,.refresh-btn:hover::after,.copy-table-btn:hover::after{
    opacity:0;
    transform:none;
  }
  .banner-ad-wrapper img,.refresh-btn:hover i,.theme-toggle:hover,.sidebar-toggle:hover{
    transform:none!important;
  }
}
.card,.currency-card,.crypto-card,.banner-ad-wrapper{
  contain:layout paint;
}
@media (max-width:768px){
  .card,.tabs,.banner-ad-wrapper,.modal-content,footer,.ai-chat-box{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}