/* Charactry Web — layers on top of the app's own CSS.
   Adds the phone/tablet layout and the in-page plugin window. */

/* ── Plugin window (replaces the desktop pop-up BrowserWindow) ───────── */
#web-plugin-host{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s ease}
.wph-win{width:min(var(--wph-w,900px),100%);height:min(var(--wph-h,650px),100%);background:var(--bg);
  border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.6)}
.wph-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 6px 16px;
  background:var(--sidebar-bg);border-bottom:1px solid var(--border);flex-shrink:0}
.wph-title{font-family:Cinzel,serif;font-size:13px;letter-spacing:.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wph-close{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--bg3);color:var(--text2);
  cursor:pointer;font-size:14px;flex-shrink:0}
.wph-close:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.wph-frame{flex:1;width:100%;border:0;background:var(--bg)}
body.web-plugin-open{overflow:hidden}

/* ── Mobile navigation ──────────────────────────────────────────────── */
#web-menu-btn{display:none;align-items:center;justify-content:center;width:38px;height:38px;margin-left:-8px;
  background:none;border:none;color:var(--text);cursor:pointer;border-radius:8px;-webkit-tap-highlight-color:transparent}
#web-menu-btn:active{background:var(--bg3)}
#web-nav-backdrop{display:none}

@media (max-width:900px){
  html,body{height:100%}
  body{height:100vh;height:100dvh}
  #topbar{padding:0 12px 0 14px;gap:8px}
  #topbar-left{min-width:0}
  #web-menu-btn{display:inline-flex}
  #app-slogan{display:none}
  #app-name{font-size:14px;white-space:nowrap}
  #topbar-right{min-width:0;gap:6px}
  #donate-btn{padding:5px 9px;font-size:11px}
  #uni-selector-wrap{min-width:0!important;max-width:140px}

  #sidebar{position:fixed;top:44px;bottom:0;left:0;z-index:9500;width:min(84vw,300px);
    transform:translateX(-102%);transition:transform .22s ease;
    padding-bottom:calc(64px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
  body.web-nav-open #sidebar{transform:none;box-shadow:14px 0 44px rgba(0,0,0,.55)}
  #web-nav-backdrop{position:fixed;inset:44px 0 0 0;background:rgba(0,0,0,.55);z-index:9400}
  body.web-nav-open #web-nav-backdrop{display:block}
  .sidebar-btn{padding:11px 10px}

  #page-content{padding:18px 14px calc(24px + env(safe-area-inset-bottom));max-width:none}
  #footer{left:0!important}
  .page-header{margin-bottom:18px}
  .page-title{font-size:20px!important}

  .modal{width:calc(100% - 20px)!important;max-width:none!important;padding:20px 16px!important;max-height:92vh;max-height:92dvh}
  .modal-footer{flex-wrap:wrap}
  #uni-dropdown{left:10px!important;right:10px;transform:none!important;min-width:0!important;max-width:none!important}
  #toast-container{left:12px;right:12px;bottom:12px;align-items:stretch}

  .ai-tab-bar{overflow-x:auto;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .ai-tab{flex-shrink:0;white-space:nowrap}
  .card{max-width:100%}
  table{display:block;overflow-x:auto}
  img,canvas,video{max-width:100%}
  .web-plugin-card{flex-direction:column}
}

@media (max-width:700px){
  #web-plugin-host{padding:0}
  .wph-win{width:100%;height:100%;border-radius:0;border:0}
  .variant-grid{grid-template-columns:1fr}
  .variant-field.span2{grid-column:auto}
  /* inline two-column form grids collapse to one column on phones */
  [style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"],[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important}
  input,select,textarea{font-size:16px!important}          /* stops iOS zooming into fields */
}

/* Touch screens have no hover — show controls that desktop reveals on hover */
@media (hover:none){
  .uni-card-acts{opacity:1!important}
  .uni-tl-del{opacity:.7!important}
}

/* Version badge (top bar) */
#web-version{font-size:10.5px;font-weight:700;letter-spacing:.4px;color:var(--text3);border:1px solid var(--border);
  border-radius:20px;padding:3px 9px;white-space:nowrap;user-select:none;-webkit-app-region:no-drag}
@media (max-width:480px){#web-version{display:none}}