/* Hamrah G119B Dev1 R8.1 — Telegram shared-element media viewer.
   Compatibility filename/classes remain R7 so Windows R7 interaction recovery keeps one owner. */

button.g119b-r7-inline-media,
button.g119b-r81-inline-media{
  --g119b-r7-inline-aspect:1;
  --g119b-r81-inline-width:360px;
  --g119b-r81-inline-height:360px;
  appearance:none!important;
  -webkit-appearance:none!important;
  position:relative!important;
  display:block!important;
  inline-size:min(var(--g119b-r81-inline-width),82vw)!important;
  block-size:auto!important;
  aspect-ratio:var(--g119b-r7-inline-aspect)!important;
  max-inline-size:100%!important;
  padding:0!important;
  border:0!important;
  border-radius:16px!important;
  overflow:hidden!important;
  background:#0b1722!important;
  cursor:zoom-in!important;
  line-height:0!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  contain:layout paint!important;
  -webkit-app-region:no-drag!important;
}

button.g119b-r7-inline-media[data-g119b-r7-orientation="portrait"],
button.g119b-r81-inline-media[data-g119b-r7-orientation="portrait"]{
  max-inline-size:min(330px,76vw)!important;
}

button.g119b-r7-inline-media[data-g119b-r7-orientation="landscape"],
button.g119b-r81-inline-media[data-g119b-r7-orientation="landscape"]{
  max-inline-size:min(460px,84vw)!important;
}

button.g119b-r7-inline-media > img,
button.g119b-r81-inline-media > img{
  display:block!important;
  inline-size:100%!important;
  block-size:100%!important;
  max-inline-size:none!important;
  max-block-size:none!important;
  margin:0!important;
  border-radius:inherit!important;
  object-fit:cover!important;
  object-position:center!important;
  background:transparent!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}

button.g119b-r7-inline-media[data-g119b-r7-orientation="portrait"] > img,
button.g119b-r81-inline-media[data-g119b-r7-orientation="portrait"] > img{
  object-position:center top!important;
}

.bubble:has(> button.g119b-r7-inline-media),
.bubble:has(> button.g119b-r81-inline-media),
.bubble.g119b-r5-media-bubble:has(> button.g119b-r7-inline-media),
.bubble.g119b-r5-media-bubble:has(> button.g119b-r81-inline-media){
  inline-size:auto!important;
  max-inline-size:min(94vw,470px)!important;
  padding:3px!important;
  overflow:hidden!important;
  background:transparent!important;
}

@media(max-width:820px){
  button.g119b-r7-inline-media,
  button.g119b-r81-inline-media{
    inline-size:min(var(--g119b-r81-inline-width),82vw)!important;
    max-inline-size:82vw!important;
  }

  button.g119b-r7-inline-media[data-g119b-r7-orientation="portrait"],
  button.g119b-r81-inline-media[data-g119b-r7-orientation="portrait"]{
    max-inline-size:74vw!important;
  }
}

/* Do not lock/offset the chat document. The fixed viewer owns input instead,
   preventing the underlying chat from jumping when opening media. */
body.g119b-r7-media-open,
body.g119b-r81-media-open{
  overscroll-behavior:none!important;
}

/* Single viewer root. */
.g119b-r7-media-viewer,
.g119b-r81-media-viewer{
  --g119b-r81-swipe-x:0px;
  --g119b-r81-dismiss-y:0px;
  --g119b-r81-dismiss-opacity:1;
  position:fixed!important;
  inset:0!important;
  z-index:12000!important;
  display:block!important;
  overflow:hidden!important;
  background:transparent!important;
  color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  touch-action:none!important;
  isolation:isolate!important;
  -webkit-app-region:no-drag!important;
}

.g119b-r7-media-viewer.hidden,
.g119b-r7-media-viewer[aria-hidden="true"],
.g119b-r81-media-viewer.hidden,
.g119b-r81-media-viewer[aria-hidden="true"]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

.g119b-r7-media-backdrop,
.g119b-r81-media-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  background:#000!important;
  opacity:1;
  pointer-events:none!important;
  will-change:opacity!important;
}

/* Transition layer owns only shared-element motion. It never receives zoom/pan. */
.g119b-r81-transition-stage{
  position:fixed!important;
  inset:0!important;
  z-index:5!important;
  overflow:visible!important;
  pointer-events:none!important;
  contain:strict!important;
}

.g119b-r81-transition-image{
  position:fixed!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:#08111a!important;
  object-fit:cover!important;
  object-position:center!important;
  transform-origin:center center!important;
  will-change:left,top,width,height,transform,opacity,border-radius!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  box-shadow:0 14px 48px rgba(0,0,0,.26)!important;
}

.g119b-r81-transition-image.hidden{
  display:none!important;
}

/* Interactive stage is separate from transition geometry. */
.g119b-r7-media-stage,
.g119b-r81-media-stage{
  position:fixed!important;
  inset:0!important;
  z-index:2!important;
  overflow:hidden!important;
  touch-action:none!important;
  cursor:zoom-in!important;
  pointer-events:auto!important;
}

.g119b-r81-media-viewport{
  position:fixed!important;
  left:50%;
  top:50%;
  width:1px;
  height:1px;
  z-index:2!important;
  display:block!important;
  opacity:0!important;
  transform:
    translate3d(
      var(--g119b-r81-swipe-x),
      var(--g119b-r81-dismiss-y),
      0
    )!important;
  pointer-events:none!important;
  will-change:left,top,width,height,opacity,transform!important;
}

.g119b-r81-media-viewport.g119b-r81-media-visible{
  opacity:1!important;
}

.g119b-r81-media-transform{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  transform:translate3d(0,0,0) scale(1);
  transform-origin:center center!important;
  will-change:transform!important;
  pointer-events:none!important;
}

.g119b-r7-media-viewer[data-zoomed="true"] .g119b-r7-media-stage,
.g119b-r81-media-viewer[data-zoomed="true"] .g119b-r81-media-stage{
  cursor:grab!important;
}

.g119b-r7-media-stage:active,
.g119b-r81-media-stage:active{
  cursor:grabbing!important;
}

.g119b-r7-media-image,
.g119b-r81-media-image{
  display:block!important;
  inline-size:100%!important;
  block-size:100%!important;
  max-inline-size:100vw!important;
  max-block-size:100dvh!important;
  object-fit:contain!important;
  object-position:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  pointer-events:none!important;
}

/* Floating chrome remains secondary to the media. */
.g119b-r7-media-toolbar,
.g119b-r81-media-toolbar{
  position:fixed!important;
  z-index:10!important;
  top:0!important;
  inset-inline:0!important;
  min-block-size:64px!important;
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  padding:
    max(10px,env(safe-area-inset-top))
    max(12px,env(safe-area-inset-right))
    16px
    max(12px,env(safe-area-inset-left))!important;
  background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.22) 70%,transparent)!important;
  opacity:1!important;
  transform:none!important;
  transition:opacity .16s ease,transform .16s ease!important;
  pointer-events:none!important;
  -webkit-app-region:no-drag!important;
}

.g119b-r7-media-copy{
  flex:1 1 auto!important;
  min-inline-size:0!important;
  display:grid!important;
  gap:2px!important;
  padding-block:5px!important;
  text-shadow:0 1px 8px rgba(0,0,0,.72)!important;
  pointer-events:none!important;
}

.g119b-r7-media-copy strong,
.g119b-r7-media-copy small{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.g119b-r7-media-copy strong{
  font-size:13px!important;
  font-weight:800!important;
}

.g119b-r7-media-copy small{
  font-size:10px!important;
  opacity:.74!important;
}

.g119b-r7-media-actions{
  display:flex!important;
  gap:6px!important;
  pointer-events:auto!important;
}

.g119b-r7-media-icon{
  min-inline-size:38px!important;
  block-size:38px!important;
  display:grid!important;
  place-items:center!important;
  padding:0 9px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:999px!important;
  background:rgba(20,24,30,.54)!important;
  color:#fff!important;
  box-shadow:0 4px 20px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  -webkit-app-region:no-drag!important;
}

.g119b-r7-media-reset{
  min-inline-size:54px!important;
  font-size:11px!important;
}

.g119b-r7-media-nav{
  position:fixed!important;
  z-index:9!important;
  top:50%!important;
  inline-size:44px!important;
  block-size:56px!important;
  display:grid!important;
  place-items:center!important;
  transform:translateY(-50%)!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:999px!important;
  background:rgba(14,18,24,.42)!important;
  color:#fff!important;
  font-size:32px!important;
  line-height:1!important;
  opacity:.9!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  cursor:pointer!important;
  transition:opacity .16s ease,transform .16s ease!important;
  -webkit-app-region:no-drag!important;
}

.g119b-r7-media-nav.previous{
  inset-inline-start:max(10px,env(safe-area-inset-left))!important;
}

.g119b-r7-media-nav.next{
  inset-inline-end:max(10px,env(safe-area-inset-right))!important;
}

.g119b-r7-media-nav:disabled{
  opacity:0!important;
  pointer-events:none!important;
}

.g119b-r7-media-footer,
.g119b-r81-media-footer{
  position:fixed!important;
  z-index:10!important;
  inset-inline:0!important;
  bottom:0!important;
  min-block-size:34px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  padding:
    8px
    max(12px,env(safe-area-inset-right))
    max(10px,env(safe-area-inset-bottom))
    max(12px,env(safe-area-inset-left))!important;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent)!important;
  color:rgba(255,255,255,.78)!important;
  font-size:11px!important;
  pointer-events:none!important;
  transition:opacity .16s ease,transform .16s ease!important;
}

.g119b-r7-media-loading,
.g119b-r7-media-error{
  position:fixed!important;
  z-index:7!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  max-inline-size:min(86vw,360px)!important;
  padding:10px 14px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:999px!important;
  background:rgba(15,19,25,.68)!important;
  color:#fff!important;
  font-size:12px!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  pointer-events:none!important;
}

.g119b-r7-media-error{
  border-radius:16px!important;
  pointer-events:auto!important;
}

.g119b-r7-media-error button{
  border:0!important;
  border-radius:999px!important;
  padding:7px 11px!important;
  background:rgba(255,255,255,.12)!important;
  color:#fff!important;
  cursor:pointer!important;
}

.g119b-r7-media-loading.hidden,
.g119b-r7-media-error.hidden{
  display:none!important;
}

.g119b-r7-media-viewer[data-loading="true"] .g119b-r7-media-image{
  opacity:0!important;
}

.g119b-r7-media-viewer[data-controls="hidden"] .g119b-r7-media-toolbar{
  opacity:0!important;
  transform:translateY(-8px)!important;
  pointer-events:none!important;
}

.g119b-r7-media-viewer[data-controls="hidden"] .g119b-r7-media-nav,
.g119b-r7-media-viewer[data-controls="hidden"] .g119b-r7-media-footer{
  opacity:0!important;
  pointer-events:none!important;
}

.g119b-r7-media-viewer[data-phase="preparing"] .g119b-r7-media-toolbar,
.g119b-r7-media-viewer[data-phase="opening"] .g119b-r7-media-toolbar,
.g119b-r7-media-viewer[data-phase="preparing"] .g119b-r7-media-nav,
.g119b-r7-media-viewer[data-phase="opening"] .g119b-r7-media-nav,
.g119b-r7-media-viewer[data-phase="preparing"] .g119b-r7-media-footer,
.g119b-r7-media-viewer[data-phase="opening"] .g119b-r7-media-footer{
  opacity:0!important;
  pointer-events:none!important;
}

html[data-hamrah-desktop="windows"] .g119b-r7-media-icon,
html[data-hamrah-desktop="windows"] .g119b-r7-media-nav,
html[data-hamrah-desktop="windows"] .attachment-image-button,
html[data-hamrah-desktop="windows"] .g7-media-card{
  -webkit-app-region:no-drag!important;
  pointer-events:auto!important;
}

@media(max-width:820px){
  .g119b-r7-media-toolbar,
  .g119b-r81-media-toolbar{
    min-block-size:56px!important;
    padding:
      max(8px,env(safe-area-inset-top))
      max(8px,env(safe-area-inset-right))
      12px
      max(8px,env(safe-area-inset-left))!important;
  }

  .g119b-r7-media-copy{
    display:none!important;
  }

  .g119b-r7-media-nav{
    inline-size:38px!important;
    block-size:48px!important;
    font-size:28px!important;
  }

  .g119b-r7-media-nav.previous{
    inset-inline-start:max(5px,env(safe-area-inset-left))!important;
  }

  .g119b-r7-media-nav.next{
    inset-inline-end:max(5px,env(safe-area-inset-right))!important;
  }

  .g119b-r7-media-icon{
    min-inline-size:36px!important;
    block-size:36px!important;
  }

  .g119b-r7-media-reset{
    min-inline-size:50px!important;
  }
}

@media(max-width:430px){
  .g119b-r7-media-actions{
    gap:4px!important;
  }

  #g119bR7MediaOriginal{
    display:none!important;
  }

  .g119b-r7-media-nav{
    opacity:.76!important;
  }
}

@media(orientation:landscape) and (max-height:560px){
  .g119b-r7-media-toolbar,
  .g119b-r81-media-toolbar{
    min-block-size:48px!important;
    padding-block:max(5px,env(safe-area-inset-top)) 8px!important;
  }

  .g119b-r7-media-footer,
  .g119b-r81-media-footer{
    min-block-size:28px!important;
    padding-bottom:max(6px,env(safe-area-inset-bottom))!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .g119b-r7-media-toolbar,
  .g119b-r7-media-nav,
  .g119b-r7-media-footer,
  .g119b-r81-transition-image,
  .g119b-r81-media-viewport{
    transition:none!important;
    animation:none!important;
  }
}

/* =====================================================================
   Hamrah G119B Dev1 R8.1 Inline Geometry Explicit Box Hotfix3
   Physical QA fix: Hotfix1 combined a shrink-to-fit bubble with child
   percentage sizing. That created a circular inline-size dependency and
   could collapse the chat thumbnail to a thin line.
   R8.1 JS already computes exact safe width and height values. Once those
   values are ready, this CSS consumes both dimensions directly.
   ===================================================================== */

button.attachment-image-button.g119b-r81-inline-media[data-g119b-r81-media-ready="true"],
button.g7-media-card.g119b-r81-inline-media[data-g119b-r81-media-ready="true"],
button.g119b-r4-media-frame.g119b-r81-inline-media[data-g119b-r81-media-ready="true"],
button.g119b-r2-media-frame.g119b-r81-inline-media[data-g119b-r81-media-ready="true"]{
  box-sizing:border-box!important;
  inline-size:var(--g119b-r81-inline-width)!important;
  block-size:var(--g119b-r81-inline-height)!important;
  width:var(--g119b-r81-inline-width)!important;
  height:var(--g119b-r81-inline-height)!important;
  min-inline-size:0!important;
  min-block-size:0!important;
  min-width:0!important;
  min-height:0!important;
  max-inline-size:none!important;
  max-block-size:none!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:var(--g119b-r7-inline-aspect)!important;
  flex:none!important;
  margin:0!important;
}

button.attachment-image-button.g119b-r81-inline-media > img,
button.g7-media-card.g119b-r81-inline-media > img,
button.g119b-r4-media-frame.g119b-r81-inline-media > img,
button.g119b-r2-media-frame.g119b-r81-inline-media > img{
  display:block!important;
  inline-size:100%!important;
  block-size:100%!important;
  width:100%!important;
  height:100%!important;
  max-inline-size:none!important;
  max-block-size:none!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center!important;
}

.bubble.g119b-r5-media-bubble:has(> button.attachment-image-button.g119b-r81-inline-media),
.bubble.g119b-r5-media-bubble:has(> button.g7-media-card.g119b-r81-inline-media),
.bubble:has(> button.attachment-image-button.g119b-r81-inline-media),
.bubble:has(> button.g7-media-card.g119b-r81-inline-media){
  inline-size:fit-content!important;
  min-inline-size:0!important;
  max-inline-size:min(94vw,470px)!important;
  padding:3px!important;
  overflow:hidden!important;
}