/* Avatar surfaces share a renderer; window layout never depends on its asset. */
:root { --floating-size: 96px; }
[data-avatar-surface] { position: relative; display: block; overflow: hidden; isolation: isolate; }
.avatar-image { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.avatar-fallback { width: 100%; height: 100%; display: grid; place-items: center; background: #e1eee3; color: #32675c; font-size: 14px; }
.avatar-dot-renderer { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle, #def2e8, #cbe2d7); }
.avatar-dot-renderer .dot-avatar { transform: scale(.68); animation: none; }
[data-avatar-surface="header"] .avatar-dot-renderer .dot-avatar { transform: scale(.24); }
[data-avatar-surface="stage"] .avatar-dot-renderer .dot-avatar { transform: scale(1.05); }
[data-avatar-surface="persona"] .avatar-dot-renderer .dot-avatar { transform: scale(.64); }
.floating-mode .floating-avatar { width: var(--floating-size); height: calc(var(--avatar-height, var(--floating-size)) + 30px); border-radius: 50%; filter: drop-shadow(0 8px 16px #274e4935); }
.floating-avatar .avatar-surface { width: var(--floating-size); height: var(--floating-size); border-radius: 50%; border: 3px solid #fffff3; box-shadow: 0 0 0 1px #bacfc0, 0 0 24px #8cb8a32c; pointer-events: none; }
.floating-avatar[data-frame="free"] .avatar-surface { height: var(--avatar-height); border-radius: 0; border: 0; box-shadow: none; overflow: visible; }
.floating-avatar[data-frame="free"] .bubble-aura { display: none; }
.floating-avatar:hover .avatar-surface, .floating-avatar[aria-expanded="true"] .avatar-surface { box-shadow: 0 0 0 2px #77ab99, 0 0 25px #8cb8a350; }
.floating-avatar .bubble-aura { inset: -4px; width: calc(var(--floating-size) + 8px); height: calc(var(--floating-size) + 8px); }
.floating-avatar .bubble-name { bottom: 2px; width: max-content; white-space: nowrap; font-size: 11px; padding: 2px 12px; background: #fffef7eb; border-color: #c9dace; }
.floating-avatar .bubble-name:before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #629b82; margin-right: 5px; vertical-align: 1px; }
.avatar-stage .avatar-surface { width: 216px; height: 216px; border-radius: 50%; border: 3px solid #b9dac660; box-shadow: 0 10px 45px #051a2242; }
.avatar-stage .avatar-surface[data-frame="free"] { height: 260px; border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; }
.avatar-stage [data-avatar-surface="stage"][data-renderer="dot"] { border: 0; background: transparent; box-shadow: none; }
.avatar-stage [data-renderer="dot"] .avatar-dot-renderer { background: transparent; }
.avatar-stage .avatar-surface[data-state="thinking"] { box-shadow: 0 0 0 5px #89c2b326, 0 10px 45px #051a2242; }
.avatar-stage .avatar-surface[data-state="speaking"] { animation: avatar-speaking .85s ease-in-out infinite; }
.popup-portrait { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #c7dbca; flex-shrink: 0; }
.persona-card .mini-portrait { width: 88px; height: 88px; background: none; border-radius: 50%; flex-shrink: 0; }
.floating-persona-view { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 0; }
.floating-persona-view>span { width: 100%; font-size: 12px; }
.floating-persona-view button { font-size: 12px; min-height: 42px; padding: 6px 12px; }
.avatar-settings { margin: 18px 0; padding: 18px; border: 1px solid #d8e3d3; border-radius: 12px; background: #f2f5eb; }
.avatar-settings h2 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.avatar-settings p { margin: 0 0 12px; color: #748671; font-size: 12px; line-height: 1.8; }
.avatar-upload-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#avatar-file-name { display: block; margin-top: 9px; font-size: 11px; color: #82917c; overflow-wrap: anywhere; }
.avatar-size-row { margin-top: 17px; padding-top: 16px; border-top: 1px solid #dce4d5; }
.avatar-size-row label { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #566e5b; }
.avatar-size-row output { color: #84967d; font-size: 11px; }
#floating-size { display: block; width: 100%; min-height: 36px; accent-color: var(--teal); margin: 5px 0 0; }
.avatar-state-preview { margin: 16px 0 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.avatar-state-preview>span { color: #83917b; font-size: 11px; margin-right: 3px; }
.avatar-state-preview button { padding: 4px 12px; min-height: 38px; border: 1px solid #cfddc8; border-radius: 7px; background: transparent; color: #6d806b; font-size: 11px; }
.avatar-state-preview button[aria-pressed="true"] { border-color: #9fb8a2; background: #e5eddd; color: #3f715b; }
.avatar-settings .avatar-preview-note { margin: 8px 0 0; font-size: 10px; color: #8e9b83; }
.avatar-reduced-motion, .avatar-reduced-motion * { animation: none !important; transition: none !important; }
.floating-mode .app-shell { width: 420px; border-radius: 20px; }
.floating-mode .workspace { padding: 0 22px; }
.floating-mode .popup-chrome { padding: 16px 0 14px; }
.floating-mode .popup-window-actions button { width: 38px; min-height: 38px; }
.floating-mode .topbar nav { gap: 23px; }
.floating-mode .nav-button { font-size: 12px; min-height: 54px; }
.floating-mode .page { padding-top: 23px; padding-right: 4px; }
.floating-mode .page-lead { font-size: 13px; line-height: 1.8; margin-bottom: 19px; }
.floating-mode .mode-bar button { font-size: 12px; min-height: 40px; padding: 5px 12px; }
.floating-mode .composer textarea { font-size: 15px; min-height: 145px; }
.floating-mode .composer textarea::placeholder { font-size: 14px; }
.floating-mode .composer-bottom { gap: 10px; flex-wrap: wrap; }
.floating-mode .memory-link { font-size: 11px; min-height: 40px; }
.floating-mode .primary-button, .floating-mode .secondary-button { min-height: 42px; font-size: 12px; padding: 8px 13px; }
.floating-mode .starter-row button { font-size: 11px; min-height: 38px; }
.floating-mode .talk-bottom p { font-size: 11px; }
.floating-mode .talk-bottom b, .floating-mode .talk-bottom .text-button { font-size: 12px; }
.floating-mode .prepared-panel textarea { font-size: 13px; }
.floating-mode .prepared-panel p, .floating-mode .prepared-panel .handoff-hint { font-size: 11px; }
.floating-mode .filter-group button, .floating-mode .memory-text { font-size: 12px; }
.floating-mode .memory-buttons button { min-height: 40px; font-size: 11px; }
.floating-mode .setting-row b { font-size: 12px; }
.floating-mode .source-note { font-size: 11px; }
.preview-toolbar button { min-height: 42px; }
.floating-mode dialog { max-height: calc(var(--visible-height, 100dvh) - 24px); }
@keyframes avatar-speaking { 50% { transform: scale(1.025); } }
@media (max-width: 600px) {
  .preview-toolbar { left: 16px; right: 16px; }
  .preview-toolbar button { min-height: 44px; padding: 5px 9px; }
  .floating-mode .app-shell { width: calc(100vw - 24px); border-radius: 17px; }
  .floating-mode .workspace { padding: 0 16px; }
  .floating-mode .popup-chrome { padding: 12px 0; }
  .floating-mode .popup-window-actions button { width: 44px; min-height: 44px; }
  .floating-mode .nav-button { min-height: 50px; padding: 12px 0; }
  .floating-mode .topbar { height: 51px; }
  .floating-mode .topbar nav { gap: 18px; }
  .floating-mode .page { padding-top: 18px; }
  .floating-mode .page>h1 { font-size: 21px; }
  .floating-mode .page-lead { font-size: 12px; }
  .floating-mode .mode-bar { gap: 5px; flex-wrap: wrap; }
  .floating-mode .mode-bar button { min-height: 44px; font-size: 11px; padding: 4px 9px; }
  .floating-mode .composer textarea { font-size: 16px; min-height: 132px; }
  .floating-mode .composer textarea::placeholder { font-size: 14px; }
  .floating-mode .primary-button, .floating-mode .secondary-button { min-height: 44px; }
  .floating-mode .composer-bottom { justify-content: space-between; }
  .floating-mode .memory-link { font-size: 10px; }
  .floating-mode .starter-row button { min-height: 40px; }
  .floating-mode .persona-card .mini-portrait { width: 72px; height: 72px; }
  .floating-mode .persona-card p { font-size: 11px; }
  .floating-mode .filter-group button { min-height: 42px; font-size: 11px; }
  .floating-mode .memory-buttons button { min-height: 44px; }
  .floating-mode .check-label { min-height: 38px; }
  .floating-mode .floating-persona-view button, .avatar-upload-actions button, .avatar-state-preview button { min-height: 44px; }
  .avatar-settings { padding: 14px; }
  .floating-mode .talk-bottom { margin-top: 18px; }
}
@media (max-width: 350px) {
  .floating-mode .topbar nav { gap: 13px; }
  .floating-mode .nav-button { font-size: 11px; }
  .floating-mode .page>h1 { font-size: 19px; }
  .floating-mode .composer-bottom .primary-button { margin-left: auto; }
  .preview-brand small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-avatar-surface], [data-avatar-surface] * { animation: none !important; transition: none !important; }
}