/* ════════════════════════════════════════════════════════════
   responsive.css 

   ════════════════════════════════════════════════════════════ */

:root {
  --mobile-nav-h: 60px;
  --topbar-h: 52px;
}



@media (max-width: 768px) {

  .sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(280px, 85vw);
    height: 100vh;
    height: 100dvh;
    z-index: 500;
    border-left: 1px solid var(--border-hover);
    transition: right 0.28s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
  }
  .sidebar.mobile-open {
    right: 0;
    box-shadow: -8px 0 32px rgba(0,0,0,0.5);
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    z-index: 499;
  }
  .sidebar-overlay.show { display: block; }

  body {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
  }


  .main {
    width: 100vw;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    padding-bottom: var(--mobile-nav-h);
  }
}


@media (max-width: 768px) {
  .topbar {
    padding: 0 12px;
    height: var(--topbar-h);
    gap: 8px;
    flex-shrink: 0;
  }

  /* دکمه همبرگر */
  .hamburger-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.15s;
  }
  .hamburger-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-hover);
  }


  .topbar-right .btn-primary {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 9px;
    min-width: 36px;
  }

  .topbar-right .btn-primary > *:not(i):not(svg) {
    display: none;
  }
  .topbar-right .btn-primary i {
    font-size: 18px;
    margin: 0;
  }


  .model-selector {
    padding: 5px 9px;
    font-size: 11px;
    max-width: 140px;
    overflow: hidden;
    flex-shrink: 1;
  }
  #selectorLabel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 85px;
    display: block;
  }

  .topbar-left { gap: 4px; }


  .topbar-left #authBtns {
    display: flex;
    gap: 4px;
  }
  .topbar-left #authBtns .btn-outline {
    display: flex;
    padding: 5px 10px;
    font-size: 11px;
  }
  .topbar-left #authBtns .btn-primary {
    padding: 5px 10px;
    font-size: 11px;
    width: auto;
    height: auto;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  .topbar-user-btn { padding: 4px 8px; gap: 5px; }
  .topbar-user-name { display: none; }
}


@media (max-width: 768px) {

  .mobile-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--mobile-nav-h);
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    z-index: 450;        
    align-items: stretch;

    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-muted);
    font-size: 10px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    border: none;
    background: transparent;
    font-family: inherit;
    padding: 6px 2px;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-item i { font-size: 20px; line-height: 1; }
  .mobile-nav-item.active { color: var(--text-primary); background: var(--accent-dim); }
  .mobile-nav-item.active i { color: var(--accent, #e8e8e8); }
}



@media (max-width: 768px) {


  .chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;      
  }


  .chat-messages {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 0 8px;
    gap: 4px;
    min-height: 0;
  }

  
  .input-bar {
    flex-shrink: 0;
    padding: 8px 12px 10px;
  
  }

  .input-wrap {
    padding: 8px 10px;
    border-radius: 12px;
    gap: 8px;
  }


  .chat-input {
    font-size: 16px;
  }

  .send-btn {
    width: 36px;
    height: 36px;
  }

  .input-hint {
    font-size: 9px;
    margin-top: 6px;
  }


  .msg-body {
    padding: 0 12px;
    max-width: 100%;
  }
  .msg-bubble {
    font-size: 13px;
    padding: 10px 13px;
    max-width: 90%;
  }
  .msg.ai .msg-bubble { max-width: 100%; }


  .active-model-strip {
    flex-shrink: 0;
    padding: 6px 14px;
  }
  .strip-name { font-size: 11px; }


  .extra-page {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }


  .content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 14px 12px;

    scroll-behavior: auto;
  }


  .content:not(.hidden) {
    overflow-y: auto;
  }


  .chat-area:not(.active) {
    display: none !important;
  }
}



@media (max-width: 768px) {


  .grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .model-card { padding: 14px; }
  .tabs-wrap { padding: 0 14px; }
  .tab { padding: 8px 10px; font-size: 11px; }
  .section-title { font-size: 15px; }


  .image-gen-wrap { flex-direction: column; }
  .image-sidebar {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 14px;
    gap: 12px;
    order: 2;
    max-height: 260px;
    overflow-y: auto;
  }
  .image-main { padding: 14px; gap: 12px; order: 1; min-height: 0; }
  .image-canvas-area { min-height: 200px; }
  .ratio-btns { flex-wrap: wrap; gap: 6px; }
  .ratio-btn { flex: 1; min-width: 60px; }

  
  .pricing-wrap { padding: 16px 14px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 12px; }
  .plan-card { padding: 18px; }
  .credit-grid { grid-template-columns: 1fr 1fr; gap: 8px; }


  .assistant-wrap { padding: 14px; }
  .assistant-grid { grid-template-columns: 1fr; gap: 10px; }
  .assistant-card { padding: 14px; }
}



@media (max-width: 768px) {
  .modal-overlay {
    align-items: flex-end;
 
    padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px));
  }

  .modal-overlay .modal,
  .modal-overlay .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 22px 18px;
    border-radius: 16px 16px 0 0;
  }

  .otp-inputs { gap: 6px; }
  .otp-digit { width: 40px; height: 48px; font-size: 20px; }

  #userMenu {
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
  }
}



@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-w: 190px; }
  .sidebar { width: var(--sidebar-w); }
  .logo-text span { display: none; }
  .content { padding: 20px 20px 12px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .image-sidebar { width: 220px; }
}



.hamburger-btn    { display: none; }
.mobile-bottom-nav { display: none; }
.sidebar-overlay  { display: none; }


@media (max-width: 768px) {
  .mobile-bottom-nav {

    height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px));
  }

  .main {
    padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px));
  }

  .topbar {
    padding-top: env(safe-area-inset-top, 0px);
  }
}



@media (max-width: 768px) {
  button, .nav-item, .tab, .model-card,
  .hist-item, .assistant-card, .plan-card {
    -webkit-tap-highlight-color: transparent;
  }
  .model-card:hover { transform: none; }

 
  * { scroll-behavior: smooth; }
}