/* EmoPoke v0.3.18: three-tab visual organization only.
   NO animation, polling, rendering, physics, or changes to saved settings.
   All declarations are scoped to existing panel UI. */

/* A unified hierarchy, keeping user-selected themes and text sizes. */
#panel-model, #panel-face, #panel-dance { --work-gap: 10px; }
#panel-model > .section-heading, #panel-dance > .section-heading {
  margin: 2px 0 10px;
}
#panel-model > .section-heading h2, #panel-dance > .section-heading h2 {
  font-size: 1.12rem; line-height: 1.4;
}
#panel-model .info-card, #panel-dance .info-card {
  border-radius: 13px; margin: 9px 0; padding: 11px 12px;
}
#panel-model .note, #panel-face .note, #panel-dance .note {
  font-size: .8rem; line-height: 1.45;
}
#panel-model button, #panel-face button, #panel-dance button {
  min-height: 44px;
}
#panel-model summary, #panel-face summary, #panel-dance summary {
  cursor: pointer;
}

/* The two primary load actions look alike. Colors inherit the chosen theme. */
#loadVRM, #loadVMD, #registerFace, #exportVRM {
  background: color-mix(in srgb, var(--purple) 82%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  color: #fff;
  font-weight: 720;
}
#loadVRM:disabled, #loadVMD:disabled, #registerFace:disabled,
#exportVRM:disabled { opacity:.44; }
#loadMusic {
  background: color-mix(in srgb, #287c85 53%, var(--panel));
  border-color: color-mix(in srgb, #53c3cf 46%, var(--line));
  color: #f6ffff; font-weight:650;
}

/* Model: registered expressions first; raw morphs stay available, without
   allowing a long opened list to dominate the entire application. */
#modelExpressionBrowser { margin-top:10px; }
#modelExpressionBrowser > summary {
  color: var(--accent); min-height:44px; align-content:center;
}
#modelExpressionEntries, #modelMorphEntries {
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px;
}
#modelExpressionEntries button, #modelMorphEntries button {
  min-width:0; overflow-wrap:anywhere; text-align:left;
}
#modelMorphEntries {max-height:min(40vh,360px);overflow:auto;overscroll-behavior:contain;}
#panel-model > .note:first-of-type {font-size:.74rem;}

/* Expression: select > fine tune > browser save > export VRM. Keep the same
   original export button, now in its own visible section (details open). */
#panel-face.expression-compact .work-primary-vrm-export {
  margin:12px 0 10px; padding:10px 12px;
  background:color-mix(in srgb, var(--accent) 9%, var(--panel));
  border:1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius:14px;
}
#panel-face.expression-compact .work-primary-vrm-export > summary {
  min-height:44px; font-size:.95rem; font-weight:720; color:var(--accent);
}
#panel-face.expression-compact .work-primary-vrm-export #exportVRM {
  display:block; width:100%; margin:5px 0;
}
#panel-face.expression-compact .work-primary-vrm-export .note {
  margin:4px 0; line-height:1.4;
}
#panel-face.expression-compact .expression-advanced {
  margin:10px 0;
}
#panel-face.expression-compact .expression-advanced > summary {
  color:var(--muted);
}
#panel-face.expression-compact .expression-filters button[aria-pressed="true"],
#panel-face.expression-compact .expression-parts button[aria-pressed="true"] {
  background:var(--purple);color:white;border-color:var(--accent);
}
#panel-face.expression-compact .work-face-card[aria-pressed="true"] {
  border-color:var(--accent); background:color-mix(in srgb,var(--accent) 19%,var(--panel));
}
#expressionSavebar #registerFace {background:var(--purple); color:#fff;}
#expressionSavebar #saveAsExpression {border-color:var(--line);}

/* Dance: import > summary > play/seek > optional music > advanced controls. */
#panel-dance .work-dance-playback {
  display:flex; flex-direction:column;gap:8px;
  background:color-mix(in srgb,var(--accent) 5%,var(--panel));
  border:1px solid var(--line); border-radius:15px;
  padding:11px; margin:6px 0;
}
#panel-dance .work-dance-playback .transport {
  margin:0; display:flex;align-items:center;gap:6px;
}
#panel-dance .work-dance-playback .transport #play {
  min-width:0;flex:2;
  background:color-mix(in srgb,#cb415c 76%,var(--panel));
  border-color:color-mix(in srgb,#e77f94 55%,var(--line));
  color:white;font-weight:700;
}
#panel-dance .work-dance-playback .transport #rewind {flex:0 0 auto;}
#panel-dance .work-dance-playback #seek {width:100%;margin:0;}
#panel-dance .work-dance-playback .time-row {margin:0;}
#panel-dance .music-card {margin:8px 0;border-radius:15px;}
#panel-dance .music-card .section-heading {margin:0 0 10px;}
#panel-dance .vmd-analysis {margin:8px 0;padding:11px 12px;}
#panel-dance .vmd-missing-item {
  color:var(--text); background:color-mix(in srgb,var(--accent) 13%,var(--panel));
  border-color:color-mix(in srgb,var(--accent) 35%,var(--line));
}
#panel-dance #vmdGoExpressions {
  border-color:var(--accent); color:var(--accent);font-weight:650;
}
#panel-dance #danceTuning {margin:10px 0;}

/* Mobile: keep the preview visible and use compact touch-safe spacing. */
@media (max-width:759px) and (orientation:portrait) {
 .work-mobile .workspace .panels {padding:8px 13px 12px;}
 .work-mobile #panel-model .model-expression-entries {gap:6px;}
 .work-mobile #panel-face.expression-compact .work-primary-vrm-export {margin:9px 0;}
 .work-mobile #panel-dance .work-dance-playback {padding:9px;gap:7px;}
 .work-mobile #panel-dance .work-dance-playback .transport {gap:4px;}
 .work-mobile #panel-dance .work-dance-playback .transport #rewind {
   min-width:44px;padding:7px;
 }
 .work-mobile #panel-dance .work-dance-playback .transport .loop {
   white-space:nowrap;font-size:.79rem;
 }
}
@media (prefers-reduced-motion:reduce) {
 #panel-model button, #panel-face button, #panel-dance button {transition:none;}
}

@media(max-width:759px) and (orientation:portrait){
 .work-mobile #stage #viewActions:not([hidden])>button {font-size:11px;padding-inline:6px;}
 .work-mobile #stage #viewActions:not([hidden]) #quickPlayPause {font-size:11px;min-width:58px;}
}

/* v0.3.23: match the face tab title with the character and dance tab headings.
   The existing hidden legacy heading and all controls remain untouched. */
#panel-face > .face-unified-heading {
  margin: 2px 0 10px;
  font-size: 1.12rem;
  line-height: 1.4;
}
body:not(.work-mobile) #panel-face > .face-unified-heading { display: none; }