/* Keep v0.3.23 layout, colors, typography and components. Only the expression picker changes. */
.work-mobile #workPicker {border:0;padding:0;margin:0;background:transparent}
.work-mobile #workPicker > div:first-child {font-size:.85rem;color:var(--muted);margin:0 0 5px}
.work-mobile #panel-face .expression-filters {grid-template-columns:repeat(3,minmax(0,1fr))}
.work-mobile #workPicker .expression-picker-row {margin:5px 0}
.work-mobile #workPicker .work-faces {display:flex}

/* Flow prototype: reuse existing parts, cards and controls. */
#expressionNameRow {display:none!important}
#flowSaveDialog {width:min(420px,calc(100vw - 30px));max-height:85dvh;overflow:auto;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:20px}
#flowSaveDialog::backdrop {background:#0009}
#flowSaveDialog h2 {font-size:1.12rem;margin:0 0 10px}
#flowSaveName {display:block;width:100%;padding:12px;margin-top:8px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:10px;font:inherit}
.flow-dialog-actions {display:flex;gap:8px;margin-top:18px}
.flow-dialog-actions button {flex:1;min-height:44px}
#flowSaveError {color:var(--accent);min-height:1.5em}
#flowEditHint {margin:5px 0 10px}

/* Latest reviewed changes: preserve the current theme and component shapes. */
html,body {max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
main,#workspace,.workspace .panels,.tab-panel,#panel-face,.expression-edit-area,.expression-chooser,#workPicker {min-width:0;max-width:100%;box-sizing:border-box}
#workspace {overflow-x:hidden}
.workspace .panels {overflow-x:hidden;overscroll-behavior-x:none}
#panel-face {overflow-x:clip}
#workPicker .expression-picker-row {width:100%;margin:0 0 7px!important}
#workPicker .expression-filters {width:100%;margin:0!important}
#workPicker .work-faces,#morphList {width:100%;max-width:100%;overscroll-behavior-x:contain}
#panel-face .expression-feedback {max-height:none!important;min-height:54px!important;align-items:center;gap:6px;flex-wrap:wrap!important}
#panel-face #expressionSelected {font-size:15px;line-height:1.4;white-space:normal;max-width:none;flex:1 1 190px;overflow-wrap:anywhere}
#panel-face #expressionDirty {font-size:11px!important}
#panel-face #expressionQuickActions,#panel-face .expression-recovery,#panel-face .expression-compare-row {display:none!important}
#resetExpressionStart {width:100%;margin:4px 0 7px;min-height:44px}
.work-mobile #panel-face.expression-compact #morphList {max-height:none;overflow-y:hidden;align-items:stretch}
.work-mobile #panel-face.expression-compact #morphList .morph-row {padding:6px 10px;margin:4px 0;min-height:112px}
#panel-face #morphList .morph-heading {display:flex;align-items:center;gap:8px;min-height:24px!important}
#panel-face #morphList .morph-heading label {flex:1;font-size:13px}
#panel-face #morphList .morph-heading output {font-size:11px;white-space:nowrap}
#panel-face #morphList .morph-row input[type=range] {height:36px;min-height:36px;background:linear-gradient(var(--accent),var(--accent)) var(--original-position,50%) center / 2px 12px no-repeat}
.part-scale {display:flex;justify-content:space-between;font-size:10px;color:var(--muted);line-height:1.2}
.work-mobile #panel-face #morphList .morph-row:after {content:'← スワイプで他のパーツへ →';font-size:10px;line-height:1.4;margin-top:5px}
.work-mobile .work-face-card {scroll-snap-align:center}

/* Keep every fixed-width control inside its panel, including when text is enlarged. */
#workspace {min-width:0;max-width:100%;box-sizing:border-box}
#workspace .panels {width:100%;min-width:0;box-sizing:border-box}
#panel-face,#workPicker,#workPicker .expression-picker-row,#workPicker .expression-filters,#workPicker .work-faces,#panel-face .expression-edit-area {width:100%;min-width:0;max-width:100%;box-sizing:border-box}
#workPicker .expression-filters {display:grid;grid-template-columns:repeat(3,minmax(0,1fr))!important}
#workPicker .expression-filters > button {width:100%;min-width:0;max-width:100%;box-sizing:border-box}
#panel-face #newExpression {width:100%;max-width:100%;min-width:0;box-sizing:border-box;white-space:normal}
#panel-face > .expression-feedback {position:static!important;width:100%!important;min-width:0!important;max-width:100%!important;display:flex!important;flex-wrap:wrap!important;gap:6px!important;padding:10px!important;margin:8px 0 12px!important;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--accent) 6%,var(--panel));box-sizing:border-box}
#panel-face > .expression-feedback #expressionSelected {display:block!important;flex:1 1 170px;min-width:0;max-width:100%;font-size:14px!important;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
#panel-face > .expression-feedback #expressionDirty:not([hidden]) {display:inline-block!important;flex:0 0 auto;max-width:100%}
#panel-face > .expression-feedback #faceCompare {position:static!important;flex:0 0 auto;margin-left:auto;max-width:100%;min-width:44px}
#panel-face .expression-parts {width:100%;min-width:0;box-sizing:border-box}

/* Original-expression actions share one row beneath the part selector. */
#panel-face .expression-origin-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;min-width:0;margin:4px 0 7px}
#panel-face .expression-origin-actions > button {position:static!important;display:flex;align-items:center;justify-content:center;gap:5px;width:100%!important;min-width:0!important;max-width:100%;min-height:48px;height:auto!important;margin:0!important;padding:9px 6px;box-sizing:border-box;white-space:normal;font-size:12px;line-height:1.4}
#panel-face .expression-origin-actions > button[hidden] {display:none!important}
#panel-face .expression-origin-actions .work-icon {flex-shrink:0;width:19px;height:19px}
#panel-face .expression-origin-actions > button span {min-width:0;overflow-wrap:anywhere}
#panel-face > .expression-feedback {min-height:46px!important}

/* Reviewed grouping and explicit destructive action. */
#panel-face .expression-origin-actions {grid-template-columns:1fr 1fr .65fr;gap:6px}
#panel-face .expression-origin-actions > button {font-size:11px;gap:4px;padding:9px 5px}
#panel-face .expression-origin-actions svg,.delete-dialog-actions svg {width:19px;height:19px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
button.delete-danger {background:#ae303e!important;border:1px solid #e76d78!important;color:#fff!important}
button.delete-danger:disabled {background:var(--panel)!important;border-color:var(--line)!important;color:var(--muted)!important;opacity:.55!important;cursor:default}
#panel-face #workPicker.expression-control-group {border:1px solid var(--line);border-radius:14px;padding:10px;margin:0 0 12px}
#panel-face #expressionEditArea.expression-control-group {border:1px solid var(--line);border-radius:14px;padding:10px;margin:0 0 12px}
#panel-face > .expression-feedback #expressionSelected {color:var(--text)!important}
#panel-face #morphList > .note {white-space:pre-line}
#expressionSavebar #saveAsExpression,#workRegister[hidden],#panel-face details[hidden] {display:none!important}
#expressionSavebar #registerFace {grid-column:1 / -1;flex:1;width:100%}
#expressionSavebar #registerFace:disabled {background:var(--panel)!important;border-color:var(--line)!important;color:var(--muted)!important;box-shadow:none!important;opacity:.62!important;cursor:default}
.expression-dialog {width:min(420px,calc(100vw - 32px));box-sizing:border-box;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);padding:18px}
.expression-dialog::backdrop {background:#0009}
.expression-dialog h2 {font-size:18px;margin:0 0 16px}
.expression-dialog p {line-height:1.7;margin:0 0 20px}
.expression-dialog button {min-height:46px;font:inherit;white-space:normal}
.save-choice-options {display:grid;gap:10px;margin-bottom:14px}
#saveChoiceDialog > button {width:100%}
.delete-dialog-actions {display:flex;gap:10px}
.delete-dialog-actions button {flex:1;display:flex;align-items:center;justify-content:center;gap:7px}

.part-added-badge {display:inline-block;margin-left:7px;padding:2px 6px;border:1px solid var(--accent);border-radius:5px;font-size:10px;font-weight:600;color:var(--text);background:color-mix(in srgb,var(--accent) 20%,var(--panel))}
.part-added-badge[hidden] {display:none!important}

/* Parts are a vertical list: every included part remains visible together. */
.work-mobile #panel-face.expression-compact #morphList {display:flex!important;flex-direction:column;gap:8px;max-height:none!important;overflow:visible!important;scroll-snap-type:none;overscroll-behavior:auto}
.work-mobile #panel-face.expression-compact #morphList .morph-row {flex:none!important;width:100%;max-width:100%;min-width:0;min-height:0!important;box-sizing:border-box;margin:0!important;padding:8px 10px!important;scroll-snap-align:none}
.work-mobile #panel-face #morphList .morph-row:after {display:none!important;content:none!important}
#panel-face #morphList .morph-heading {min-height:34px!important;gap:8px}
#panel-face #morphList .part-detach {min-height:34px;min-width:48px;flex:0 0 auto;font-size:11px;font-weight:650;padding:5px 8px;border:1px solid #c98238;background:#714719;color:#fff7e8;border-radius:8px}
#panel-face #morphList .part-detach:hover {background:#85551d;border-color:#e5a55b}
#panel-face #morphList .part-detach:disabled {background:var(--panel);border-color:var(--line);color:var(--muted);opacity:.55}
body[data-theme="light"] #panel-face #morphList .part-detach:not(:disabled) {background:#fff0d8;border-color:#c77523;color:#713700}
#panel-face #morphList .morph-heading label {min-width:0;overflow-wrap:anywhere}
#panel-face #morphList .morph-row input[type=range] {height:30px;min-height:30px}

#panel-face #morphList .part-move {min-width:30px;min-height:34px;padding:4px;flex:0 0 30px;font-size:16px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--text)}
#panel-face #morphList .morph-heading {gap:5px}
#panel-face #morphList .morph-heading output {min-width:31px;text-align:right}
#panel-face #morphList .part-detach {min-width:42px;padding:4px 6px}

#panel-face #morphList .morph-row {cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y}
#panel-face #morphList .morph-row input,#panel-face #morphList .morph-row button {cursor:auto}
#panel-face #morphList .part-dragging {position:relative;z-index:5;cursor:grabbing;border-color:var(--accent);box-shadow:0 8px 24px #0008;opacity:.94;background:color-mix(in srgb,var(--accent) 13%,var(--panel))!important;transition:none!important}

/* In a phone landscape split, the complete expression controls use the same
   available width as the part editor below them. Only the face cards scroll. */
@media (orientation:landscape) and (max-height:550px) {
  .work-mobile #panel-face .expression-chooser {width:100%!important;max-width:100%!important;padding-right:0!important}
  .work-mobile #panel-face #workPicker,.work-mobile #panel-face #workPicker .expression-picker-row,.work-mobile #panel-face #workPicker .expression-filters {width:100%!important;max-width:100%!important}
  .work-mobile #panel-face #workPicker .work-faces {width:100%!important;max-width:100%!important}
}

/* Direct, context-filtered part selection. */
#panel-face .morph-section-heading {display:none!important}
#panel-face .part-add-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}
#panel-face .part-add-choice {min-width:0;min-height:42px;padding:8px;white-space:normal;overflow-wrap:anywhere;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:9px}
#panel-face .part-add-choice:hover {border-color:var(--accent)}
#panel-face .part-add-options .note {grid-column:1/-1;margin:3px 0;color:var(--muted)}

/* Compact two-axis gaze control, shown only from the Eye tab. */
#panel-face .expression-gaze {padding:10px 12px!important}
#panel-face .gaze-tools {display:grid;grid-template-columns:minmax(90px,1fr) 124px;grid-template-areas:'side pad' 'values pad' 'center pad';gap:7px 12px;align-items:center;margin-top:9px}
#panel-face #expressionGazeSide {grid-area:side;width:100%;min-height:38px}
#panel-face .gaze-pad {grid-area:pad;position:relative;width:124px;aspect-ratio:1;border:1px solid var(--line);border-radius:12px;background:linear-gradient(90deg,transparent calc(50% - 1px),var(--line) 50%,transparent calc(50% + 1px)),linear-gradient(transparent calc(50% - 1px),var(--line) 50%,transparent calc(50% + 1px)),color-mix(in srgb,var(--accent) 5%,var(--panel));touch-action:none;cursor:crosshair}
#panel-face #expressionGazeDot {position:absolute;width:18px;height:18px;border:3px solid var(--panel);border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 70%,var(--text));transform:translate(-50%,-50%);left:50%;top:50%;pointer-events:none}
#panel-face .gaze-values {grid-area:values;display:flex;gap:9px;justify-content:space-between;font-size:11px;color:var(--muted)}
#panel-face #expressionGazeCenter {grid-area:center;min-height:36px}
#panel-face #extendedExpressionTools {margin:10px 0 0;border:1px dashed var(--line);border-radius:12px;padding:10px}
#panel-face #newExpression,
#panel-face #expressionAddPanel > summary,
#panel-face #extendedExpressionTools > summary {font-size:14px!important;font-weight:700;line-height:1.4;color:var(--text)}
#panel-face #extendedExpressionTools > summary {padding:0}
#saveChoiceVrm:disabled {background:var(--panel);border-color:var(--line);color:var(--muted);opacity:.55}
@media (max-width:390px){#panel-face .gaze-tools{grid-template-columns:1fr 112px}#panel-face .gaze-pad{width:112px}}

/* Interactive operation mock: extension packs and PNG layers use the same
   add / adjust / detach vocabulary as ordinary expression parts. */
#panel-face .expression-pack-tools,#panel-face #extendedExpressionTools{margin:10px 0 0;border:1px dashed var(--line);border-radius:12px;padding:10px;background:color-mix(in srgb,var(--panel) 94%,var(--accent))}
#panel-face .expression-pack-tools>summary,
#panel-face #extendedExpressionTools>summary,
#panel-face #expressionAddPanel>summary,
#panel-face #gazeDetails>summary{font-size:14px!important;font-weight:700;line-height:1.4;color:var(--text);padding:0;min-height:24px}
.expression-pack-body{display:grid;gap:8px;margin-top:10px}
.loaded-pack-card{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.loaded-pack-card div{display:grid;gap:3px;min-width:0}.loaded-pack-card small{color:var(--muted);font-size:10px;line-height:1.4}
.loaded-pack-controls{display:flex!important;grid-template-columns:auto auto;align-items:center;justify-items:end;gap:6px!important;flex:0 0 auto}
.loaded-pack-controls .pack-loaded-pill{margin-left:0}
.pack-remove{min-width:52px;min-height:36px!important;padding:5px 9px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:8px;font-size:11px;font-weight:700}
.pack-remove:hover{border-color:#d56370;color:#e17883}
.pack-choose{border-style:dashed}
.pack-loaded-pill{display:inline-flex;align-items:center;flex:none;margin-left:7px;padding:2px 7px;border-radius:999px;border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--panel));color:var(--text);font-size:10px;font-weight:700}
.visual-effect-palette{display:grid;gap:8px;margin-top:10px}
.visual-palette-heading{display:flex;align-items:center;margin:2px 0 0;font-size:12px;color:var(--text)}
.visual-effect-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.visual-expression-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.visual-expression-choice{display:grid;gap:3px;min-height:50px;padding:8px 9px;text-align:left;border:1px solid color-mix(in srgb,var(--accent) 58%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,var(--panel));color:var(--text)}
.visual-expression-choice strong{font-size:12px}.visual-expression-choice small{font-size:9px;color:var(--muted)}
.visual-effect-choice{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;min-height:54px;padding:7px 8px;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text)}
.visual-effect-choice[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.visual-effect-glyph{grid-row:1/3;display:flex;align-items:center;justify-content:center;font-size:17px;white-space:nowrap;color:var(--text)}
.visual-effect-choice>span:nth-child(2){font-size:12px;font-weight:700;overflow-wrap:anywhere}.visual-effect-choice small{font-size:9px;color:var(--muted)}
.visual-pack-callout,.visual-custom-png{width:100%;min-height:42px;padding:8px;border-style:dashed;color:var(--text);font-size:12px;font-weight:650}
.visual-layer-list{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.visual-layer-row{display:flex;flex-direction:column;gap:4px;width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--card);user-select:none;-webkit-user-select:none}
.visual-layer-row .morph-heading{display:flex;align-items:center;gap:6px;min-height:34px}.visual-layer-row .visual-layer-name{flex:1;min-width:0;font-size:13px;overflow-wrap:anywhere}
.visual-layer-row .visual-layer-glyph{display:flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:3px;font-size:13px;white-space:nowrap}
.visual-layer-row output{min-width:34px;text-align:right;font-size:11px;color:var(--text)}
.visual-layer-row>input[type=range]{width:100%;height:30px;min-height:30px}
.visual-layer-link{margin:0;color:var(--muted);font-size:10px;line-height:1.4}
.visual-layer-position{margin-top:2px;border-top:1px solid var(--line);padding-top:4px}.visual-layer-position>summary{font-size:11px;font-weight:650;color:var(--text);min-height:30px;display:flex;align-items:center}
.visual-position-controls{display:grid;grid-template-columns:94px minmax(0,1fr);gap:10px;align-items:center;padding:6px 0 2px}
.visual-position-pad{position:relative;width:92px;aspect-ratio:1;border:1px solid var(--line);border-radius:10px;background:linear-gradient(90deg,transparent calc(50% - 1px),var(--line) 50%,transparent calc(50% + 1px)),linear-gradient(transparent calc(50% - 1px),var(--line) 50%,transparent calc(50% + 1px)),color-mix(in srgb,var(--accent) 5%,var(--panel));touch-action:none;cursor:crosshair}
.visual-position-dot{position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--accent);transform:translate(-50%,-50%);pointer-events:none}
.visual-size-label{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:11px}.visual-size-label input{grid-column:1/-1;width:100%}
.pack-mock-toast{position:fixed;z-index:200;left:50%;bottom:92px;width:max-content;max-width:calc(100vw - 34px);padding:9px 12px;border-radius:10px;background:color-mix(in srgb,var(--bg) 88%,var(--accent));border:1px solid var(--accent);color:var(--text);font-size:12px;line-height:1.4;box-shadow:0 8px 28px #0008;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:.18s ease}
.pack-mock-toast.show{opacity:1;transform:translate(-50%,0)}
.pack-download{display:flex;align-items:center;justify-content:center;min-height:42px;text-decoration:none;box-sizing:border-box}
.brand-en-line{display:flex;align-items:center;gap:7px;min-width:0}
.brand-en,.empty-brand-en{white-space:nowrap}
.plus-brand-badge,.empty-plus-brand-badge{display:none;align-items:center;justify-content:center;width:max-content;border:2px solid transparent;background:linear-gradient(135deg,#422759,#30213f) padding-box,linear-gradient(105deg,#bd7cff 5%,#e9b9ff 48%,#ffe0a0 100%) border-box;color:#fff5ff;box-shadow:inset 0 1px 0 #fff2,0 0 12px color-mix(in srgb,#bf79ff 42%,transparent),0 4px 12px #0005;text-shadow:0 1px 3px #2a1239;border-radius:999px;font-weight:780;letter-spacing:.07em;line-height:1;white-space:nowrap}
.plus-brand-badge{min-width:72px;padding:5px 9px 5px 8px;font-size:11px;box-sizing:border-box}
.plus-brand-badge b,.empty-plus-brand-badge b{font:inherit;letter-spacing:.08em}
.empty-plus-brand-badge{min-width:120px;margin:10px auto 8px;padding:8px 17px 8px 14px;font-size:15px;box-sizing:border-box}
.plus-pack-loaded .plus-brand-badge,.plus-pack-loaded .empty-plus-brand-badge{display:inline-flex}
.plus-pack-loaded .empty-plus-brand-badge{display:flex}
@media(max-width:390px){.plus-brand-badge{min-width:66px;padding:4px 7px;font-size:10px}.brand-en-line{gap:5px}.empty-plus-brand-badge{min-width:112px;font-size:14px;padding:7px 14px 7px 12px}}
@media(max-width:390px){.visual-effect-grid{grid-template-columns:1fr 1fr}.visual-position-controls{grid-template-columns:86px minmax(0,1fr)}.visual-position-pad{width:84px}.visual-layer-row .part-added-badge{font-size:9px;padding:2px 4px}}