/* EmoPoke v0.3.27 β — limited beta interaction and state refinements. */
:root {
  --action-play-bg:#176b4b;
  --action-play-border:#66d5a6;
  --action-play-fg:#fff;
  --action-pause-bg:#40386f;
  --action-pause-border:#a99af0;
  --action-pause-fg:#fff;
  --action-record-bg:#20263a;
  --action-record-border:#df7388;
  --action-record-fg:#fff;
  --action-recording-bg:#a72642;
  --action-recording-border:#ff95a8;
  --action-recording-fg:#fff;
  --action-danger-bg:#7f281f;
  --action-danger-border:#e28673;
  --action-danger-fg:#fff;
  --action-import-bg:#6f54b9;
  --action-import-border:#b9a8f2;
  --action-import-fg:#fff;
  --action-compact-bg:#293149;
  --action-compact-border:#aeb9dc;
  --action-compact-fg:#fff;
  --action-resolved-bg:#155b43;
  --action-resolved-border:#70d4ad;
  --action-resolved-fg:#fff;
}
body[data-theme="light"] {
  --action-play-bg:#176843;
  --action-play-border:#0c5032;
  --action-pause-bg:#55468d;
  --action-pause-border:#35276b;
  --action-record-bg:#fff7fa;
  --action-record-border:#9f2947;
  --action-record-fg:#591225;
  --action-recording-bg:#a31839;
  --action-recording-border:#711027;
  --action-recording-fg:#fff;
  --action-danger-bg:#9a2d24;
  --action-danger-border:#721b15;
  --action-danger-fg:#fff;
  --action-import-bg:#6749ae;
  --action-import-border:#38296d;
  --action-import-fg:#fff;
  --action-compact-bg:#fff;
  --action-compact-border:#59627f;
  --action-compact-fg:#24283b;
  --action-resolved-bg:#e7f8ef;
  --action-resolved-border:#24694e;
  --action-resolved-fg:#123d2e;
}
body[data-theme="starry"] {
  --action-play-bg:#155f47;
  --action-play-border:#76dcb8;
  --action-pause-bg:#34457c;
  --action-pause-border:#a9baff;
  --action-record-bg:#171d36;
  --action-record-border:#ff89a4;
  --action-record-fg:#fff;
  --action-recording-bg:#a41e42;
  --action-recording-border:#ff98b1;
  --action-recording-fg:#fff;
  --action-import-bg:#6046a8;
  --action-import-border:#c1b2ff;
  --action-import-fg:#fff;
  --action-compact-bg:#202943;
  --action-compact-border:#b6c1ef;
  --action-compact-fg:#fff;
  --action-resolved-bg:#174f43;
  --action-resolved-border:#79d9b9;
  --action-resolved-fg:#fff;
}

/* Important states never depend on the selected theme accent alone. */
#play.action-play,
#quickPlayPause.action-play {
  background:var(--action-play-bg)!important;
  border-color:var(--action-play-border)!important;
  color:var(--action-play-fg)!important;
}
#play.action-pause,
#quickPlayPause.action-pause {
  background:var(--action-pause-bg)!important;
  border-color:var(--action-pause-border)!important;
  color:var(--action-pause-fg)!important;
}
#loadVMD,#loadMusic {
  background:var(--action-import-bg)!important;
  border-color:var(--action-import-border)!important;
  color:var(--action-import-fg)!important;
}

/* Limited beta keeps future face tools visible without suggesting they work. */
#panel-face .limited-beta-disabled {
  opacity:.48;
  filter:grayscale(.72);
  pointer-events:none;
  cursor:not-allowed;
}
#panel-face .limited-beta-disabled summary,
#panel-face .limited-beta-disabled button,
#panel-face .limited-beta-disabled label {
  color:var(--muted)!important;
  border-color:var(--line)!important;
  background:color-mix(in srgb,var(--panel) 96%,var(--text))!important;
}

/* Expression edits and pending VRM export are separate save states. */
#expressionSavebar #registerFace:not(:disabled),
#expressionSavebar #exportVRM:not(:disabled),
#saveChoiceVrm:not(:disabled) {
  background:var(--action-import-bg)!important;
  border-color:var(--action-import-border)!important;
  color:var(--action-import-fg)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--action-import-border) 23%,transparent);
}
#expressionSavebar #registerFace:disabled,
#saveChoiceVrm:disabled { opacity:.42;box-shadow:none; }
#expressionSavebar #exportVRM {
  grid-column:1 / -1;
  width:100%;
}
#expressionSavebar #exportVRM:disabled { display:none; }

/* Recording lives in the upper-left of the model preview. */
.stage-top { align-items:flex-start; }
.stage-top .record-stage-button {
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:auto;
  min-height:38px;
  padding:7px 11px;
  border:1px solid var(--action-record-border);
  border-radius:11px;
  background:var(--action-record-bg);
  color:var(--action-record-fg);
  font-size:12px;
  font-weight:760;
  line-height:1;
  box-shadow:0 5px 18px #0006;
  backdrop-filter:blur(9px);
}
.stage-top .record-stage-button span {
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font:inherit;
}
.record-stage-button .record-stage-icon { color:#ff5573; }
.record-stage-button #recordTimer { min-width:37px;font-variant-numeric:tabular-nums; }
.stage-top .record-stage-button.is-recording {
  background:var(--action-recording-bg);
  border-color:var(--action-recording-border);
  color:var(--action-recording-fg);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--action-recording-border) 24%,transparent),0 6px 20px #0007;
}
.record-stage-button.is-recording .record-stage-icon { color:inherit; }
body.broadcast-mode.recording .stage-top {
  display:flex!important;
  justify-content:flex-start!important;
  padding:max(12px,env(safe-area-inset-top)) 14px 0;
}
body.work-mobile.stage-fullscreen.broadcast-mode.recording #stage .stage-top,
body.work-mobile.recording #stage:fullscreen .stage-top { display:flex!important; }

/* Common control sizes and typography across the three main tabs. */
#panel-model button,#panel-face button,#panel-dance button {
  min-height:44px;
  border-radius:12px;
  line-height:1.35;
}
#panel-model .section-heading h2,#panel-face .face-unified-heading,#panel-dance .section-heading h2 {
  font-size:1.12rem;
  font-weight:720;
  line-height:1.4;
}
#loadVRM,#loadVMD,#loadMusic { font-size:.92rem;font-weight:720;white-space:normal; }

/* Per-part reset replaces the passive original-value text. */
#panel-face .part-scale { align-items:center;gap:8px; }
#panel-face .part-reset-value {
  min-height:30px;
  padding:4px 10px;
  border:1px solid color-mix(in srgb,var(--accent) 58%,var(--line));
  border-radius:8px;
  background:color-mix(in srgb,var(--accent) 10%,var(--panel));
  color:var(--text);
  font-size:10px;
  font-weight:680;
  line-height:1.25;
}
#panel-face .part-reset-value:disabled {
  border-color:var(--line);
  background:var(--panel);
  color:var(--muted);
  opacity:.46;
}

/* Loaded VMD card and compact actions. Destructive color is reserved for confirmation. */
#panel-dance .motion-info-heading { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px; }
#panel-dance #motionInfo #motionName { display:block;overflow-wrap:anywhere;line-height:1.55; }
#panel-dance .dance-compact-action {
  flex:0 0 auto;
  min-height:36px;
  padding:6px 10px;
  border:1px solid var(--action-compact-border);
  border-radius:9px;
  background:var(--action-compact-bg);
  color:var(--action-compact-fg);
  font-size:11px;
  font-weight:720;
}
#panel-dance .dance-compact-action:disabled { opacity:.42;color:var(--action-compact-fg); }
#danceDeleteDialog #danceDeleteConfirm {
  border-color:var(--action-danger-border);
  background:var(--action-danger-bg);
  color:var(--action-danger-fg);
}

/* Analysis and mapping are one card. */
#panel-dance .vmd-mapping-summary {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 12px;
  align-items:center;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
#panel-dance .vmd-mapping-summary>div { display:grid;gap:3px;min-width:0; }
#panel-dance #vmdMappingCount { margin:0;font-size:11px;overflow-wrap:anywhere; }
#panel-dance #vmdMappingCount.warning { color:#e7a957; }
#panel-dance #vmdMappingToggle { min-height:32px;padding:4px 1px;border:0;background:transparent;color:var(--accent);font-size:11px;text-decoration:underline;text-underline-offset:3px; }
#panel-dance .vmd-missing-item.resolved {
  border-color:var(--action-resolved-border)!important;
  background:var(--action-resolved-bg)!important;
  color:var(--action-resolved-fg)!important;
}
#panel-dance #vmdMappingPanel { margin-top:12px;padding-top:12px;border-top:1px dashed var(--line); }
#panel-dance .vmd-mapping-filters { display:flex;gap:6px;overflow-x:auto;margin-bottom:7px; }
#panel-dance .vmd-mapping-filters button { min-height:38px;padding:6px 11px;font-size:11px;white-space:nowrap; }
#panel-dance .vmd-mapping-filters button.active {
  border-color:var(--accent);
  background:var(--purple);
  color:#fff;
}
#panel-dance #unmappedMorphs .mapping-row { grid-template-columns:minmax(72px,.75fr) minmax(150px,1.35fr); }
#panel-dance #unmappedMorphs .mapping-row[data-mapping-status="changed"] select { border-color:var(--accent); }
#panel-dance #unmappedMorphs .mapping-row[data-mapping-status="unresolved"] select { border-color:#d99b48; }

/* Playback uses action colors; record red is reserved for recording. */
#panel-dance .work-dance-playback .transport { display:grid!important;grid-template-columns:54px minmax(120px,1fr) auto; }
#panel-dance .work-dance-playback .transport #rewind { flex:0 0 54px; }
#panel-dance .work-dance-playback .transport #play { flex:1; }
#panel-dance .time-row { color:var(--muted); }

/* Music timing explains the resulting action directly. */
#panel-dance .music-card { margin:7px 0;padding:11px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel) 97%,var(--accent)); }
#panel-dance .music-card .section-heading { margin:0 0 7px;align-items:center; }
#panel-dance #musicName { margin:6px 1px 8px; }
#panel-dance #musicControls { display:grid;gap:8px; }
#panel-dance .music-sync-control { border:1px solid var(--line);border-radius:12px;padding:9px;background:color-mix(in srgb,var(--panel) 92%,var(--accent)); }
#panel-dance .music-sync-title { display:block;margin:0 0 6px;font-size:13px;font-weight:720; }
#panel-dance .music-sync-directions { display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px; }
#panel-dance #musicSyncSlider { display:block;width:100%;margin:8px 0 6px;accent-color:var(--accent); }
#panel-dance .music-sync-footer { display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap; }
#panel-dance #musicSyncStatus { color:var(--text);font-size:12px;font-weight:700; }
#panel-dance #musicSyncReset { min-height:36px;padding:6px 10px;font-size:11px; }
#panel-dance #musicControls>.slider-label { margin:0;padding:3px 0 0; }
#panel-dance #musicStatus { margin:6px 1px 0; }
.work-mobile #panel-dance .music-sync-control { padding:9px;margin:8px 0; }
.work-mobile #panel-dance .music-sync-title { margin-bottom:6px; }
.work-mobile #panel-dance #musicSyncSlider { margin:8px 0 6px; }

/* Recording settings are part of Camera & Recording settings. */
.settings-reworked [data-settings-key="camera"] #recordingControls {
  margin:8px 0;
  padding:12px;
  border:1px solid var(--line);
  border-radius:13px;
}
.settings-reworked [data-settings-key="camera"] #recordingControls legend { padding:0 5px;color:var(--text);font-weight:720; }
.settings-reworked [data-settings-key="camera"] #recordingControls .two-col { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }

/* Local metadata-only dance history. */
.settings-reworked [data-settings-key="dance"] .dance-history-settings { display:grid;gap:9px; }
.settings-reworked [data-settings-key="dance"] .dance-history-settings>h3 { margin:0;font-size:15px;color:var(--text); }
.settings-reworked [data-settings-key="dance"] .dance-history-settings>.note { margin:0 0 4px; }
.dance-history-list { display:grid;gap:9px; }
.dance-history-card {
  display:grid;gap:6px;padding:11px;border:1px solid var(--line);border-radius:13px;
  background:color-mix(in srgb,var(--panel) 94%,var(--accent));color:var(--text);
}
.dance-history-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:9px; }
.dance-history-heading strong { min-width:0;overflow-wrap:anywhere;font-size:14px; }
.dance-history-heading time { flex:none;color:var(--muted);font-size:10px;white-space:nowrap; }
.dance-history-card p { margin:0;color:var(--muted);font-size:11px;overflow-wrap:anywhere; }
.dance-history-vmds { display:grid;gap:5px;margin:0;padding:0;list-style:none; }
.dance-history-vmd-label { color:var(--text)!important;font-weight:720; }
.dance-history-vmds li { position:relative;display:block;padding-left:12px;font-size:11px;overflow-wrap:anywhere; }
.dance-history-vmds li::before { position:absolute;left:1px;content:"•";color:var(--muted); }
.dance-history-delete {
  justify-self:end;min-height:36px;padding:6px 10px;border:1px solid var(--action-compact-border);
  border-radius:9px;background:var(--action-compact-bg);color:var(--action-compact-fg);font-size:11px;font-weight:700;
}
.dance-history-empty { margin:0;padding:12px;border:1px dashed var(--line);border-radius:12px;text-align:center; }
.expression-gaze-portability-note { padding:8px 10px;border-left:3px solid var(--action-compact-border);background:color-mix(in srgb,var(--panel) 92%,var(--accent)); }

@media(max-width:479px) {
  .stage-top .record-stage-button { min-height:40px;padding:7px 9px;font-size:11px; }
  #panel-dance .motion-info-heading { align-items:flex-start; }
  #panel-dance .motion-info-heading .dance-compact-action { max-width:48%;white-space:normal; }
  #panel-dance .vmd-mapping-summary { grid-template-columns:minmax(0,1fr) auto; }
  #panel-dance #unmappedMorphs .mapping-row { grid-template-columns:minmax(68px,.65fr) minmax(138px,1.35fr);gap:6px; }
  .settings-reworked [data-settings-key="camera"] #recordingControls .two-col { grid-template-columns:1fr; }
}

@media(prefers-reduced-motion:reduce) {
  .record-stage-button { transition:none!important; }
}