/* KalyxAI — mobile responsive layer
   Loaded globally by Nginx. Desktop styles remain unchanged. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:0;max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%}
button,a,input,select,textarea{touch-action:manipulation}

@media (max-width:900px){
  :root{--mobile-gutter:14px}
  .container{width:min(100% - 28px,760px)!important}
  .site-header,.app-header,.connectors-header{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

  /* Public header */
  .site-header{position:sticky!important;top:0!important}
  .site-header .nav{min-height:62px!important;height:62px!important;gap:8px!important}
  .site-header .brand{min-width:0;flex:0 0 auto}
  .site-header .brand-logo{width:34px!important;height:34px!important;flex:0 0 34px}
  .site-header .header-tools{min-width:0;gap:6px!important;margin-left:auto;justify-content:flex-end}
  .site-header .home-nav-link{display:none!important}
  .site-header .language-control select,.site-header .theme-toggle,.site-header .login-link,.site-header .chat-link{height:40px!important;min-height:40px!important}
  .site-header .language-control select{width:54px!important;padding:0 5px!important}
  .site-header .theme-toggle{width:40px!important;min-width:40px!important}
  .site-header .chat-link{padding-inline:11px!important;white-space:nowrap}

  /* Workspace switcher on the homepage */
  #workspace-switcher{position:relative;min-width:0}
  #workspace-toggle{min-height:40px!important;height:40px!important;max-width:132px;padding:0 10px!important;white-space:nowrap}
  #workspace-menu{position:fixed!important;left:var(--mobile-gutter)!important;right:var(--mobile-gutter)!important;top:70px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 84px);overflow:auto;z-index:9999!important}

  /* Homepage */
  .home-hero{padding:44px 0 64px!important}
  .home-hero-grid{grid-template-columns:minmax(0,1fr)!important;gap:34px!important}
  .home-copy{max-width:none!important}
  .home-copy h1{font-size:clamp(44px,12.4vw,66px)!important;line-height:.94!important;letter-spacing:-.065em!important;margin:20px 0!important;overflow-wrap:anywhere}
  .home-copy>p{font-size:16px!important;line-height:1.58!important}
  .hero-actions{gap:12px!important;margin-top:26px!important;flex-wrap:wrap}
  .hero-actions .button,.hero-actions .home-secondary{min-height:48px}
  .hero-trust{line-height:1.5}
  .home-preview{min-height:0!important;width:100%!important}
  .preview-window{width:100%!important;min-height:0!important;transform:none!important;border-radius:22px!important}
  .preview-content{padding:24px 20px!important}
  .preview-content h2{font-size:clamp(28px,8vw,36px)!important;margin-bottom:24px!important}
  .preview-top{padding-inline:18px!important}
  .workspace-banner-inner{grid-template-columns:1fr!important;gap:22px!important}
  .workspace-cards{grid-template-columns:1fr!important;width:100%!important}
  .workspace-card{width:100%!important}
  .home-section{padding:72px 0!important}
  .home-section-intro{grid-template-columns:1fr!important;gap:18px!important;margin-bottom:34px!important}
  .home-section-intro h2,.security-grid h2{font-size:clamp(36px,10vw,52px)!important;line-height:1!important}
  .feature-bento{grid-template-columns:1fr!important}
  .feature-card,.feature-main,.feature-wide{grid-column:1!important;grid-row:auto!important;min-height:0!important;padding:24px!important}
  .feature-wide{display:block!important}
  .security-grid{grid-template-columns:1fr!important;gap:28px!important}
  .security-content>p{font-size:15px!important;margin:18px 0 28px!important}
  .security-points{grid-template-columns:1fr!important}
  .security-points div{border-right:0!important;padding:16px 0!important;border-bottom:1px solid color-mix(in srgb,var(--accent-2) 12%,var(--line))}
  .security-points div:last-child{border-bottom:0}
  .cta-box{flex-direction:column!important;align-items:stretch!important;padding:30px 24px!important;gap:26px!important}
  .cta-box h2{font-size:clamp(36px,10vw,52px)!important}
  .cta-actions{align-items:stretch!important;flex-direction:column!important;gap:12px!important}
  .cta-actions .button{justify-content:center}
  .footer .footer-inner{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:17px!important}
  .footer-legal{justify-content:flex-start!important;gap:10px 14px!important}

  /* Shared app pages */
  .app-header{min-height:62px!important;height:62px!important;padding:0 12px!important;gap:8px!important}
  .app-header .brand{min-width:0}
  .app-header .brand-logo{width:34px!important;height:34px!important;flex:0 0 34px}
  .app-header .app-actions{min-width:0;gap:6px!important;margin-left:auto}
  .app-header .app-actions select{height:40px!important;min-width:52px!important;max-width:58px!important;padding-inline:6px!important}
  .app-header .icon-button{width:40px!important;height:40px!important;min-width:40px!important}
  .app-header .button-small{min-height:40px!important;padding:0 11px!important;white-space:nowrap}

  .auth-shell{padding:78px 14px 28px!important;min-height:100dvh!important}
  .auth-shell>.brand{top:14px!important;left:14px!important}
  .auth-card{width:100%!important;padding:28px 20px!important;border-radius:24px!important}
  .auth-card h1{font-size:clamp(32px,10vw,42px)!important}
  .auth-card form{gap:14px!important;margin-top:24px!important}
  .auth-card input,.profile-card input,input,select,textarea{font-size:16px}

  .profile-shell{width:100%!important;padding:24px 14px 42px!important}
  .profile-hero{gap:14px!important;margin-bottom:20px!important}
  .profile-grid{grid-template-columns:1fr!important;gap:14px!important}
  .profile-card{padding:20px!important;border-radius:22px!important}
  .profile-card-head{gap:10px!important;margin-bottom:18px!important}

  /* Developer dashboard/API/integration */
  .developer-page .app-header{padding:0 12px!important}
  .developer-page .developer-back{width:40px!important;min-width:40px!important;padding:0!important;font-size:0!important}
  .developer-page .developer-back:before{content:"←";font-size:18px;line-height:1}
  .developer-dashboard,.developer-api-shell{width:calc(100% - 28px)!important;padding-top:26px!important;padding-bottom:48px!important}
  .developer-dashboard-hero{padding:26px 22px!important;border-radius:20px!important;margin-bottom:14px!important}
  .developer-dashboard-hero h1,.api-page-head h1{font-size:clamp(34px,10vw,48px)!important;line-height:1!important}
  .developer-dashboard-grid{grid-template-columns:1fr!important;gap:12px!important}
  .developer-feature-card{min-height:0!important;padding:22px!important;border-radius:18px!important}
  .developer-feature-card .feature-icon{margin-bottom:20px!important}
  .developer-coming-strip{align-items:flex-start!important;flex-direction:column!important;padding:16px!important}
  .api-page-head{align-items:flex-start!important;flex-direction:column!important;gap:16px!important}
  .developer-page-actions{width:100%!important;justify-content:flex-start!important}
  .developer-card,.api-management-card{padding:20px!important;border-radius:18px!important}
  .api-endpoint-grid{grid-template-columns:1fr!important}
  .key-row{grid-template-columns:1fr!important;gap:10px!important}
  .key-actions{width:100%!important}
  .key-actions button,.delete-key{flex:1}
  .key-reveal{align-items:stretch!important;flex-direction:column!important}
  .key-reveal .button{width:100%!important;justify-content:center}
  .integration-agent-tabs{overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:4px!important;scrollbar-width:none}
  .integration-agent-tabs::-webkit-scrollbar{display:none}
  .integration-agent{flex:0 0 auto!important}
  .integration-prompt-head{align-items:flex-start!important;flex-direction:column!important}
  .integration-prompt{padding:16px!important;font-size:11px!important}
  .integration-security-note{padding:20px!important;padding-top:58px!important}
  .integration-security-note:before{left:20px!important;top:19px!important}

  /* MCP / connectors marketplace */
  .connectors-header .nav{min-height:62px!important;height:62px!important;gap:8px!important}
  .connectors-header .brand span{display:none!important}
  .connectors-header-actions{gap:6px!important;min-width:0}
  .connector-nav-button{min-height:40px!important;padding:0 10px!important;font-size:11px!important}
  .market-shell{width:calc(100% - 28px)!important;padding:24px 0 46px!important}
  .market-hero{grid-template-columns:1fr!important;min-height:0!important;padding:26px 22px!important;border-radius:22px!important;gap:20px!important}
  .market-hero h1{font-size:clamp(36px,10vw,52px)!important}
  .market-hero-visual{display:none!important}
  .market-toolbar{grid-template-columns:1fr!important;gap:10px!important}
  .market-search,.add-mcp-button{height:54px!important;border-radius:16px!important}
  .market-grid{grid-template-columns:1fr!important;gap:12px!important}
  .market-card{min-height:0!important;border-radius:19px!important}
  .market-security{grid-template-columns:40px minmax(0,1fr)!important;align-items:start!important}
  .market-security>span{grid-column:2!important;white-space:normal!important}
  .mcp-modal{padding:10px!important}
  .mcp-modal-card{max-height:calc(100dvh - 20px)!important;padding:22px 18px!important;border-radius:22px!important}

  /* Chat: keep the composer reachable above mobile browser UI */
  .chat-panel{min-width:0!important}
  .messages{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .composer{padding-bottom:max(6px,env(safe-area-inset-bottom))!important}

  /* Generic overflow protection for dense content */
  pre,code{max-width:100%;overflow-x:auto}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media (max-width:560px){
  :root{--mobile-gutter:10px}
  .container{width:calc(100% - 20px)!important}
  .site-header .nav{min-height:58px!important;height:58px!important}
  .site-header .brand>span,.app-header .brand>span{display:none!important}
  .site-header .brand-logo,.app-header .brand-logo{width:32px!important;height:32px!important;flex-basis:32px!important}
  #workspace-toggle{width:42px!important;min-width:42px!important;max-width:42px!important;padding:0!important;display:grid!important;place-items:center!important}
  #workspace-toggle #workspace-label,#workspace-toggle>span:last-child{display:none!important}
  .site-header .language-control{display:none!important}
  .site-header .chat-link{height:40px!important;width:40px!important;min-width:40px!important;padding:0!important;font-size:0!important;display:grid!important;place-items:center!important}
  .site-header .chat-link span{margin:0!important;font-size:18px!important}
  .home-hero{padding-top:34px!important}
  .home-copy h1{font-size:clamp(42px,13vw,58px)!important}
  .home-badge{font-size:9px!important;padding:8px 10px!important}
  .hero-trust{font-size:10px!important}
  .preview-message{padding:13px!important}
  .footer-legal{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}

  .app-header .app-actions .lexo-version{display:none!important}
  .developer-page .app-actions select{display:none!important}
  .developer-page .button-small{max-width:118px!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .developer-hero-badges{gap:6px!important}
  .developer-hero-badge{font-size:10px!important;min-height:32px!important}
  .card-head{align-items:flex-start!important;flex-direction:column!important}
  .market-card-footer{align-items:stretch!important}

  .chat-top{padding-left:10px!important;padding-right:10px!important}
  .messages{padding-left:10px!important;padding-right:10px!important}
}

@media (max-width:380px){
  .site-header .theme-toggle{display:none!important}
  .developer-page .app-header .brand{display:none!important}
  .developer-page .button-small{max-width:110px!important}
  .profile-card{padding:18px!important}
  .footer-legal{grid-template-columns:1fr!important}
}

@media (hover:none) and (pointer:coarse){
  a,button,.button,.icon-button,.workspace-card,.filter-chip,.market-configure{min-height:44px}
  .developer-feature-card:hover,.market-card:hover,.button:hover,.icon-button:hover{transform:none!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}