/*
 * MISTER FAST LiveMapChat WEB — Theme V1.5 Animation + Responsive
 * Visual-only enhancement layer.
 * Does not change API, map/chat/driver logic, role, session, drag, dock,
 * resize, open/close, filtering, or data sources.
 */
body.mf-animation-responsive-v15{
  --mf15-ease:cubic-bezier(.2,.75,.25,1);
  --mf15-fast:140ms;
  --mf15-normal:220ms;
  --mf15-slow:320ms;
  --mf15-focus:0 0 0 3px rgba(255,196,0,.34);
}

/* Smooth interaction without changing component geometry */
body.mf-animation-responsive-v15 :where(button,a,input,select,textarea){
  -webkit-tap-highlight-color:transparent;
}
body.mf-animation-responsive-v15 :where(button,a,[role="button"]){
  transition-property:background-color,border-color,color,box-shadow,opacity;
  transition-duration:var(--mf15-fast);
  transition-timing-function:var(--mf15-ease);
}
body.mf-animation-responsive-v15 :where(input,select,textarea):focus-visible,
body.mf-animation-responsive-v15 :where(button,a,[role="button"]):focus-visible{
  outline:2px solid transparent!important;
  box-shadow:var(--mf15-focus)!important;
}

/* Gentle entry animation. No transform on floating chat because position is JS-controlled. */
body.mf-animation-responsive-v15 .mf514-map-toolbar,
body.mf-animation-responsive-v15 .mf534-map-toolbar{
  animation:mf15FadeIn var(--mf15-slow) var(--mf15-ease) both;
}
body.mf-animation-responsive-v15 .mf328-feed-shell,
body.mf-animation-responsive-v15 .mf3306-feed-shell,
body.mf-animation-responsive-v15 .mf-driver-feed-shell{
  animation:mf15FadeIn var(--mf15-slow) var(--mf15-ease) 70ms both;
}
body.mf-animation-responsive-v15 .mf514-chat-pane{
  animation:mf15ChatIn var(--mf15-slow) var(--mf15-ease) 90ms both;
}

/* Live status is visible but calm */
body.mf-animation-responsive-v15 :where(.is-online,.mf-status-online,.mf328-online,.mf3306-online) i,
body.mf-animation-responsive-v15 :where(.is-online,.mf-status-online,.mf328-online,.mf3306-online)::before{
  animation:mf15StatusPulse 2.4s ease-in-out infinite;
}

/* Cards and main actions: small feedback only, no layout jump */
@media (hover:hover) and (pointer:fine){
  body.mf-animation-responsive-v15 :where(.mf328-driver-card,.mf3306-driver-card,.mf-driver-card):hover{
    border-color:rgba(0,61,165,.30)!important;
    box-shadow:0 12px 28px rgba(0,43,117,.12)!important;
  }
  body.mf-animation-responsive-v15 :where(.mf328-driver-card,.mf3306-driver-card,.mf-driver-card) button:hover,
  body.mf-animation-responsive-v15 .mf534-routebar button:hover{
    filter:saturate(1.04);
  }
}

/* Touch targets for non-technical and older users */
@media (pointer:coarse){
  body.mf-animation-responsive-v15 :where(button,a,[role="button"]){
    min-height:44px;
  }
  body.mf-animation-responsive-v15 input,
  body.mf-animation-responsive-v15 select{
    min-height:46px;
    font-size:16px!important;
  }
}

/* Large desktop: prevent over-wide controls while keeping long feed */
@media (min-width:1440px){
  body.mf-animation-responsive-v15 .mf514-map-toolbar,
  body.mf-animation-responsive-v15 .mf534-map-toolbar{
    padding-left:22px!important;
    padding-right:22px!important;
  }
  body.mf-animation-responsive-v15 :where(.mf328-feed-grid,.mf3306-feed-grid,.mf-driver-feed-grid){
    gap:14px!important;
  }
}

/* Compact desktop / notebook */
@media (max-width:1180px){
  body.mf-animation-responsive-v15 .mf514-map-toolbar,
  body.mf-animation-responsive-v15 .mf534-map-toolbar{
    grid-template-columns:minmax(170px,.7fr) minmax(360px,1.6fr) auto!important;
    gap:10px!important;
    min-height:92px!important;
    padding:11px 13px!important;
  }
  body.mf-animation-responsive-v15 .mf534-map-title b{
    font-size:21px!important;
  }
  body.mf-animation-responsive-v15 .mf534-routebar button{
    min-height:62px!important;
    border-radius:15px!important;
  }
}

/* Tablet: stack map dashboard controls, keep feed readable, chat remains controlled by existing JS */
@media (max-width:900px){
  body.mf-animation-responsive-v15{
    overflow-x:hidden;
  }
  body.mf-animation-responsive-v15 .mf514-map-toolbar,
  body.mf-animation-responsive-v15 .mf534-map-toolbar{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:9px!important;
    min-height:auto!important;
    padding:10px!important;
  }
  body.mf-animation-responsive-v15 .mf534-map-title{
    padding:2px 2px 0!important;
  }
  body.mf-animation-responsive-v15 .mf534-map-title b{
    font-size:20px!important;
  }
  body.mf-animation-responsive-v15 .mf514-routebar,
  body.mf-animation-responsive-v15 .mf534-routebar{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;
  }
  body.mf-animation-responsive-v15 .mf534-routebar button{
    min-height:58px!important;
    grid-template-columns:32px minmax(0,1fr)!important;
    padding:8px!important;
  }
  body.mf-animation-responsive-v15 .mf534-routebar button>span{
    width:32px!important;
    height:32px!important;
  }
  body.mf-animation-responsive-v15 .mf514-kpis{
    width:100%!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  body.mf-animation-responsive-v15 .mf514-kpis>span{
    min-width:0!important;
    min-height:54px!important;
  }
  body.mf-animation-responsive-v15 .mf532-radius-panel{
    width:min(340px,calc(100% - 20px))!important;
    border-radius:17px!important;
  }
}

/* Phones: prioritize large, understandable controls and single-column driver feed */
@media (max-width:640px){
  body.mf-animation-responsive-v15 .mf514-map-toolbar,
  body.mf-animation-responsive-v15 .mf534-map-toolbar{
    padding:8px!important;
  }
  body.mf-animation-responsive-v15 .mf534-map-title b{
    font-size:18px!important;
  }
  body.mf-animation-responsive-v15 .mf534-map-title small{
    font-size:11px!important;
  }
  body.mf-animation-responsive-v15 .mf514-routebar,
  body.mf-animation-responsive-v15 .mf534-routebar{
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  body.mf-animation-responsive-v15 .mf534-routebar button{
    min-height:52px!important;
    grid-template-columns:36px minmax(0,1fr)!important;
  }
  body.mf-animation-responsive-v15 .mf534-routebar button>span{
    width:36px!important;
    height:36px!important;
  }
  body.mf-animation-responsive-v15 .mf514-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }
  body.mf-animation-responsive-v15 .mf514-kpis>span{
    padding:7px 5px!important;
    border-radius:13px!important;
  }
  body.mf-animation-responsive-v15 .mf514-kpis b{
    font-size:18px!important;
  }
  body.mf-animation-responsive-v15 .mf514-kpis small{
    font-size:8px!important;
  }
  body.mf-animation-responsive-v15 :where(.mf328-feed-grid,.mf3306-feed-grid,.mf-driver-feed-grid){
    grid-template-columns:1fr!important;
  }
  body.mf-animation-responsive-v15 :where(.mf328-driver-actions,.mf3306-driver-actions,.mf-driver-actions){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  body.mf-animation-responsive-v15 :where(.mf328-driver-actions,.mf3306-driver-actions,.mf-driver-actions) button,
  body.mf-animation-responsive-v15 :where(.mf328-driver-actions,.mf3306-driver-actions,.mf-driver-actions) a{
    width:100%!important;
    min-width:0!important;
    justify-content:center!important;
  }
  body.mf-animation-responsive-v15 .mf532-radius-panel{
    left:10px!important;
    right:10px!important;
    width:auto!important;
    padding:12px!important;
  }
}

/* Very small phone */
@media (max-width:380px){
  body.mf-animation-responsive-v15 .mf514-kpis{
    grid-template-columns:1fr!important;
  }
  body.mf-animation-responsive-v15 .mf514-kpis>span{
    min-height:46px!important;
    flex-direction:row!important;
    gap:7px!important;
  }
}

/* Accessibility and stability */
@media (prefers-reduced-motion:reduce){
  body.mf-animation-responsive-v15 *,
  body.mf-animation-responsive-v15 *::before,
  body.mf-animation-responsive-v15 *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

@keyframes mf15FadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes mf15ChatIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes mf15StatusPulse{
  0%,100%{opacity:1}
  50%{opacity:.55}
}