/* TM-CONTACT-P08 · 23/10/2026
   Correct the actual floating transport contact components, NOT content containers.
   Contact nodes are direct siblings of <main>, <footer> under <body>.
   Old home theme draws two white shells (aside + ul) and changes breakpoint at 900px;
   the visible panel must have ONE surface and mobile bar must attach to viewport.
*/

/* Desktop/tablet: one compact contact rail. No second outer box. */
@media (min-width:768px) {
  body.transport-native.tm07-ui > aside.txng-contact-pc {
    display:block!important;
    position:fixed!important;
    top:50%!important;
    right:10px!important;
    bottom:auto!important;
    left:auto!important;
    width:64px!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
    transform:translateY(-50%)!important;
    z-index:9800!important;
  }
  body.transport-native.tm07-ui > aside.txng-contact-pc > ul {
    display:flex!important;
    flex-direction:column!important;
    gap:2px!important;
    width:64px!important;
    max-height:calc(100dvh - 32px)!important;
    margin:0!important;
    padding:5px!important;
    list-style:none!important;
    border:1px solid #dce7ef!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 8px 26px rgba(15,52,83,.16)!important;
    overflow:visible!important;
  }
  body.transport-native.tm07-ui > aside.txng-contact-pc > ul > li {
    display:block!important;
    margin:0!important;
    padding:0!important;
    min-width:0!important;
    width:100%!important;
    flex:none!important;
  }
  body.transport-native.tm07-ui > aside.txng-contact-pc > ul > li > :is(a,button) {
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    position:relative!important;
    width:52px!important;
    height:49px!important;
    min-height:49px!important;
    max-height:49px!important;
    min-width:0!important;
    margin:0!important;
    padding:4px!important;
    border:0!important;
    border-radius:11px!important;
    background:transparent!important;
    box-shadow:none!important;
    text-decoration:none!important;
    overflow:visible!important;
    cursor:pointer;
  }
  body.transport-native.tm07-ui > aside.txng-contact-pc > ul > li > :is(a,button):hover,
  body.transport-native.tm07-ui > aside.txng-contact-pc > ul > li > :is(a,button):focus-visible {
    background:#edf7ff!important;
    box-shadow:none!important;
    outline-offset:1px;
  }
  body.transport-native.tm07-ui > aside.txng-contact-pc > ul > li > :is(a,button) > span {
    display:grid!important;
    place-items:center!important;
    width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  body.transport-native.tm07-ui > aside.txng-contact-pc > ul > li > :is(a,button) img {
    display:block!important;
    width:38px!important;
    height:38px!important;
    max-width:38px!important;
    max-height:38px!important;
    object-fit:contain!important;
  }
  /* Desktop labels remain accessible as hover/focus tooltips. */
  body.transport-native.tm07-ui > aside.txng-contact-pc b {
    position:absolute!important;
    top:50%!important;
    right:60px!important;
    width:max-content!important;
    height:auto!important;
    padding:7px 10px!important;
    border-radius:8px!important;
    color:#fff!important;
    background:#0d315d!important;
    font-size:12px!important;
    line-height:1.2!important;
    text-align:center!important;
    visibility:hidden!important;
    opacity:0!important;
    transform:translate(5px,-50%)!important;
    pointer-events:none!important;
  }
  body.transport-native.tm07-ui > aside.txng-contact-pc :is(a,button):is(:hover,:focus-visible) b {
    opacity:1!important;
    visibility:visible!important;
    transform:translate(0,-50%)!important;
  }
  body.transport-native.tm07-ui > nav.txng-contact-mobile {display:none!important;}
  body.transport-native.tm07-ui > .txng-contact-sheet,
  body.transport-native.tm07-ui > .txng-contact-backdrop {display:none!important;}
}
/* Very short desktop viewports: rail scrolls internally, never clips the labels. */
@media (min-width:768px) and (max-height:500px) {
  body.transport-native.tm07-ui > aside.txng-contact-pc > ul {
    max-height:calc(100dvh - 24px)!important;
    overflow-y:auto!important;
    scrollbar-width:thin;
  }
}

/* Mobile: one edge-to-edge bar fixed to actual viewport, not to 1280px shell. */
@media (max-width:767.98px) {
  body.transport-native.tm07-ui {
    padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;
  }
  body.transport-native.tm07-ui > aside.txng-contact-pc {display:none!important;}
  body.transport-native.tm07-ui > nav.txng-contact-mobile {
    display:block!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    padding:0 0 env(safe-area-inset-bottom,0px)!important;
    margin:0!important;
    border:0!important;
    border-top:1px solid #dce7ef!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:0 -5px 18px rgba(15,52,83,.12)!important;
    transform:none!important;
    overflow:visible!important;
    z-index:10020!important;
    isolation:isolate;
  }
  body.transport-native.tm07-ui > nav.txng-contact-mobile > .txng-contact-mobile__inner {
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:center!important;
    justify-items:stretch!important;
    gap:0!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:72px!important;
    margin:0!important;
    padding:8px max(6px,env(safe-area-inset-right,0px)) 6px max(6px,env(safe-area-inset-left,0px))!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  body.transport-native.tm07-ui > nav.txng-contact-mobile .txng-contact-mobile__item {
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:3px!important;
    min-width:0!important;
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    margin:0!important;
    padding:0 1px 2px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#173b57!important;
    font-size:11px!important;
    font-weight:700!important;
    line-height:1.15!important;
    text-align:center!important;
    text-decoration:none!important;
    overflow:visible!important;
    white-space:nowrap;
  }
  body.transport-native.tm07-ui > nav.txng-contact-mobile .txng-contact-mobile__icon {
    display:grid!important;
    place-items:center!important;
    width:35px!important;
    height:35px!important;
    min-width:35px!important;
    min-height:35px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
    overflow:visible!important;
  }
  body.transport-native.tm07-ui > nav.txng-contact-mobile .txng-contact-mobile__icon img {
    display:block!important;
    width:34px!important;
    height:34px!important;
    max-width:34px!important;
    max-height:34px!important;
    object-fit:contain!important;
  }
  /* Main Call icon is slightly elevated but remains inside the compact bar. */
  body.transport-native.tm07-ui > nav.txng-contact-mobile .txng-contact-mobile__call-icon {
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    margin:-12px 0 0!important;
    border:3px solid #fff!important;
    background:#fff!important;
    box-shadow:0 2px 10px rgba(17,65,92,.14)!important;
    transform:none!important;
  }
  body.transport-native.tm07-ui > nav.txng-contact-mobile .txng-contact-mobile__call-icon img {
    width:43px!important;
    height:43px!important;
    max-width:43px!important;
    max-height:43px!important;
  }
  body.transport-native.tm07-ui > nav.txng-contact-mobile .txng-contact-mobile__call > span:last-child {
    margin:0!important;
    line-height:1.15!important;
  }
  body.transport-native.tm07-ui > .txng-contact-backdrop {
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:10030!important;
  }
  body.transport-native.tm07-ui > .txng-contact-sheet {
    display:block!important;
    position:fixed!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    z-index:10040!important;
    max-width:none!important;
    margin:0!important;
  }
}
@media (prefers-reduced-motion:reduce){
  body.transport-native.tm07-ui > aside.txng-contact-pc :is(a,button),
  body.transport-native.tm07-ui > .txng-contact-sheet{transition:none!important}
}