/* Context menu, notes, presentation overlay, phone remote modal, status bar, animation keyframes. */

/* ---------- Context menu ---------- */
#context-menu{position:fixed;z-index:1000;background:var(--panel);border:1px solid var(--line2);
  border-radius:8px;box-shadow:0 8px 30px #0003;padding:5px;min-width:210px}
.ctx-item{display:block;width:100%;text-align:left;background:none;border:none;padding:7px 12px;
  border-radius:5px;cursor:pointer;color:var(--txt);font-size:13px}
.ctx-item:hover:not(:disabled){background:var(--accent-bg)}
.ctx-item:disabled{opacity:.35;cursor:default}
.ctx-sep{height:1px;background:var(--line);margin:4px 6px}

/* ---------- Speaker notes ---------- */
#notes-bar{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;padding:8px 14px;height:130px;
  background:var(--panel);border-top:1px solid var(--line2)}
#notes-bar label{display:flex;align-items:center;gap:5px;color:var(--txt2);font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.4px}
#notes-bar label .ms{font-size:15px}
#notes{flex:1;resize:none;border:1px solid var(--line2);border-radius:6px;padding:8px 10px;
  font-family:inherit;font-size:13px;color:var(--txt);outline:none}
#notes:focus{border-color:var(--accent)}

/* ---------- Presentation overlay ---------- */
#present-overlay{position:fixed;inset:0;z-index:9999;background:#000}
#present-overlay iframe{width:100%;height:100%;border:0;display:block}
#present-close{position:fixed;top:12px;right:14px;z-index:10000;width:36px;height:36px;border:none;
  border-radius:50%;background:#0007;color:#fff;font-size:16px;line-height:1;cursor:pointer;
  opacity:.2;transition:opacity .2s}
#present-close:hover{opacity:1}

/* ---------- Connect-mobile modal ---------- */
.modal-backdrop{position:fixed;inset:0;z-index:3000;background:#0006;display:grid;place-items:center}
.modal{background:var(--panel);border-radius:12px;box-shadow:0 20px 60px #0004;padding:22px 24px;max-width:340px;
  text-align:center;position:relative;max-height:calc(100dvh - 68px);overflow:auto}
.modal h3{margin:0 0 8px;color:var(--accent)}
.modal,.popover{accent-color:var(--accent)}
.modal a:not([class]){color:var(--accent)}
/* Base look of form controls in dialogs and popovers (zero specificity, so each
   dialog's own rules still win): theme colours instead of the browser's grey ones. */
:where(.modal,.popover) :where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]),select,textarea){
  background:var(--ribbon);color:var(--txt);border:1px solid var(--line2);border-radius:6px;font-family:inherit}
:where(.modal,.popover) :where(input,select,textarea):focus{outline:none;border-color:var(--accent)}
:where(.modal) :where(button:not([class])),:where(.modal,.popover) input[type=file]::file-selector-button{
  background:var(--ribbon);color:var(--txt);border:1px solid var(--line2);border-radius:8px;padding:6px 12px;cursor:pointer;font:inherit;font-size:13px}
:where(.modal) :where(button:not([class])):hover:not(:disabled),:where(.modal,.popover) input[type=file]::file-selector-button:hover{background:var(--accent-bg)}
:where(.modal) :where(button:not([class])):disabled{opacity:.45;cursor:default}
:where(.modal,.popover) input[type=file]{font-size:12px;color:var(--txt2)}
:where(.modal,.popover) input[type=file]::file-selector-button{margin-inline-end:8px}
.modal .fr-l input[type=color],.modal input[type=color]{width:56px;height:32px;padding:3px;border:1px solid var(--line2);border-radius:6px;background:var(--ribbon);cursor:pointer}
.modal input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.modal input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}
.modal input[type=color]::-moz-color-swatch{border:none;border-radius:4px}
.modal fieldset{min-width:0}
.modal .host-help{color:var(--txt2);font-size:12px;margin:0 0 14px}
.modal .host-url{color:var(--txt)}
.modal .host-code{font-size:38px;font-weight:800;letter-spacing:10px;color:var(--txt);margin:6px 0 14px}
.modal .host-qr{display:block;margin:0 auto 12px;border-radius:8px}
.modal .host-status{font-size:13px;color:var(--txt2)}
.modal .host-status.on{color:var(--go);font-weight:600}
.modal .host-link{display:inline-block;margin-top:10px;color:var(--accent);font-size:13px;text-decoration:none}
.modal .host-link:hover{text-decoration:underline}
.modal-close{position:absolute;top:8px;right:10px;background:none;border:none;font-size:18px;cursor:pointer;color:var(--txt2)}
.modal .sc-table{width:100%;border-collapse:collapse;font-size:13px}
.modal .sc-table td{padding:4px 6px;vertical-align:top}
.modal .sc-table td:last-child{color:var(--txt2)}
.modal kbd{background:var(--ribbon);border:1px solid var(--line2);border-radius:5px;padding:1px 6px;font-family:inherit;font-size:12px;white-space:nowrap}
.modal .mt-field{width:100%;font-size:28px;padding:10px;border:1px solid var(--line2);border-radius:8px;margin-bottom:12px;background:var(--panel)}
.modal .mt-preview{min-height:52px;display:flex;align-items:center;justify-content:center;background:#0b0e14;
  color:#fff;border-radius:8px;padding:10px;margin-bottom:10px;overflow:auto}
.modal .mt-sec{font-size:11px;text-transform:uppercase;color:var(--txt2);margin:8px 0 4px;letter-spacing:.4px}
.modal .mt-grid{display:grid;grid-template-columns:repeat(11,1fr);gap:3px}
.modal .mt-btn{border:1px solid var(--line2);background:var(--panel);border-radius:6px;cursor:pointer;font-size:15px;padding:6px 0;line-height:1;color:var(--txt)}
.modal .mt-btn:hover{background:var(--accent-bg);border-color:#b9cbe0}
.modal .an-row{border:1px solid var(--line2);border-radius:8px;padding:8px 10px;margin-bottom:8px}
.modal .an-title{font-weight:600;margin-bottom:6px;color:var(--txt)}
.modal .an-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.modal .an-grid label{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--txt2)}
.modal .an-grid select,.modal .an-grid input{border:1px solid var(--line2);border-radius:6px;padding:5px;font-family:inherit;font-size:13px;color:var(--txt)}
.modal .an-actions{display:flex;gap:6px;margin-top:6px;justify-content:flex-end}
.modal .an-actions button{border:1px solid var(--line2);background:var(--panel);border-radius:6px;cursor:pointer;padding:4px 10px;color:var(--txt)}
.modal .an-actions button:hover:not(:disabled){background:var(--accent-bg)}
.modal .an-actions button:disabled{opacity:.4;cursor:default}
.modal .sp-list{display:flex;flex-direction:column;gap:3px}
.modal .sp-item{text-align:left;background:none;border:1px solid var(--line2);border-radius:6px;cursor:pointer;
  padding:8px 10px;font-family:inherit;font-size:13px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal .sp-item:hover{background:var(--accent-bg)}
.modal .sp-item.on{border-color:var(--accent);background:var(--accent-bg)}
.modal .dlg-msg{margin:0 0 12px;font-size:14px;color:var(--txt)}
.modal .dlg-in{width:100%;border:1px solid var(--line2);border-radius:6px;padding:8px;font-family:inherit;font-size:14px;margin-bottom:12px}
.mini2{background:var(--ribbon);border:1px solid var(--line2);border-radius:8px;padding:9px 14px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--txt)}
.mini2:hover:not(:disabled){background:var(--panel)}
.mini2:disabled{opacity:.45;cursor:default}
.popover .host-help{color:var(--txt2);font-size:12px;margin:0 0 6px}
.modal .fr-l{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--txt2);margin-bottom:10px}
.modal .fr-l input,.modal .fr-l select,.modal .fr-l textarea{border:1px solid var(--line2);border-radius:6px;padding:8px;font-family:inherit;font-size:14px;color:var(--txt)}
.modal .fr-chk{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--txt2);margin-bottom:12px}
.modal .fr-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal .fr-count{font-size:12px;color:var(--txt2)}
.modal .fr-do{background:var(--accent);color:var(--on-accent);border:none;border-radius:8px;padding:9px 14px;cursor:pointer;font-size:13px}

/* ---------- Status bar ---------- */
#statusbar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:4px 14px;
  background:var(--panel);border-top:1px solid var(--line2);color:var(--txt2);font-size:12px}
.zoom{display:flex;align-items:center;gap:2px}
.zoom button{background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;color:var(--txt2);
  display:grid;place-items:center;padding:2px 6px;font-size:12px;min-width:30px}
.zoom button:hover{background:var(--ribbon);border-color:var(--line2);color:var(--txt)}
.zoom .ms{font-size:16px}
#zoom-label{font-variant-numeric:tabular-nums;min-width:44px}
#nav-toggle,#sorter-toggle{background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;color:var(--txt2);display:grid;place-items:center;padding:2px 6px;}
#nav-toggle{margin-inline-start:-8px}
#nav-toggle:hover,#sorter-toggle:hover{background:var(--ribbon);border-color:var(--line2);color:var(--txt)}
#nav-toggle .ms,#sorter-toggle .ms{font-size:18px}
#nav-toggle.on,#sorter-toggle.on{color:var(--accent)}
[hidden]{display:none!important}

/* ---------- Animation preview keyframes (editor & custom export effects) ---------- */
@keyframes rvIn{from{opacity:0}to{opacity:1}}
@keyframes rvTurn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes rvUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes rvDown{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}
@keyframes rvLeft{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes rvRight{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes rvZoom{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes rvGrow{from{transform:none}to{transform:scale(1.3)}}
@keyframes rvShrink{from{transform:none}to{transform:scale(.7)}}
/* Emphasis that hides nothing (see EMPHASIS_FX). */
@keyframes rvPulse{0%,100%{transform:none}30%{transform:scale(1.15)}60%{transform:scale(.97)}}
@keyframes rvTeeter{0%,100%{transform:none}20%{transform:rotate(7deg)}40%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}80%{transform:rotate(-2deg)}}
@keyframes rvJump{0%,55%,85%,100%{transform:none}30%{transform:translateY(-40px)}70%{transform:translateY(-12px)}}
@keyframes rvGlow{0%,100%{filter:none}50%{filter:brightness(1.45) saturate(1.8) drop-shadow(0 0 14px rgba(255,214,90,.9))}}
@keyframes rvSpin{from{opacity:0;transform:rotate(-200deg) scale(.6)}to{opacity:1;transform:rotate(0) scale(1)}}
@keyframes rvFlip{from{opacity:0;transform:perspective(600px) rotateY(90deg)}to{opacity:1;transform:perspective(600px) rotateY(0)}}
@keyframes rvBounce{0%{opacity:0;transform:translateY(-60px)}60%{opacity:1;transform:translateY(12px)}80%{transform:translateY(-6px)}100%{transform:translateY(0)}}
@keyframes rvOut{from{opacity:1}to{opacity:0}}
@keyframes rvHi{0%,100%{background:transparent}50%{background:#ff3b3b66}}
#statusbar .legal-link{font-size:11px;color:var(--txt2);text-decoration:none;margin-inline-end:10px}#statusbar .legal-link:hover{text-decoration:underline}
@media (max-width:760px){#statusbar .legal-link{display:none}}
.save-state{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--txt2);margin-inline-start:8px;white-space:nowrap}.save-state .ms{font-size:16px;color:#2f9e44}
@media (max-width:860px){.save-state span{display:none}}

/* Quick presenting buttons in the title bar */
.tb-play{display:flex;gap:2px;margin-inline-start:10px}
.tb-play button{width:30px;height:28px;border:1px solid var(--line2);border-radius:7px;background:var(--panel);color:var(--accent);cursor:pointer;display:grid;place-items:center}
.tb-play button:first-child{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.tb-play button:hover{filter:brightness(1.08)}.tb-play .ms{font-size:20px}
#zoom-slider{width:110px;vertical-align:middle;accent-color:var(--accent)}
@media (max-width:600px){#zoom-slider,.tb-play{display:none}}