.secretary-dialog { width:min(1000px,calc(100vw - 32px)); max-height:90dvh; padding:0; border:1px solid #e5c4ed88; border-radius:22px; background:#2e2335; color:#fff3ff; box-shadow:0 24px 80px #10081999; }
.secretary-dialog::backdrop { background:#120b21b8; backdrop-filter:blur(8px); }
.secretary-dialog[open] { display:flex; flex-direction:column; }
.secretary-tabs { flex-shrink:0; display:flex; gap:8px; padding:16px 24px 12px; overflow-x:auto; scrollbar-width:none; }
.secretary-tab { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; padding:4px 14px 4px 4px; border:1px solid #d9b4c84d; border-radius:99px; background:#ffffff0a; color:#e8d6ee; font-size:13px; font-weight:600; cursor:pointer; }
.secretary-tab img { width:30px; height:30px; border-radius:50%; object-fit:cover; object-position:50% 8%; background:#6c5068; }
.secretary-tab:hover { border-color:#d7bbeb; background:#ffffff14; }
.secretary-tab[aria-selected='true'] { border-color:#f5cf80; background:linear-gradient(150deg,#81624588,#3e3048); color:#fff3ff; }
.secretary-used { position:absolute; top:10px; right:10px; padding:3px 8px; border-radius:99px; background:#ffffff1f; color:#f0dff6; font-size:10px; font-style:normal; }
.secretary-intro { flex-shrink:0; margin:0; padding:0 24px 16px; color:#d3bddb; font-size:14px; }
.secretary-styles { display:flex; flex-wrap:wrap; gap:8px; padding:0 24px 16px; flex-shrink:0; }
.secretary-styles button { border:1px solid #d9b4c84d; border-radius:99px; padding:8px 14px; background:#ffffff0a; color:#e8d6ee; cursor:pointer; }
.secretary-styles button[aria-pressed='true'] { background:#f5cf80; color:#342237; border-color:#f5cf80; }
.secretary-apply:disabled { opacity:.5; cursor:default; }
.secretary-tab img[src*="/mascots-v1/"] { object-fit:contain; object-position:center; }
#target-picker .target-avatar .target-portrait[src*="/mascots-v1/"] { inset:0; width:100%; height:100%; transform:none; object-fit:contain; object-position:center; }
.messages .portrait-art img[src*="/mascots-v1/"] { inset:0; width:100%; height:100%; transform:none; object-fit:contain; object-position:center; }
.office-scene .office-character .office-character-image[src*="/mascots-v1/"] { inset:0; width:100%; height:100%; max-width:100%; transform:none; object-fit:contain; object-position:center bottom; }
.conv-avatar img[src*="/mascots-v1/"] { height:100%; object-fit:contain; object-position:center; }
.secretary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; min-height:0; padding:8px 24px 24px; overflow:auto; }
.secretary-choice { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px; border:2px solid #b794c43b; border-radius:16px; background:linear-gradient(160deg,#6c506855,#241b2e); color:#fff3ff; text-align:center; cursor:pointer; }
.secretary-choice:hover { border-color:#d7bbeb; background:#594064; }
.secretary-choice[aria-pressed='true'] { border-color:#f5cf80; background:linear-gradient(150deg,#81624588,#3e3048); box-shadow:0 0 0 2px #f5cf8025; }
.secretary-choice[aria-pressed='true']::before { content:'선택'; position:absolute; top:10px; left:10px; padding:3px 9px; border-radius:99px; background:#f5cf80; color:#342237; font-size:11px; font-weight:700; }
.secretary-choice:focus-visible { outline:3px solid #f5cf80; outline-offset:3px; }
.secretary-choice img { display:block; width:100%; height:216px; object-fit:contain; object-position:center top; filter:drop-shadow(0 8px 12px #160b2255); }
.secretary-choice strong { font-size:16px; }
.secretary-choice span { font-size:11px; color:#d7c3df; line-height:1.5; }
.secretary-dialog .settings-foot { flex-shrink:0; gap:16px; border-top:1px solid #d9b4c836; background:#2e2335; }
.secretary-message { flex:1; margin:0; color:#e3cfeb; font-size:13px; }
.secretary-apply { white-space:nowrap; }
.outfit-dialog { position:fixed; inset:0; margin:auto; width:min(850px,calc(100vw - 32px)); }
.outfit-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.outfit-preview { display:flex; width:100%; height:210px; overflow:hidden; }
.outfit-dialog .outfit-preview img { width:50%; height:100%; object-fit:contain; object-position:center top; }
.outfit-choice:disabled { opacity:.6; cursor:wait; }
.outfit-message { margin:0; font-size:13px; }
/* Portrait variants retain a studio glow; feather their edges into the scene. */
img[src$="/onepiece-codex.png"], img[src$="/corset-claude.png"],
img[src$="/bikini-claude.png"], img[src$="/corset-codex.png"] {
  mask-image:radial-gradient(ellipse 85% 100% at 50% 50%,#000 45%,transparent 88%);
}
@media (max-width:700px) {
  .outfit-dialog .outfit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .outfit-preview { height:150px; }
}
@media (max-width:700px) {
  .secretary-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 24px); border-radius:16px; }
  .secretary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:6px 14px 16px; }
  .secretary-choice { padding:10px 6px; }
  .secretary-choice img { height:190px; }
  .secretary-intro { padding-inline:16px; font-size:13px; }
  .secretary-tabs { padding:12px 14px 10px; gap:6px; }
  .secretary-tab { padding-right:11px; font-size:12px; }
  .secretary-dialog .settings-foot { flex-wrap:wrap; padding:14px; }
}

.secretary-preview { cursor:default; }
.secretary-preview:hover { border-color:#b794c43b; background:linear-gradient(160deg,#6c506855,#241b2e); }
.secretary-styles button:disabled { opacity:.6; cursor:wait; }
#secretary-picker .secretary-styles { padding-top:16px; }
/* 캐릭터 모드 칩: 모드 버튼 옆 ✕ 로 스킨을 목록에서 지운다 */
.secretary-styles .secretary-mode { display:inline-flex; align-items:center; gap:2px; }
.secretary-styles .secretary-mode button[aria-pressed] { border-top-right-radius:6px; border-bottom-right-radius:6px; }
.secretary-styles .secretary-mode-remove { padding:8px 9px; border-top-left-radius:6px; border-bottom-left-radius:6px; font-size:11px; color:#d9b4c8; }
.secretary-styles .secretary-mode-remove:hover { background:#7a2f4a; color:#fff; }
.secretary-styles .secretary-mode-restore { border-style:dashed; color:#f5cf80; }