html {
    width:100%; height:100%; height: -webkit-fill-available; font-size: 14px;
  }

  /* Color themes */
  :root, .theme-dark {
    --colorBody: #00AEB3;
    --colorBackground: #2A313E;
    --colorPanel: rgba(30,37,48,0.98);
    --colorBorderPassive: rgba(0,174,179,0.5);
    --colorBorderActive: #00AEB3;
    --colorUserText: #00AEB3;
    --colorSystemText: #cc77ff;
    --colorToolbarPassive: rgba(0,174,179,0.5);
    --colorToolbarPassive2: rgba(0,174,179,0.25);
    --colorToolbarActive: #00AEB3;
    --widthLabel: 5rem;
    --colorGlow: #00AEB3;
    --primary-color-rgb: 0, 174, 179;
    --secondary-color-rgb: 42, 49, 62;
  }
  .theme-light {
    --colorBody: #505050;
    --colorBackground: #E1E5E6;
    --colorPanel: rgba(225,229,230,0.98);
    --colorBorderPassive: #d0d0d0;
    --colorBorderActive: #d0d0d0;
    --colorUserText: #404444;
    --colorSystemText: #007F82;
    --colorToolbarPassive: rgba(80,80,80,0.75);
    --colorToolbarPassive2: rgba(80,80,80,0.5);
    --colorToolbarActive: #606666;
    --widthLabel: 5rem;
    --primary-color-rgb: 0, 174, 179;
    --secondary-color-rgb: 225, 229, 230;
  }

  body {
    width: 100%; height: 100%; min-height: 100vh;
    min-height: -webkit-fill-available; margin: 0; padding: 0;
    background-color: var(--colorBackground); color: var(--colorBody);
    overflow: hidden; text-align: left; touch-action: manipulation;
    font-family: "SansRegular", sans-serif; font-size: 1.4rem;
    line-height: 1.4rem; scrollbar-color: var(--colorToolbarPassive) transparent;
    scrollbar-width: 20px; scrollbar-height: 20px;
  }

  ::-webkit-scrollbar { width: 20px; height: 20px; }
  ::-webkit-scrollbar-track {
    background: linear-gradient(
      to right, transparent,
      transparent 9px,
      var(--colorToolbarPassive) 9px,
      var(--colorToolbarPassive) 11px,
      transparent 11px
    );
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--colorPanel); border-radius: 10px;
    border: 2px solid var(--colorToolbarPassive);
  }

  input[type="range"] {
    position: relative; width: 180px; height: 0.8rem; line-height: 2rem;
    -webkit-appearance: none; appearance: none; margin-top: 0.6rem;
    cursor: pointer; pointer-events: auto;
    background: repeating-linear-gradient(
      to right, var(--colorToolbarPassive),
      var(--colorToolbarPassive) 2px,
      transparent 2px,
      transparent 44.5px
    );
  }
  input[type="range"]::-webkit-slider-runnable-track {
    background: var(--colorToolbarPassive); height: 2px;
  }
  input[type="range"]::-moz-range-track {
    background: var(--colorToolbarPassive); height: 2px;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    background: var(--colorToolbarActive);
    margin-top: -0.6rem; height: 1.4rem; width: 0.8rem; border-radius: 0.1rem;
  }
  input[type="range"]::-moz-range-thumb {
    border: none; background-color: var(--colorToolbarActive); height: 1.2rem;
    width: 0.8rem; border-radius: 0.1rem;
  }
  input[type="range"]:focus { outline: none; }
  input[type="range"]:focus::-webkit-slider-thumb { outline: none; }
  input[type="range"]:focus::-moz-range-thumb { outline: none; }

  input[type="text"] {
    flex: 1; background-color: transparent; color: var(--colorUserText);
    border: 0; outline: none; line-height: 2rem; font-family: "SansRegular";
    font-size: 1.4rem; cursor: pointer; pointer-events: auto; margin: 0;
    padding: 0 6px;
  }
  input[type="text"]::placeholder {
    color: var(--colorUserText); opacity: 0.3;
  }
  input[type="color"] { background: none; border: 0; }

  /* Pages */
  .pages {
    position: absolute; top: 18px; left: 30px; right: 30px; bottom: 18px;
    display: flex; flex-direction: column; row-gap: 6px;
  }
  .row { display: flex; row-gap: 0; column-gap: 8px; }
  .column { flex: 1; display: flex; flex-direction: column; row-gap: 2px; }
  .page {
    flex-grow: 1; display: flex; flex-direction: column;
    overflow-y: auto; overflow-x: hidden; min-height: 0; margin: 8px 0 8px 0;
    padding-right: 16px;
  }
  .rowWrap {
    display: flex; row-gap: 2px; column-gap: 8px; flex-wrap: wrap;
  }
  .vspace {
    flex-shrink: 0; height: 1rem;
  }
  .vbar {
    height: 1px; background-color: var(--colorToolbarPassive2);
    flex-shrink: 0; margin: 1rem 0 1rem 0;
  }
  .fill, .filler {
    flex-shrink: 0; flex-grow: 1; flex-basis: 0; min-width: 0;
  }
  .filler { visibility: hidden; pointer-events: none; }
  .command, .text {
    display: inline-flex; height: calc( 2rem + 2px); font-size: 1.4rem;
    line-height: calc( 2rem + 2px); padding: 0 6px; gap: 12px;
    vertical-align: middle; text-align: left; font-family: "SansRegularCondensed";
    color: var(--colorToolbarPassive); white-space: nowrap; overflow: hidden;
  }
  .command, .text {
    font-family: "SansRegularCondensed"; color: var(--colorToolbarPassive);
  }
  .command { cursor: pointer; pointer-events: auto; }
  .command > svg, .text > svg {
    height: 2rem; width: 2rem; padding: 1px 0;
    min-height: 2rem; min-width: 2rem;
  }
  .label {
    width: var(--widthLabel); flex-shrink: 0; color: var(--colorToolbarPassive2);
  }
  .border {
    position: absolute; top: 0; left: 0; bottom: 0; right: 0;
    background: transparent; border-width: 3px; border-style: solid;
    border-color: var(--colorBorderActive); pointer-events: none;
    border-radius: inherit;
  }
  .glow { box-shadow: 0 0 25px 5px var(--colorGlow); }
  .theme-light .glow { box-shadow: none; }

  /* Main */
  #main {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%); background-color: transparent;
  }

  /* Left panel */
  #left {
    position: absolute; margin: 4px; pointer-events: none;
    background-color: var(--colorPanel);
  }
  #avatar, #view {
    position: absolute; opacity: 0; top: 0; left: 0; right: 0;
    bottom: 0; pointer-events: auto; overflow: hidden;
    border-radius: inherit;
  }
  #view {
    background-image: none; background-repeat:no-repeat;
    background-position: center center; background-size: cover;
  }
  #video {
    position: absolute; height: 100%; width: 100%;
    object-position: center center; object-fit: cover;
  }

  /* Loading */
  #loading {
    display: block; position: absolute; top: 6px; left: 6px; width: 300px;
    height: 30px; pointer-events: none; font-size: 1rem;
    background-color: transparent;
  }
  #loading-back, #loading-top {
    display: block; position: absolute; top: 10px; left: 20px; bottom: 10px;
    width: 95px;
  }
  #loading-back {
    background: repeating-linear-gradient(
      to right, var(--colorToolbarPassive2),
      var(--colorToolbarPassive) 5px,
      transparent 5px,
      transparent 10px
    );
  }
  #loading-top {
    clip-path: inset(0 100% 0 0);
    background: repeating-linear-gradient(
      to right, var(--colorBody),
      var(--colorBody) 5px,
      transparent 5px,
      transparent 10px
    );
  }
  #loading-value {
    display: block; position: absolute; top: 0; left: 125px; bottom: 0;
    right: 0; line-height: 30px; text-align: left; font-size: 1.4rem;
    font-family: "SansRegularCondensed";
  }


  /* Right panel */
  #right {
    position: absolute; margin: 4px;
    background-color: var(--colorPanel);
  }
  #right .border { border-color: var(--colorBorderPassive); }
  .session { display: none; width: 100%; }
  .session.selected { display: block; }
  .message {
    position: relative; display: block; width: 100%; min-height: 2rem;
  }
  .message * {
    text-align:left; font-size: 1.4rem; line-height: 2rem;
  }
  .message > * {
    display: block; padding: 0 calc(6rem + 8px) 0 calc(4rem + 4px);
    color: var(--colorSystemText);  z-index: 10;
  }
  .message ul, .message ol { margin: 0 0 0 2rem; }
  .message.user > * { color: var(--colorUserText); }
  .message > .toolbar-left {
    position: absolute; left:0; bottom:0; padding: 0;
    display: flex; row-gap: 0; column-gap: 4px;
  }
  .message > .toolbar-right {
    position: absolute; right: 0; bottom:0; padding: 0;
    display: flex; row-gap: 0; column-gap: 4px;
  }
  code { font-family: monospace; font-size: 1rem; }
  #directory div:first-child div[data-entry-move="up"] { visibility: hidden; }
  #directory div:last-child div[data-entry-move="down"] { visibility: hidden; }
  .apikey, #right textarea {
    flex: 1; min-height: 2rem; margin: auto; background: transparent;
    border: 0; font-family: "SansRegular"; font-size: 1.4rem; padding: 0 6px;
    line-height: 2rem; resize: none; outline: none; color: var(--colorUserText);
    pointer-events: auto;
  }
  .apikey { -webkit-text-security: square; }
  #right textarea[data-item="ai-openai-ai1"], #right textarea[data-item="ai-openai-ai2"],
  #right textarea[data-item="ai-gemini-ai1"], #right textarea[data-item="ai-gemini-ai2"] {
    color: var(--colorSystemText);
  }
  .apikey::placeholder, #right textarea::placeholder { color: inherit; opacity: 0.3; }
  .emoji { cursor: pointer; pointer-events: auto; }
  #morphs .label { width: calc( 2.5 * var(--widthLabel) ); }
  #right-sessions { scrollbar-gutter: stable; }

  /* Bottom panel */
  #bottom {
    position: absolute; margin: 4px; padding: 25px 25px 60px 25px;
    background-color: var(--colorPanel);
  }
  #bottom .border { border-color: var(--colorBorderPassive); }
  #bottom textarea {
    flex: 1; min-height: 2rem; margin: 0; background: transparent;
    border: 0; font-family: "SansRegular"; font-size: 1.4rem;
    line-height: 2rem; resize: none; outline: none; color: var(--colorUserText);
    pointer-events: auto; box-sizing: border-box;
  }
  #bottom textarea::placeholder { color: var(--colorUserText); opacity: 0.3; }
  #flag, #score, #scripttag, #scriptstatus { color: var(--colorToolbarPassive2); }

  [data-image-type^='video/']:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='16' height='16' viewBox='-10 -10 58 58'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M43,42H5c-2.209,0-4-1.791-4-4V10c0-2.209,1.791-4,4-4h38c2.209,0,4,1.791,4,4v28 C47,40.209,45.209,42,43,42z M12,8H5c-1.104,0-2,0.896-2,2v2h9V8z M23,8h-9v4h9V8z M34,8h-9v4h9V8z M45,10c0-1.104-0.896-2-2-2h-7v4 h9l0,0V10z M45,14L45,14H3v20h42l0,0V14z M45,36L45,36h-9v4h-2v-4h-9v4h-2v-4h-9v4h-2v-4H3v2c0,1.104,0.896,2,2,2h38 c1.104,0,2-0.896,2-2V36z M21.621,29.765C21.449,29.904,21.238,30,21,30c-0.553,0-1-0.447-1-1V19c0-0.552,0.447-1,1-1 c0.213,0,0.4,0.082,0.563,0.196l7.771,4.872C29.72,23.205,30,23.566,30,24c0,0.325-0.165,0.601-0.405,0.783L21.621,29.765z' fill='gray'%3E%3C/path%3E%3C/svg%3E");
    margin-right: 4px;
  }

  /* Misc */
  .text.selected, .command.selected, .screen:active, .command:active,
  .range:active , .emoji.selected, .emoji:active {
    color: var(--colorToolbarActive); filter: drop-shadow(0 0 8px var(--colorGlow));
  }
  .theme-light .text.selected, .theme-light .command.selected,
  .theme-light .screen:active, .theme-light .command:active,
  .theme-light .range:active, .theme-light .emoji.selected,
  .theme-light .emoji:active {
    background-color: var(--colorToolbarActive); color: var(--colorPanel);
    filter: none; border-radius: 6px;
  }
  .grayed { opacity: 0.3; }
  .noselect {
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;
    user-select: none; -webkit-user-select: none;
  }
  .nodrag {
    -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none;
    -o-user-drag: none; -ms-user-drag: none; user-drag: none;
  }
  .disabled { opacity: 0.5; cursor: default; pointer-events: none; }
  .hidden { display: none; }
  .starttransparent { opacity: 0; }

  /* blinking */
  @-webkit-keyframes blinking { to { visibility: hidden } }
  @keyframes blinking { to { visibility: hidden } }
  .blink>:not(div):not(ol):not(ul):not(pre):last-child:after,
  .blink>ol:last-child li:last-child:after,.blink>pre:last-child code:after,
  .blink>ul:last-child li:last-child:after {
    -webkit-animation: blinking 1s steps(5,start) infinite;
    animation: blinking 1s steps(5,start) infinite; content: "▋";
    position: absolute; margin: 0 0 0 .25rem; padding:0; vertical-align: baseline;
    white-space: nowrap; width: 0; overflow: visible;
  }


  /* Fonts */
  @font-face {
    font-family:"SansRegular";
    src: url("/fonts/FiraSansCondensed-Regular.ttf") format('truetype');
  }
  @font-face {
    font-family:"SansItalic";
    src: url("/fonts/FiraSansCondensed-Italic.ttf") format('truetype');
  }
  @font-face {
    font-family:"SansBold";
    src: url("/fonts/FiraSansCondensed-Bold.ttf") format('truetype');
  }
  @font-face {
    font-family:"SansBoldItalic";
    src: url("/fonts/FiraSansCondensed-BoldItalic.ttf") format('truetype');
  }
  @font-face {
    font-family:"SansRegularCondensed";
    src: url("/fonts/FiraSansExtraCondensed-Regular.ttf") format('truetype');
  }
  @font-face {
    font-family:"SansBoldCondensed";
    src: url("/fonts/FiraSansExtraCondensed-Bold.ttf") format('truetype');
  }

  /* Layouts */
  #main.ratio-wide { width: min(96vw, 192vh, 1400px); height: min(48vw,96vh,700px); } /* 1:2 */
  #main.ratio-normal { width: min(96vw, 128vh, 1040px); height: min(72vw,96vh,780px); } /* 3:4 */
  #main.layout-full { width: 100%; height: 100%; }
  #main.layout-land #left { top: 0; left: 0; bottom: 38%; right: 50%; }
  #main.layout-port #left { top: 0; left: 0; bottom: 0; right: 60%; }
  #main.layout-full #left { top: 0; left: 0; bottom: 0; right: 0; margin: 0; }
  #main.layout-full #left .border { display: none; }
  #main.layout-land #right { top: 0; left: 50%; bottom: 0; right: 0; }
  #main.layout-port #right { top: 0; left: 40%; bottom: 30%; right: 0; }
  #main.layout-full #right { top: 10%; left: 45%; bottom: 30%; right: 5%; max-width: 800px; }
  #main.layout-land #bottom { top: 62%; left: 0; bottom: 0; right: 50%; }
  #main.layout-port #bottom { top: 70%; left: 40%; bottom: 0; right: 0; }
  #main.layout-full #bottom { top: 70%; left: 45%; bottom: 10%; right: 5%; max-width: 750px; }
  #main.presence-vr #left { box-shadow: none; background-color: transparent; }
  #main.presence-vr #view { display: none; }
  #main.presence-vr #left .border { display: none; }
  #main.presence-vr #avatar { bottom: -8px; left: -400px; right: -400px; }
  #main.layout-full #avatar { top: 0; left: 0; bottom: 0; right: 45%; }

  @media (max-width: 1000px) {
    #main.ratio-wide, #main.ratio-normal { width: 96vw; height: 90vh; }
    #main.layout-full { width: 100%; height: 100%; }
    #main.layout-land #left { top: 0; left: 0; bottom: 62%; right: 0; }
    #main.layout-port #left { top: 0; left: 0; bottom: 24%; right: 62%; }
    #main.layout-land #right { top: 38%; left: 0; bottom: 24%; right: 0; }
    #main.layout-port #right { top: 0; left: 38%; bottom: 24%; right: 0; }
    #main.layout-full #right { top: 0; left: 38%; bottom: 24%; right: 0; max-width: none; }
    #main.layout-land #bottom { top: 76%; left: 0; bottom: 0; right: 0; }
    #main.layout-port #bottom { top: 76%; left: 0; bottom: 0; right: 0; }
    #main.layout-full #bottom { top: 76%; left: 38%; bottom: 0; right: 0; max-width: none; }
  }

  /* ═══════════════════════════════════════════════════════════════════
     Mobile-First Overlay UI
     ═══════════════════════════════════════════════════════════════════ */

  /* Gear button (Settings-Toggle) – ausgeblendet */
  #settings-toggle {
    display: none !important;
    position: fixed; bottom: 18px; right: 18px; z-index: 10000;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: rgba(var(--secondary-color-rgb), 0.35);
    border: 1px solid rgba(var(--primary-color-rgb), 0.15);
    color: var(--colorBody); cursor: pointer;
    align-items: center; justify-content: center;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: transform 0.2s ease, background 0.2s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  }
  #settings-toggle:hover { transform: scale(1.08); background: rgba(var(--secondary-color-rgb), 0.55); }
  #settings-toggle:active { transform: scale(0.95); }
  #settings-toggle svg { width: 2.8rem; height: 2.8rem; }
  .theme-light #settings-toggle { background: rgba(var(--secondary-color-rgb), 0.2); }

  /* Settings-Overlay Backdrop */
  #settings-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 8500;
    background: rgba(0,0,0,0.35); opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  #settings-overlay.active { opacity: 1; pointer-events: auto; }

  /* Rechtes Panel als Overlay-Drawer (immer aktiv) */
  .overlay-mode #main { width: 100vw !important; height: 100vh !important; }
  .overlay-mode #main #left {
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    right: 0 !important; margin: 0 !important;
  }
  .overlay-mode #main #left .border { display: none; }
  .overlay-mode #right {
    position: fixed !important; top: 0 !important; right: -100% !important;
    bottom: 0 !important; left: auto !important; width: min(480px, 85vw) !important;
    margin: 0 !important; z-index: 9500; max-width: none !important;
    transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
    box-shadow: -4px 0 24px rgba(0,0,0,0.25);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  }
  .overlay-mode #right.drawer-open {
    right: 0 !important;
  }
  .overlay-mode #right .border { border-color: var(--colorBorderActive); }
  .overlay-mode #main #bottom {
    position: fixed !important; bottom: 0 !important; left: 0 !important;
    right: 0 !important; top: auto !important; height: auto !important;
    margin: 0 !important; padding: 12px 16px !important;
    background: rgba(var(--secondary-color-rgb), 0.45) !important;
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-radius: 20px 20px 0 0; z-index: 10000;
    border-top: 1px solid rgba(var(--primary-color-rgb), 0.12);
    display: flex !important; flex-direction: row !important;
    align-items: center !important; gap: 10px;
  }
  .overlay-mode #main #bottom .pages { position: relative !important; left: 0 !important; right: 0 !important; top: 0 !important; flex: 0 1 80% !important; min-width: 0 !important; overflow: hidden !important; display: block !important; }
  .overlay-mode #main #bottom .pages .row { display: none !important; }
  .overlay-mode #main #bottom .pages > .page.fill { display: block !important; }
  .overlay-mode #main #bottom .pages > .page.fill > .row.fill { display: block !important; }
  .overlay-mode #main #bottom .border { display: none; }
  .overlay-mode #main #bottom textarea {
    width: 100% !important; box-sizing: border-box !important;
    background: rgba(var(--secondary-color-rgb), 0.25) !important;
    border-radius: 1.25rem !important; padding: 0.65rem 1rem !important;
    border: 1px solid rgba(var(--primary-color-rgb), 0.1) !important;
    font-size: 1.05rem !important; line-height: 1.5 !important;
    color: rgba(255,255,255,0.9) !important;
    max-height: 6rem !important;
  }
  .overlay-mode #main #bottom textarea::placeholder {
    color: rgba(var(--primary-color-rgb), 0.4) !important;
  }
  .theme-light .overlay-mode #main #bottom textarea {
    color: var(--colorUserText) !important;
  }
  .theme-light .overlay-mode #main #bottom textarea::placeholder {
    color: rgba(var(--primary-color-rgb), 0.5) !important;
  }
  .overlay-mode #main #right:not(.drawer-open) { visibility: hidden; pointer-events: none; }
  .overlay-mode #main #right.drawer-open { visibility: visible; pointer-events: auto; }
  .overlay-mode #fab-mic { display: none; }

  /* Floating Action Buttons (FABs) – links unten */
  #fab-container {
    position: fixed; bottom: 80px; left: 14px; z-index: 10000;
    display: flex; flex-direction: column; gap: 6px;
  }
  .fab-btn {
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: rgba(var(--secondary-color-rgb), 0.25);
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    color: var(--colorBody); cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: transform 0.2s ease, background 0.2s ease;
    position: relative;
  }
  .fab-btn:hover { transform: scale(1.08); background: rgba(var(--secondary-color-rgb), 0.45); }
  .fab-btn:active { transform: scale(0.95); }
  .fab-btn svg { width: 1.1rem; height: 1.1rem; }
  .fab-btn.active {
    background: rgba(var(--primary-color-rgb), 0.35);
    border-color: rgba(var(--primary-color-rgb), 0.3);
    color: #fff;
  }
  /* Mikrofon-Button pulsiert rot wenn aktiv */
  .fab-btn.mic-active {
    background: rgba(220,40,40,0.85); color: white;
    border-color: rgba(255,60,60,0.6);
    animation: mic-pulse 1.5s ease-in-out infinite;
  }
  /* Echo-Schutz: Mic auto-muted während Avatar spricht */
  .fab-btn.auto-muted, #btn-mic-bottom.auto-muted {
    background: rgba(255,165,0,0.85) !important; color: white !important;
    border-color: rgba(255,180,40,0.6) !important;
    animation: mic-automute-pulse 2s ease-in-out infinite !important;
  }
  @keyframes mic-automute-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,165,0,0.3); }
    50% { box-shadow: 0 0 0 8px rgba(255,165,0,0); }
  }
  @keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,40,40,0.4); }
    50% { box-shadow: 0 0 0 10px rgba(220,40,40,0); }
  }
  .fab-btn .fab-label {
    position: absolute; left: calc(100% + 8px); white-space: nowrap;
    font-size: 0.7rem; background: rgba(var(--secondary-color-rgb), 0.75);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    padding: 2px 8px; border-radius: 6px; pointer-events: none;
    opacity: 0; transition: opacity 0.2s;
  }
  .fab-btn:hover .fab-label { opacity: 1; }
  .theme-light .fab-btn { background: rgba(var(--secondary-color-rgb), 0.15); }
  .theme-light .fab-btn.active {
    background: rgba(var(--primary-color-rgb), 0.25);
    color: var(--colorBody);
  }
  /* Pause-Button: im Paused-Zustand Play-Icon zeigen (FEAT-2) */
  #fab-pause .icon-play { display: none; }
  #fab-pause .icon-pause { display: block; }
  #fab-pause.paused .icon-pause { display: none; }
  #fab-pause.paused .icon-play { display: block !important; }

  /* ═══ Chat Overlay on Avatar ═══ */
  #chat-overlay {
    position: absolute; bottom: 80px; left: 0; right: 0;
    display: none; flex-direction: column; justify-content: flex-end;
    max-height: 55vh; padding: 0 1.5rem; z-index: 100;
    pointer-events: none; overflow: hidden;
    mask-image: linear-gradient(to top, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 75%, transparent 100%);
  }
  #chat-overlay.visible {
    display: flex;
  }
  #chat-overlay .chat-messages {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.5rem;
  }
  #chat-overlay .chat-bubble {
    max-width: 70%; padding: 0.55rem 0.9rem; border-radius: 1rem;
    font-size: 0.9rem; line-height: 1.45; word-wrap: break-word;
    pointer-events: auto; animation: chatFadeIn 0.3s ease-out;
  }
  #chat-overlay .chat-bubble.user {
    align-self: flex-end;
    background: rgba(0, 137, 123, 0.6);
    color: #fff; border-bottom-right-radius: 0.2rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    max-width: 30%;
  }
  .theme-light #chat-overlay .chat-bubble.user {
    background: rgba(0, 121, 107, 0.65); color: #fff;
  }
  #chat-overlay .chat-bubble.ai {
    align-self: flex-start;
    background: rgba(var(--secondary-color-rgb), 0.8);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: rgba(255,255,255,0.92); border-bottom-left-radius: 0.2rem;
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
  }
  @keyframes chatFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .theme-light #chat-overlay .chat-bubble.ai { color: var(--colorBody); }

  /* ═══ Chat Transcript Modal ═══ */
  #transcript-modal {
    display: none; position: fixed; inset: 0; z-index: 100000;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    align-items: center; justify-content: center;
  }
  #transcript-modal.visible { display: flex; }
  #transcript-modal .transcript-box {
    background: rgba(var(--secondary-color-rgb), 0.95);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(var(--primary-color-rgb), 0.15);
    border-radius: 1rem; width: min(600px, 90vw); max-height: 80vh;
    display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  }
  #transcript-modal .transcript-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.8rem 1.2rem; border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
  }
  #transcript-modal .transcript-header h3 { margin: 0; font-size: 1rem; font-weight: 600; }
  #transcript-modal .transcript-header .transcript-actions { display: flex; gap: 0.5rem; }
  #transcript-modal .transcript-header button {
    background: rgba(var(--primary-color-rgb), 0.15); border: 1px solid rgba(var(--primary-color-rgb), 0.2);
    color: inherit; border-radius: 0.5rem; padding: 0.35rem 0.7rem; cursor: pointer;
    font-size: 0.8rem; transition: background 0.2s;
  }
  #transcript-modal .transcript-header button:hover { background: rgba(var(--primary-color-rgb), 0.3); }
  #transcript-modal .transcript-content {
    padding: 1rem 1.2rem; overflow-y: auto; flex: 1;
    font-size: 0.88rem; line-height: 1.6; user-select: text; -webkit-user-select: text;
  }
  #transcript-modal .transcript-msg { margin-bottom: 0.8rem; }
  #transcript-modal .transcript-msg .transcript-role {
    font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 0.15rem; opacity: 0.7;
  }
  #transcript-modal .transcript-msg.user .transcript-role { color: rgba(0,180,160,0.9); }
  #transcript-modal .transcript-msg.ai .transcript-role { color: rgba(var(--primary-color-rgb), 0.8); }
  .theme-light #transcript-modal .transcript-box {
    background: rgba(255,255,255,0.95); color: var(--colorBody);
  }

  /* ═══ Overlay Bottom Action Buttons ═══ */
  #bottom-actions {
    display: none; align-items: center; gap: 8px;
    flex-shrink: 0; order: -1;
  }
  .overlay-mode #bottom-actions { display: flex; }
  #btn-send {
    width: 2.8rem; height: 2.8rem; border-radius: 50%;
    background: rgba(var(--primary-color-rgb), 1);
    color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 10px rgba(var(--primary-color-rgb), 0.35);
    flex-shrink: 0;
  }
  #btn-send:hover { transform: scale(1.08); }
  #btn-send:active { transform: scale(0.95); }
  #btn-send svg { width: 1.2rem; height: 1.2rem; }
  #btn-mic-bottom {
    width: 2.8rem; height: 2.8rem; border-radius: 50%;
    background: rgba(var(--primary-color-rgb), 0.25);
    color: var(--colorBody); border: 1px solid rgba(var(--primary-color-rgb), 0.35);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s, background 0.15s;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    flex-shrink: 0;
  }
  #btn-mic-bottom:hover { transform: scale(1.08); }
  #btn-mic-bottom.mic-active {
    background: rgba(220,40,40,0.9); color: white;
    border-color: rgba(255,60,60,0.8);
    animation: mic-pulse 1.5s ease-in-out infinite;
  }
  #btn-mic-bottom svg { width: 1.2rem; height: 1.2rem; }
  /* Push-to-Talk Mode */
  .ptt-mode #fab-mic, .ptt-mode #btn-mic-bottom {
    border: 2px solid rgba(var(--primary-color-rgb), 0.7);
  }
  .ptt-mode #fab-mic .fab-label { display: none; }
  .ptt-mode #fab-mic::after, .ptt-mode #btn-mic-bottom::after {
    content: 'PTT'; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
    font-size: 0.55rem; font-weight: 700; color: rgb(var(--primary-color-rgb));
    letter-spacing: 0.05em; white-space: nowrap;
  }
  .ptt-mode #fab-mic, .ptt-mode #btn-mic-bottom { position: relative; }
  .ptt-active #fab-mic, .ptt-active #btn-mic-bottom {
    background: rgba(220,40,40,0.9) !important; color: white !important;
    border-color: rgba(255,60,60,0.8) !important;
    transform: scale(1.15);
  }

  /* Avatar-Switcher Popup */
  #avatar-switcher {
    position: fixed; bottom: 80px; left: 56px; z-index: 8100;
    background: rgba(var(--secondary-color-rgb), 0.6);
    border: 1px solid rgba(var(--primary-color-rgb), 0.12);
    border-radius: 12px; padding: 6px; display: none;
    flex-direction: row; gap: 5px;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  }
  #avatar-switcher.visible { display: flex; }
  .avatar-chip {
    padding: 5px 10px; border-radius: 8px; cursor: pointer;
    font-size: 0.78rem; border: 1px solid rgba(var(--primary-color-rgb), 0.15);
    color: var(--colorBody); transition: all 0.2s;
    white-space: nowrap;
  }
  .avatar-chip:hover, .avatar-chip.selected {
    background: rgba(var(--primary-color-rgb), 0.2);
    border-color: rgba(var(--primary-color-rgb), 0.35);
    color: #fff;
  }

  /* Panorama-Switcher Popup */
  #panorama-switcher {
    position: fixed; bottom: 80px; left: 56px; z-index: 8100;
    background: rgba(var(--secondary-color-rgb), 0.6);
    border: 1px solid rgba(var(--primary-color-rgb), 0.12);
    border-radius: 12px; padding: 6px; display: none;
    flex-direction: row; gap: 5px;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  }
  #panorama-switcher.visible { display: flex; }

  /* Service-Verfügbarkeit Badge */
  .service-badge {
    display: inline-block; font-size: 0.65rem; padding: 1px 6px;
    border-radius: 4px; margin-left: 6px; vertical-align: middle;
  }
  .service-badge.available { background: rgba(0,180,0,0.2); color: #4caf50; }
  .service-badge.unavailable { background: rgba(180,0,0,0.2); color: #ef5350; }

  /* API-Key Server/Client Toggle */
  .key-toggle {
    display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
  }
  .key-toggle-switch {
    position: relative; width: 36px; height: 20px; border-radius: 10px;
    background: var(--colorToolbarPassive2); cursor: pointer; transition: background 0.3s;
  }
  .key-toggle-switch.server { background: var(--colorBorderActive); }
  .key-toggle-switch::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: white; transition: transform 0.3s;
  }
  .key-toggle-switch.server::after { transform: translateX(16px); }
  .key-toggle-label { font-size: 0.7rem; color: var(--colorToolbarPassive); }

  /* AR-Modus: #main hat transform → eigener Stacking Context.
     Damit #bottom (z-index 10000) über dem AR-Canvas (z-index 9000) liegt,
     muss #main selbst einen z-index > 9000 bekommen.
     pointer-events: none auf #main, damit Touch-Events zum AR-Canvas
     durchgehen (Pinch-to-Scale etc.). #bottom bekommt pointer-events: auto. */
  body.ar-mode #main {
    z-index: 9500 !important;
    pointer-events: none !important;
  }
  /* Avatar-Canvas im AR-Modus ausblenden (Armature ist in der Zappar-Szene) */
  body.ar-mode #main #left {
    display: none !important;
  }
  body.ar-mode #main #bottom {
    pointer-events: auto !important;
  }
  /* AR-Modus: Settings-Toggle ausblenden */
  body.ar-mode #settings-toggle {
    display: none !important;
  }

  /* Share-Modus: Nur Avatar + Chat sichtbar, keine Settings/Admin-UI.
     html.share-mode wird VOR dem Body-Rendering gesetzt (verhindert Icon-Flash).
     body.share-mode wird als Fallback beibehalten. */
  html.share-mode #settings-toggle,
  body.share-mode #settings-toggle { display: none !important; }
  html.share-mode #settings-overlay,
  body.share-mode #settings-overlay { display: none !important; }
  html.share-mode #right,
  body.share-mode #right { display: none !important; }
  html.share-mode body:not(.anam-mode):not(.tavus-mode) #left,
  body.share-mode:not(.anam-mode):not(.tavus-mode) #left { display: none !important; }
  html.share-mode #fab-photo:not(.share-visible),
  body.share-mode #fab-photo:not(.share-visible) { display: none !important; }
  html.share-mode #fab-ar:not(.share-visible),
  body.share-mode #fab-ar:not(.share-visible) { display: none !important; }
  html.share-mode #fab-avatar-switch,
  body.share-mode #fab-avatar-switch { display: none !important; }
  html.share-mode #fab-pause:not(.share-visible),
  body.share-mode #fab-pause:not(.share-visible) { display: none !important; }
  #fab-pause { display: none; }
  html.share-mode #fab-mic:not(.share-visible),
  body.share-mode #fab-mic:not(.share-visible) { display: none !important; }
  html.share-mode #fab-pause:not(.share-visible),
  body.share-mode #fab-pause:not(.share-visible) { display: none !important; }
  html.share-mode #fab-chat-toggle:not(.share-visible),
  body.share-mode #fab-chat-toggle:not(.share-visible) { display: none !important; }
  html.share-mode #fab-transcript:not(.share-visible),
  body.share-mode #fab-transcript:not(.share-visible) { display: none !important; }
  html.share-mode #fab-camera,
  body.share-mode #fab-camera { display: none !important; }
  html.share-mode #avatar-switcher,
  body.share-mode #avatar-switcher { display: none !important; }
  html.share-mode #fab-panorama,
  body.share-mode #fab-panorama { display: none !important; }
  html.share-mode #panorama-switcher,
  body.share-mode #panorama-switcher { display: none !important; }
  html.share-mode #avatar-gen-overlay:not(.share-visible),
  body.share-mode #avatar-gen-overlay:not(.share-visible) { display: none !important; }
  html.share-mode #gender-select-dialog:not(.share-visible),
  body.share-mode #gender-select-dialog:not(.share-visible) { display: none !important; }
  html.share-mode #avaturn-photo-dialog:not(.share-visible),
  body.share-mode #avaturn-photo-dialog:not(.share-visible) { display: none !important; }
  html.share-mode #avaturn-frontend-editor:not(.share-visible),
  body.share-mode #avaturn-frontend-editor:not(.share-visible) { display: none !important; }
  .avaturn-iframe { width: 100%; height: 100%; border: none; }

  /* Avaturn-Dialog Hover-Effekte */
  .avaturn-thumb:hover {
    border-color: rgba(var(--primary-color-rgb), 0.5) !important;
    background: rgba(var(--primary-color-rgb), 0.12) !important;
    transform: translateY(-1px);
  }
  .avaturn-gender-btn:hover {
    border-color: rgba(var(--primary-color-rgb), 0.6) !important;
    background: rgba(var(--primary-color-rgb), 0.18) !important;
    color: #fff !important;
  }
  .avaturn-gender-btn.selected:hover {
    background: rgba(var(--primary-color-rgb), 0.35) !important;
  }
  #avaturn-cam-start-btn:hover,
  #avaturn-cam-capture-btn:hover {
    background: rgba(var(--primary-color-rgb), 0.45) !important;
    border-color: rgba(var(--primary-color-rgb), 0.6) !important;
    box-shadow: 0 0 14px rgba(var(--primary-color-rgb), 0.25);
    transform: translateY(-1px);
  }
  #avaturn-generate-btn:hover {
    background: rgba(39, 174, 96, 0.45) !important;
    border-color: rgba(39, 174, 96, 0.6) !important;
    box-shadow: 0 0 14px rgba(39, 174, 96, 0.25);
    transform: translateY(-1px);
  }
  #avaturn-cancel-btn:hover {
    background: rgba(var(--secondary-color-rgb), 0.55) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }
  #avaturn-frontend-export-btn:hover {
    background: rgba(var(--primary-color-rgb), 0.4) !important;
    border-color: rgba(var(--primary-color-rgb), 0.6) !important;
    box-shadow: 0 0 12px rgba(var(--primary-color-rgb), 0.2);
  }
  #avaturn-frontend-close-btn:hover {
    background: rgba(var(--secondary-color-rgb), 0.6) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }

  /* Anam Video-Avatar Modus */
  body.anam-mode #avatar { opacity: 0 !important; pointer-events: none; }
  body.anam-mode #view { opacity: 1 !important; z-index: 2; }
  body.anam-mode #view #video {
    width: 100%; height: 100%; object-fit: cover;
    background: #000; border-radius: inherit;
    transition: filter 0.6s ease;
  }
  /* Anam Poster-Blur: Vorschaubild leicht unscharf, damit Qualitätsunterschied zum Live-Video weniger auffällt */
  body.anam-mode #view #video.anam-poster-blur {
    filter: blur(3px);
  }
  /* Desktop: Video-Avatar auf Rendered Size begrenzen (Anam rendert 613×409) –
     verhindert Pixelung bei Fullscreen. Dunkler Hintergrund + zentriert.
     NICHT im Share/Embed-Modus – dort füllt das Video den Container! */
  body.anam-mode.overlay-mode:not(.share-mode) #main {
    max-width: 613px !important;
    max-height: 409px !important;
    aspect-ratio: 3 / 2;
    border-radius: 0.75rem;
    box-shadow: 0 6px 30px rgba(0,0,0,0.5);
    position: relative;
  }
  /* Anam Skalierung: Klassen anam-scale-1x / 1_5x / 2x / fullscreen
     werden von boot.js basierend auf Config gesetzt.
     Der Fullscreen-Toggle-Button wechselt zwischen aktuellem und nächstem Level. */

  /* Desktop (nicht Share/Embed): Standard 1× (613×409) */
  /* (Basisregel oben: body.anam-mode.overlay-mode:not(.share-mode) = 613×409) */

  /* Desktop: 1.5× (920×613) */
  body.anam-mode.anam-scale-1_5x.overlay-mode:not(.share-mode) #main {
    max-width: 920px !important;
    max-height: 613px !important;
  }
  /* Desktop: 2× (1226×818) */
  body.anam-mode.anam-scale-2x.overlay-mode:not(.share-mode) #main {
    max-width: 1226px !important;
    max-height: 818px !important;
  }
  /* Desktop: Fullscreen */
  body.anam-mode.anam-scale-fullscreen.overlay-mode:not(.share-mode) #main {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
  }
  /* Legacy: anam-fullscreen Klasse (Rückwärtskompatibilität) */
  body.anam-mode.anam-fullscreen.overlay-mode:not(.share-mode) #main {
    max-width: 1226px !important;
    max-height: 818px !important;
  }

  /* ── Share-Link Skalierung ────────────────────────────────── */
  /* Share-Link: Standard 1× (613×409) */
  html.share-mode:not(.embed-mode) body.anam-mode.overlay-mode #main {
    max-width: 613px !important;
    max-height: 409px !important;
    aspect-ratio: 3 / 2;
    border-radius: 0.75rem;
    box-shadow: 0 6px 30px rgba(0,0,0,0.5);
    position: relative;
  }
  /* Share-Link: 1.5× (920×613) */
  html.share-mode:not(.embed-mode) body.anam-mode.anam-scale-1_5x.overlay-mode #main {
    max-width: 920px !important;
    max-height: 613px !important;
  }
  /* Share-Link: 2× (1226×818) */
  html.share-mode:not(.embed-mode) body.anam-mode.anam-scale-2x.overlay-mode #main {
    max-width: 1226px !important;
    max-height: 818px !important;
  }
  /* Share-Link: Fullscreen */
  html.share-mode:not(.embed-mode) body.anam-mode.anam-scale-fullscreen.overlay-mode #main {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
  }
  /* Share-Link Legacy: anam-fullscreen → 2× */
  html.share-mode:not(.embed-mode) body.anam-mode.anam-fullscreen.overlay-mode #main {
    max-width: 1226px !important;
    max-height: 818px !important;
  }
  /* Embed (iFrame): Anam-Video füllt den gesamten Container (kein Crop!) */
  html.embed-mode body.anam-mode.overlay-mode #main {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
  }
  /* Anam-Mode: FABs relativ zum Video-Container positionieren */
  body.anam-mode #fab-container {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    gap: 8px !important;
  }
  /* Anam-Mode: Glassmorphism Buttons (dezenter Glaseffekt) */
  body.anam-mode .fab-btn {
    width: 2.6rem; height: 2.6rem;
    background: rgba(var(--primary-color-rgb), 0.35);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 2px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.1);
  }
  body.anam-mode .fab-btn:hover {
    background: rgba(var(--primary-color-rgb), 0.55);
    border-color: rgba(255,255,255,0.25);
    transform: scale(1.1);
  }
  body.anam-mode .fab-btn:active { transform: scale(0.93); }
  body.anam-mode .fab-btn svg { width: 1.2rem; height: 1.2rem; }
  /* Anam Mic: Orange wenn bereit, Rot wenn aktiv (überschreibt .mic-active) */
  body.anam-mode #fab-mic {
    background: rgba(var(--primary-color-rgb), 0.4);
  }
  body.anam-mode #fab-mic.mic-active {
    background: rgba(220,40,40,0.7);
    border-color: rgba(255,80,80,0.3);
    box-shadow: 0 0 16px rgba(220,40,40,0.35), inset 0 1px 0 rgba(255,255,255,0.1);
  }
  /* Anam Pause: leicht anderer Farbton */
  body.anam-mode #fab-pause {
    background: rgba(var(--primary-color-rgb), 0.3);
  }
  /* Anam-Mode: Fullscreen-Toggle rechts unten über dem Video */
  #fab-fullscreen {
    display: none;
  }
  body.anam-mode #fab-fullscreen {
    display: flex !important;
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    left: auto !important;
    z-index: 10001;
  }
  /* Share-Mode: FABs komplett verstecken bis Avatar-Modus gesetzt ist (kein Flackern!) */
  html.share-mode #fab-container {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease 0.15s;
  }
  html.share-mode body.anam-mode #fab-container,
  html.share-mode body.tavus-mode #fab-container,
  html.share-mode body:not(.anam-mode):not(.tavus-mode).avatar-ready #fab-container {
    opacity: 1;
    pointer-events: auto;
  }
  /* Share-Mode: Fullscreen-Toggle initial verstecken */
  html.share-mode #fab-fullscreen {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease 0.15s;
  }
  html.share-mode body.anam-mode #fab-fullscreen {
    opacity: 1;
    pointer-events: auto;
  }
  /* Fullscreen: Compress-Icon anzeigen (Hinweis dass Verkleinern möglich) */
  body.anam-mode.anam-scale-fullscreen #fab-fullscreen {
    opacity: 1;
    pointer-events: auto;
  }
  /* Share-Mode: Alle starttransparent Elemente im #right Panel sofort ausblenden */
  html.share-mode #right .starttransparent { visibility: hidden !important; }
  html.share-mode #name { visibility: hidden !important; }
  /* Tavus: Fullscreen beibehalten (keine Größenbegrenzung wie bei Anam) */
  body.tavus-mode.overlay-mode #main {
    /* Keine max-width/max-height – Tavus nutzt volles Viewport */
  }
  /* Anam-Mode: FAB-Mic anzeigen (Bottom-Bar wird ausgeblendet, daher FAB als Fallback) */
  body.anam-mode.overlay-mode #fab-mic { display: flex !important; }
  /* Anam + Share-Mode: Eingabeleiste komplett ausblenden (Anam hat eigene Controls) */
  body.anam-mode.share-mode #main #bottom,
  html.share-mode body.anam-mode #main #bottom { display: none !important; }
  body.anam-mode.share-mode #bottom-actions,
  html.share-mode body.anam-mode #bottom-actions { display: none !important; }

  /* Tavus Video-Avatar Modus */
  body.tavus-mode #avatar { opacity: 0 !important; pointer-events: none; }
  body.tavus-mode #canvas { display: none !important; }
  body.tavus-mode #view { opacity: 1 !important; z-index: 2; }
  body.tavus-mode #view #video { display: none !important; }
  body.tavus-mode #tavus-daily-iframe {
    width: 100%; height: 100%; border: none;
    position: absolute; top: 0; left: 0; z-index: 10;
    border-radius: inherit;
  }
  /* Tavus: FAB-Mic NICHT anzeigen – Tavus/Daily.co hat eigenen Mic-Button im iFrame */
  /* Tavus + Share-Mode: Eingabeleiste ausblenden (Tavus hat eigene Controls via Daily.co) */
  body.tavus-mode.share-mode #main #bottom,
  html.share-mode body.tavus-mode #main #bottom { display: none !important; }
  body.tavus-mode.share-mode #bottom-actions,
  html.share-mode body.tavus-mode #bottom-actions { display: none !important; }

  /* Share-Modus: Fehlermeldung bei ungültigem Link */
  .share-error {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 0; z-index: 99999;
    background: linear-gradient(135deg, #0f0c29, #2A313E, #24243e);
    color: #fff; font-family: 'Outfit', sans-serif;
  }
  .share-error-card {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 1.2rem; padding: 2.5rem 3rem; text-align: center;
    max-width: 440px; width: 90%; backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  }
  .share-error-icon { font-size: 3.5rem; margin-bottom: 1rem; display: block; }
  .share-error h2 { font-size: 1.5rem; margin: 0 0 0.6rem 0; font-weight: 600; }
  .share-error p { font-size: 1rem; color: #9ca3af; margin: 0 0 1.5rem 0; line-height: 1.5; }
  .share-error-btn {
    display: inline-block; padding: 0.65rem 1.8rem; border-radius: 0.6rem;
    background: linear-gradient(135deg, #667eea, #764ba2); color: #fff;
    text-decoration: none; font-size: 0.95rem; font-weight: 500;
    transition: opacity 0.2s, transform 0.2s; border: none; cursor: pointer;
  }
  .share-error-btn:hover { opacity: 0.9; transform: translateY(-1px); }
  .share-error-footer { margin-top: 2rem; font-size: 0.8rem; color: #4b5563; }

  /* Share-Modus: Glassmorphism Loading Spinner */
  .share-loading-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 99998; pointer-events: none;
    opacity: 1; transition: opacity 0.6s ease;
  }
  .share-loading-overlay.hidden { opacity: 0; pointer-events: none; }
  .share-loading-card {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 1.2rem; padding: 2rem 2.5rem; text-align: center;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  }
  .share-loading-spinner {
    width: 48px; height: 48px; margin: 0 auto 1rem;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: rgba(0,174,179,0.8);
    border-radius: 50%; animation: share-spin 0.8s linear infinite;
  }
  .share-loading-spinner.inline {
    display: inline-block; width: 16px; height: 16px; margin: 0 0.5rem 0 0;
    border-width: 2px; vertical-align: middle;
  }
  @keyframes share-spin { to { transform: rotate(360deg); } }
  .share-loading-text {
    font-size: 0.95rem; color: rgba(255,255,255,0.7);
    font-family: 'Outfit', sans-serif; font-weight: 400;
  }

  /* Click-to-start Overlay (Share/Embed-Modus) */
  .click-to-start-overlay {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    cursor: pointer; opacity: 1; transition: opacity 0.5s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .click-to-start-overlay.hidden { opacity: 0; pointer-events: none; }
  .click-to-start-card {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    border-radius: 1.5rem; padding: 2.5rem 3rem; text-align: center;
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 12px 48px rgba(0,0,0,0.35);
    animation: ctsFloat 3s ease-in-out infinite;
    max-width: 90vw;
  }
  .click-to-start-icon {
    width: 56px; height: 56px; margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, rgba(0,174,179,0.3), rgba(0,174,179,0.1));
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    animation: ctsPulse 2s ease-in-out infinite;
  }
  .click-to-start-icon svg { width: 28px; height: 28px; fill: #fff; }
  .click-to-start-text {
    font-size: 1.15rem; color: rgba(255,255,255,0.92);
    font-family: 'Outfit', system-ui, sans-serif; font-weight: 600;
    margin-bottom: 0.4rem;
  }
  .click-to-start-sub {
    font-size: 0.82rem; color: rgba(255,255,255,0.45);
    font-family: 'Outfit', system-ui, sans-serif; font-weight: 400;
  }
  @keyframes ctsPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(0,174,179,0.4); } 50% { box-shadow: 0 0 0 14px rgba(0,174,179,0); } }
  @keyframes ctsFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

  /* Connecting-Zustand: Box ausblenden, nur kleiner Ring-Spinner zentriert */
  .click-to-start-overlay.connecting {
    background: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    cursor: default;
  }
  .click-to-start-overlay.connecting .click-to-start-card {
    background: transparent; border: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    animation: none; padding: 0;
  }
  .click-to-start-overlay.connecting .click-to-start-icon {
    width: 48px; height: 48px; margin: 0 auto;
    background: transparent;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: rgba(0,174,179,0.8);
    animation: ctsConnectSpin 0.8s linear infinite;
  }
  .click-to-start-overlay.connecting .click-to-start-icon svg {
    display: none;
  }
  .click-to-start-overlay.connecting .click-to-start-text,
  .click-to-start-overlay.connecting .click-to-start-sub {
    display: none;
  }
  @keyframes ctsConnectSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* Desktop: AR-Button ausblenden (nur auf Mobilgeräten sinnvoll) */
  @media (min-width: 769px) {
    #fab-ar { display: none !important; }
  }

  /* Mobile-Optimierungen */
  @media (max-width: 768px) {
    .overlay-mode #right { width: min(420px, 90vw) !important; }
    #chat-overlay { padding: 0 0.8rem; max-height: 35vh; }
    #chat-overlay .chat-bubble { max-width: 85%; font-size: 0.82rem; padding: 0.45rem 0.75rem; }
    #chat-overlay .chat-bubble.user { max-width: 45%; }
    #fab-container { bottom: 74px; left: 10px; gap: 5px; }
    .fab-btn { width: 2.2rem; height: 2.2rem; }
    .fab-btn svg { width: 1rem; height: 1rem; }
    #settings-toggle { bottom: 14px; right: 14px; width: 2.6rem; height: 2.6rem; }
    #settings-toggle svg { width: 2.2rem; height: 2.2rem; }
    .overlay-mode #main #bottom { padding: 8px 12px !important; border-radius: 16px 16px 0 0; }
    #btn-send { width: 2.6rem; height: 2.6rem; }
    #btn-send svg { width: 1.1rem; height: 1.1rem; }
    #btn-mic-bottom { width: 2.3rem; height: 2.3rem; }
    #btn-mic-bottom svg { width: 1rem; height: 1rem; }
    /* Mobile: Kamera-Button ausblenden (AR ersetzt Kamera-Hintergrund) */
    #fab-camera { display: none !important; }

    /* Mobile: Anam Video-Avatar skaliert korrekt */
    body.anam-mode #view { position: absolute; inset: 0; }
    body.anam-mode #view #video {
      width: 100%; height: 100%; object-fit: cover;
      border-radius: 0;
    }
    body.anam-mode #main { width: 100vw !important; height: 100vh !important; border-radius: 0; aspect-ratio: auto !important; }
    body.anam-mode #fab-container { bottom: 8px !important; left: 8px !important; }
    body.anam-mode #fab-fullscreen { bottom: 8px !important; right: 8px !important; }

    /* Mobile: Tavus Video-Avatar skaliert korrekt */
    body.tavus-mode #view { position: absolute; inset: 0; }
    body.tavus-mode #main { width: 100vw !important; height: 100vh !important; border-radius: 0; }
  }