/* Standard landscape room: persistent left avatar, right content rail.
   This is intentionally scoped to the standard MainShell DOM and only
   activates on a genuinely wide landscape viewport. */
@media (orientation: landscape) and (min-width: 1100px) {
  #root > .relative.h-full.min-h-0 > .flex.h-full.min-h-0.flex-col > .relative.flex.min-h-0.flex-1.gap-4.p-4 {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 16px !important;
    overflow: hidden !important;
  }

  #root > .relative.h-full.min-h-0 > .flex.h-full.min-h-0.flex-col > .relative.flex.min-h-0.flex-1.gap-4.p-4 > .relative.h-full.min-w-0,
  #root > .relative.h-full.min-h-0 > .flex.h-full.min-h-0.flex-col > .relative.flex.min-h-0.flex-1.gap-4.p-4 > .absolute.bottom-4.left-4 {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 31% !important;
    width: 31% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: var(--surface) !important;
    box-shadow: 0 24px 70px -42px rgba(0,0,0,.8) !important;
    z-index: 1 !important;
  }

  #root > .relative.h-full.min-h-0 > .flex.h-full.min-h-0.flex-col > .relative.flex.min-h-0.flex-1.gap-4.p-4 > .relative.min-w-0.flex-1 {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: var(--surface) !important;
  }

  #root > .relative.h-full.min-h-0 > .flex.h-full.min-h-0.flex-col > .relative.flex.min-h-0.flex-1.gap-4.p-4 > .relative.h-full.min-w-0 > div,
  #root > .relative.h-full.min-h-0 > .flex.h-full.min-h-0.flex-col > .relative.flex.min-h-0.flex-1.gap-4.p-4 > .absolute.bottom-4.left-4 > div,
  #root > .relative.h-full.min-h-0 > .flex.h-full.min-h-0.flex-col > .relative.flex.min-h-0.flex-1.gap-4.p-4 video {
    max-height: 100% !important;
  }

  #root > .relative.h-full.min-h-0 > .flex.h-full.min-h-0.flex-col > .relative.flex.min-h-0.flex-1.gap-4.p-4 video {
    object-fit: cover !important;
    object-position: center top !important;
  }
}