/* =========================================================
   V14 — AUTOMATIC DEVICE ADAPTATION
   Controlled by html[data-device="mobile|tablet|desktop"]
========================================================= */

:root{
  --tap-target:40px;
  --adaptive-gap:18px;
}

html[data-input="touch"]{
  --tap-target:44px;
}

html[data-input="touch"] button,
html[data-input="touch"] a,
html[data-input="touch"] select,
html[data-input="touch"] input{
  -webkit-tap-highlight-color:transparent;
}

/* Never depend on hover animations on touch screens. */
html[data-input="touch"] [data-tilt],
html[data-input="touch"] [data-tilt-lite]{
  transform:none!important;
}
html[data-input="touch"] .premium-demo:hover,
html[data-input="touch"] .v12-shot:hover,
html[data-input="touch"] .p-project:hover,
html[data-input="touch"] .f3-project:hover{
  transform:none!important;
}

/* ---------- TABLET ---------- */
html[data-device="tablet"] .hub-shell,
html[data-device="tablet"] .shell,
html[data-device="tablet"] .p-shell,
html[data-device="tablet"] .f3-shell{
  width:min(100% - 36px,1100px)!important;
}

html[data-device="tablet"] .hub-hero-v2{
  grid-template-columns:1fr .52fr!important;
  gap:38px!important;
  min-height:560px!important;
  padding:62px 0 72px!important;
}
html[data-device="tablet"] .hub-hero-copy h1{font-size:clamp(54px,7vw,78px)!important}
html[data-device="tablet"] .premium-demo-grid{grid-template-columns:1fr 1fr!important;gap:16px!important}
html[data-device="tablet"] .premium-demo{padding:14px!important;min-height:0!important}
html[data-device="tablet"] .demo-preview{height:270px!important}
html[data-device="tablet"] .demo-mini-grid{grid-template-columns:1fr 1fr!important;gap:7px!important}
html[data-device="tablet"] .mini-shot-body{height:74px!important}
html[data-device="tablet"] .hub-system-section,
html[data-device="tablet"] .hub-integration-grid{grid-template-columns:1fr!important;gap:34px!important}

/* Tablet niche pages */
html[data-device="tablet"] .p-nav,
html[data-device="tablet"] .f3-nav{padding-left:18px!important;padding-right:18px!important}
html[data-device="tablet"] .p-nav nav,
html[data-device="tablet"] .f3-nav nav{display:none!important}
html[data-device="tablet"] .p-hero-content,
html[data-device="tablet"] .f3-hero-content{
  width:min(100% - 40px,1050px)!important;
  margin-bottom:135px!important;
}
html[data-device="tablet"] .p-hero-stage,
html[data-device="tablet"] .f3-hero-stage{grid-template-columns:1fr  .82fr!important;gap:20px!important}
html[data-device="tablet"] .p-hero h1,
html[data-device="tablet"] .f3-hero h1{font-size:clamp(52px,6vw,78px)!important}
html[data-device="tablet"] .p-service-grid,
html[data-device="tablet"] .f3-service-grid,
html[data-device="tablet"] .p-material-row,
html[data-device="tablet"] .f3-material-row{grid-template-columns:1fr 1fr!important}
html[data-device="tablet"] .p-bento,
html[data-device="tablet"] .f3-bento{grid-template-columns:1fr 1fr!important;grid-template-rows:380px 320px 360px!important}
html[data-device="tablet"] .p-project-large,
html[data-device="tablet"] .f3-project-large{grid-row:span 2!important}
html[data-device="tablet"] .p-project-wide,
html[data-device="tablet"] .f3-project-wide{grid-column:1/-1!important}

/* Tablet admin: keep desktop-like layout if landscape with enough room,
   otherwise use compact bottom navigation. */
html[data-device="tablet"] .admin-app{grid-template-columns:1fr!important}
html[data-device="tablet"] .sidebar{
  display:block!important;position:fixed!important;left:14px!important;right:14px!important;
  bottom:12px!important;top:auto!important;width:auto!important;height:66px!important;z-index:450!important;
  border-radius:19px!important;padding:7px!important;background:rgba(32,43,53,.97)!important;
  backdrop-filter:blur(16px)!important;box-shadow:0 18px 50px rgba(0,0,0,.22)!important
}
html[data-device="tablet"] .sidebar .logo,
html[data-device="tablet"] .side-caption,
html[data-device="tablet"] .side-bottom{display:none!important}
html[data-device="tablet"] .side-nav{display:flex!important;gap:5px!important;overflow-x:auto!important;scrollbar-width:none!important}
html[data-device="tablet"] .nav-item{min-width:104px!important;height:52px!important;display:flex!important;gap:7px!important;justify-content:center!important;padding:8px 10px!important}
html[data-device="tablet"] .main{padding-bottom:94px!important}
html[data-device="tablet"] .dashboard-grid,
html[data-device="tablet"] .analytics-grid,
html[data-device="tablet"] .analytics-lower{grid-template-columns:1fr!important}
html[data-device="tablet"] .kanban-board{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important}
html[data-device="tablet"] .kanban-col{flex:0 0 46vw!important;scroll-snap-align:start!important}

/* Tablet bots */
html[data-device="tablet"] .intro{grid-template-columns:1fr!important;gap:35px!important}
html[data-device="tablet"] .workspace{grid-template-columns:.7fr 1.15fr!important;gap:20px!important}
html[data-device="tablet"] .lead-preview{grid-column:1/-1!important}

/* ---------- MOBILE ---------- */
html[data-device="mobile"] body{overflow-x:hidden}
html[data-device="mobile"] .hub-shell,
html[data-device="mobile"] .shell,
html[data-device="mobile"] .p-shell,
html[data-device="mobile"] .f3-shell{
  width:min(100% - 24px,720px)!important;
}

/* Hub */
html[data-device="mobile"] .hub-hero-v2{grid-template-columns:1fr!important;min-height:0!important;gap:28px!important}
html[data-device="mobile"] .premium-demo-grid{grid-template-columns:1fr!important}
html[data-device="mobile"] .hub-summary-card{width:100%!important}
html[data-device="mobile"] .demo-mini-grid{grid-template-columns:1fr 1fr!important}
html[data-device="mobile"] .hub-system-section,
html[data-device="mobile"] .hub-integration-grid{grid-template-columns:1fr!important}
html[data-device="mobile"] .hub-integration-map{grid-template-columns:1fr!important}

/* Niche pages */
html[data-device="mobile"] .p-nav nav,
html[data-device="mobile"] .f3-nav nav{display:none!important}
html[data-device="mobile"] .p-hero,
html[data-device="mobile"] .f3-hero{
  min-height:calc(var(--safe-vh,1vh) * 100)!important;
  height:auto!important;
  padding-bottom:118px!important;
}
html[data-device="mobile"] .p-hero-content,
html[data-device="mobile"] .f3-hero-content{
  width:min(100% - 24px,720px)!important;
  max-width:none!important;
  margin:96px auto 20px!important;
  padding:20px!important;
}
html[data-device="mobile"] .p-hero-stage,
html[data-device="mobile"] .f3-hero-stage{grid-template-columns:1fr!important;gap:16px!important}
html[data-device="mobile"] .p-stage-visual,
html[data-device="mobile"] .f3-stage-visual{min-height:190px!important}
html[data-device="mobile"] .p-hero-meta,
html[data-device="mobile"] .f3-hero-meta{
  left:12px!important;right:12px!important;bottom:14px!important;
  grid-template-columns:repeat(3,1fr)!important
}
html[data-device="mobile"] .p-service-grid,
html[data-device="mobile"] .f3-service-grid,
html[data-device="mobile"] .p-material-row,
html[data-device="mobile"] .f3-material-row,
html[data-device="mobile"] .p-quote-grid,
html[data-device="mobile"] .f3-quote-grid{grid-template-columns:1fr!important}
html[data-device="mobile"] .p-bento,
html[data-device="mobile"] .f3-bento{grid-template-columns:1fr!important;grid-template-rows:repeat(4,320px)!important}
html[data-device="mobile"] .p-project-large,
html[data-device="mobile"] .f3-project-large,
html[data-device="mobile"] .p-project-wide,
html[data-device="mobile"] .f3-project-wide{grid-row:auto!important;grid-column:auto!important}
html[data-device="mobile"] .p-request-grid,
html[data-device="mobile"] .f3-request-grid,
html[data-device="mobile"] .p-ai-grid,
html[data-device="mobile"] .f3-ai-grid{grid-template-columns:1fr!important}

/* Forms: stop iOS auto zoom and keep large tap targets */
html[data-device="mobile"] input,
html[data-device="mobile"] select,
html[data-device="mobile"] textarea{
  font-size:16px!important;
}
html[data-device="mobile"] button,
html[data-device="mobile"] .p-btn,
html[data-device="mobile"] .f3-btn,
html[data-device="mobile"] .mitin-contact-actions a{
  min-height:44px;
}

/* Admin becomes a mobile app with bottom navigation. */
html[data-device="mobile"] body:has(.admin-app){padding-bottom:82px!important}
html[data-device="mobile"] .admin-app{grid-template-columns:1fr!important}
html[data-device="mobile"] .sidebar{
  display:block!important;position:fixed!important;left:8px!important;right:8px!important;bottom:8px!important;
  top:auto!important;width:auto!important;height:64px!important;z-index:450!important;border-radius:18px!important;
  padding:6px!important;background:rgba(32,43,53,.98)!important;backdrop-filter:blur(16px)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.25)!important
}
html[data-device="mobile"] .sidebar .logo,
html[data-device="mobile"] .side-caption,
html[data-device="mobile"] .side-bottom{display:none!important}
html[data-device="mobile"] .side-nav{display:flex!important;overflow-x:auto!important;gap:4px!important;scrollbar-width:none!important}
html[data-device="mobile"] .side-nav::-webkit-scrollbar{display:none!important}
html[data-device="mobile"] .nav-item{
  min-width:82px!important;height:52px!important;display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;gap:3px!important;padding:5px 7px!important;font-size:9px!important
}
html[data-device="mobile"] .main{padding:20px 12px 96px!important}
html[data-device="mobile"] .top{align-items:flex-start!important;flex-direction:column!important}
html[data-device="mobile"] .top-actions{width:100%!important;flex-direction:column!important;align-items:stretch!important}
html[data-device="mobile"] .stats,
html[data-device="mobile"] .dashboard-grid,
html[data-device="mobile"] .analytics-grid,
html[data-device="mobile"] .analytics-lower,
html[data-device="mobile"] .placeholder-grid,
html[data-device="mobile"] .works-grid,
html[data-device="mobile"] .bot-grid,
html[data-device="mobile"] .settings-grid,
html[data-device="mobile"] .ai-grid{grid-template-columns:1fr!important}
html[data-device="mobile"] .toolbar{grid-template-columns:1fr!important}
html[data-device="mobile"] .kanban-board{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;gap:10px!important}
html[data-device="mobile"] .kanban-col{flex:0 0 86vw!important;scroll-snap-align:start!important}
html[data-device="mobile"] .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
html[data-device="mobile"] table{min-width:720px!important}
html[data-device="mobile"] .drawer-panel{width:100vw!important}

/* Bot simulator */
html[data-device="mobile"] .intro,
html[data-device="mobile"] .workspace{grid-template-columns:1fr!important}
html[data-device="mobile"] .system-map{grid-template-columns:1fr!important}
html[data-device="mobile"] .system-map i{transform:rotate(90deg)!important}
html[data-device="mobile"] .system-map div:nth-of-type(5),
html[data-device="mobile"] .system-map div:nth-of-type(6){grid-column:auto!important}
html[data-device="mobile"] .phone{width:min(100%,390px)!important;height:min(690px,calc(var(--safe-vh,1vh) * 82))!important}

/* ---------- MOBILE LANDSCAPE ---------- */
html[data-device="mobile"][data-orientation="landscape"] .p-hero,
html[data-device="mobile"][data-orientation="landscape"] .f3-hero{padding-bottom:20px!important}
html[data-device="mobile"][data-orientation="landscape"] .p-hero-content,
html[data-device="mobile"][data-orientation="landscape"] .f3-hero-content{
  margin-top:82px!important;
  grid-template-columns:1fr!important
}
html[data-device="mobile"][data-orientation="landscape"] .p-hero-meta,
html[data-device="mobile"][data-orientation="landscape"] .f3-hero-meta{display:none!important}
html[data-device="mobile"][data-orientation="landscape"] .phone{height:calc(var(--safe-vh,1vh) * 90)!important}

/* ---------- DESKTOP ---------- */
html[data-device="desktop"] .premium-demo-grid{grid-template-columns:repeat(2,1fr)!important}
html[data-device="desktop"] .sidebar{display:flex}

/* Accessibility / motion preference */
@media(prefers-reduced-motion:reduce){
  html *{scroll-behavior:auto!important}
}


/* V15 mobile viewport containment */
html[data-device="mobile"],html[data-device="mobile"] body{
  width:100%!important;max-width:100%!important;overflow-x:clip!important;
}
html[data-device="mobile"] .hub-shell,
html[data-device="mobile"] .shell,
html[data-device="mobile"] .p-shell,
html[data-device="mobile"] .f3-shell{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:12px!important;
  padding-right:12px!important;
  box-sizing:border-box!important;
}
html[data-device="mobile"] .premium-demo-grid,
html[data-device="mobile"] .premium-demo,
html[data-device="mobile"] .demo-preview,
html[data-device="mobile"] .preview-browser,
html[data-device="mobile"] .preview-page,
html[data-device="mobile"] .demo-mini-grid,
html[data-device="mobile"] .mini-shot{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
html[data-device="mobile"] .premium-demo-grid{width:100%!important;grid-template-columns:minmax(0,1fr)!important}
html[data-device="mobile"] .premium-demo{width:100%!important;overflow:hidden!important}
html[data-device="mobile"] .demo-mini-grid{width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media(max-width:390px){
  html[data-device="mobile"] .hub-shell,
  html[data-device="mobile"] .shell,
  html[data-device="mobile"] .p-shell,
  html[data-device="mobile"] .f3-shell{padding-left:10px!important;padding-right:10px!important}
  html[data-device="mobile"] .demo-mini-grid{grid-template-columns:minmax(0,1fr)!important}
}