/* =========================================================
   RESPONSIVE MOBILE FINAL CLEAN
   Home + Conversation + Travel Hub + Footer
   ========================================================= */

@media (max-width: 640px) {

  /* =========================================================
     HOME MOBILE — HEADER FINAL
     ========================================================= */

  .global-header {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;

    padding: 10px 12px !important;
    box-sizing: border-box;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;

    background:
      linear-gradient(180deg, rgba(5, 14, 30, 0.98), rgba(3, 9, 22, 0.98));

    border-bottom: 1px solid rgba(80, 170, 255, 0.12);
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.28),
      inset 0 -1px 0 rgba(255, 255, 255, 0.03);

    overflow: visible !important;
    z-index: 50;
  }

  .global-header .logo {
    height: 44px !important;
    max-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  .global-header .logo img {
    height: 32px !important;
    max-height: 32px !important;
    width: auto !important;
    object-fit: contain !important;

    transform: scale(1.22);
    transform-origin: left center;

    filter:
      drop-shadow(0 0 8px rgba(56, 167, 255, 0.38))
      drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
  }

  .global-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 6px !important;

    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 76% !important;
  }

  .global-header-actions button {
    flex: 1 1 0 !important;
    min-width: 0 !important;

    min-height: 38px !important;
    max-height: 42px !important;

    padding: 5px 8px !important;

    border-radius: 14px !important;
    border: 1px solid rgba(90, 180, 255, 0.24) !important;

    background:
      linear-gradient(180deg, rgba(15, 35, 62, 0.88), rgba(7, 18, 36, 0.94)) !important;

    color: rgba(255, 255, 255, 0.95) !important;

    font-size: 0.72rem !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-align: center !important;

    white-space: normal !important;
    overflow: hidden !important;

    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);

    cursor: pointer;
    transition:
      background 0.22s ease,
      color 0.22s ease,
      border-color 0.22s ease,
      transform 0.22s ease,
      box-shadow 0.22s ease;
  }

  .global-header-actions button:hover,
  .global-header-actions button:focus {
    background: linear-gradient(135deg, #38a7ff, #2f83ff) !important;
    color: #ffffff !important;
    border-color: rgba(120, 210, 255, 0.62) !important;

    transform: translateY(-1px);

    box-shadow:
      0 12px 26px rgba(47, 131, 255, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.16);

    outline: none !important;
  }

  .global-header #homeBtn {
    display: none !important;
  }


  /* =========================================================
     CONVERSATION MOBILE — GLOBAL LAYOUT
     ========================================================= */

  #conversationScreen {
    padding: 10px 10px 24px;
    min-height: 100vh;
    overflow-x: hidden;
  }

  #conversationScreen .conversation-shell {
    max-width: 100%;
    gap: 10px;
  }


  /* =========================================================
     CONVERSATION MOBILE — TOPBAR
     ========================================================= */

  #conversationScreen .conv-topbar {
    min-height: 58px;
    max-height: 58px;
    padding: 8px 10px;
    border-radius: 16px;
    overflow: visible;
  }

  #conversationScreen .conv-brand {
    height: 42px;
    max-height: 42px;
    gap: 8px;
    min-width: 0;
    overflow: visible;
    display: flex;
    align-items: center;
  }

  #conversationScreen .conv-brand img {
    height: 42px;
    max-height: 42px;
    width: auto;
    max-width: 145px;
    object-fit: contain;

    transform: scale(2.55);
    transform-origin: left center;
  }

  #conversationScreen .header-button {
    min-height: 38px;
    padding: 0 12px;
    font-size: 0.88rem;
    border-radius: 12px;
    white-space: nowrap;
  }


  /* =========================================================
     CONVERSATION MOBILE — LANGUAGE BAR
     ========================================================= */

  #conversationScreen .conv-langbar {
    grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
    gap: 8px;
  }

  #conversationScreen .conv-lang-side {
    min-width: 0 !important;
    min-height: 56px;
    overflow: hidden !important;

    padding: 0 7px !important;
    gap: 5px !important;
    border-radius: 14px;
  }

  #conversationScreen .conv-flag {
    min-width: 22px !important;
    max-width: 22px !important;

    font-size: 0.82rem !important;
    line-height: 1 !important;

    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  #conversationScreen .conv-lang-select {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;

    height: 38px;
    font-size: 0.76rem !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    flex: 1 1 auto !important;
  }

  #conversationScreen .conv-swap-btn {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    font-size: 1.05rem;
  }


  /* =========================================================
     CONVERSATION MOBILE — MODE BAR
     ========================================================= */

  #conversationScreen .conv-modebar {
    grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
    gap: 8px;
  }

  #conversationScreen .conv-mode-side {
    min-width: 0 !important;
    min-height: 64px !important;
    overflow: hidden !important;

    padding: 7px 5px !important;
    border-radius: 14px;
    gap: 5px;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
  }

  #conversationScreen .conv-mode-icon {
    font-size: 0.95rem !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
  }

  #conversationScreen .conv-mode-text {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #conversationScreen .conv-mode-title {
    font-size: 0.82rem !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #conversationScreen .conv-mode-sub {
    max-width: 100% !important;

    font-size: 0.58rem !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;

    white-space: normal !important;
    overflow: hidden !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    opacity: 0.82 !important;
  }


  /* =========================================================
     CONVERSATION MOBILE — CENTER LOGO
     ========================================================= */

  #conversationScreen #convMicCore,
  #conversationScreen .conv-center-logo {
    width: 96px;
    height: 96px;
    min-width: 96px;
    min-height: 96px;
    max-width: 96px;
    max-height: 96px;

    margin-left: -3px !important;
  }

  #conversationScreen .conv-center-logo img {
    width: 62px;
    height: 62px;
  }

  #conversationScreen .conv-logo-ring.ring-1 {
    inset: -6px;
  }

  #conversationScreen .conv-logo-ring.ring-2 {
    inset: -14px;
  }

  #conversationScreen .conv-center-logo::before {
    width: 46px;
    height: 46px;
  }

  #conversationScreen .conv-center-logo::after {
    width: 66px;
    height: 66px;
  }


  /* =========================================================
     CONVERSATION MOBILE — STATUS / TRANSLATION
     ========================================================= */

  #conversationScreen .status-message {
    font-size: 0.86rem;
    padding: 7px 12px;
    border-radius: 12px;
  }

  #conversationScreen .conv-translation-wrap {
    border-radius: 16px;
    padding: 12px;
  }

  #conversationScreen .conv-block-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  #conversationScreen .conv-translation-box {
    min-height: 42px;
    padding: 6px 0;
    font-size: 0.95rem;
    line-height: 1.35;
  }


  /* =========================================================
     CONVERSATION MOBILE — BOTTOM ACTIONS
     ========================================================= */

  #conversationScreen .conv-bottom-actions {
    gap: 8px;
  }

  #conversationScreen .conv-main-btn,
  #conversationScreen .ask-tocspeak-btn {
    min-width: 0;
    width: 100%;
    min-height: 46px;
    font-size: 0.92rem;
    border-radius: 14px;
  }


  /* =========================================================
     TRAVEL HUB MOBILE
     ========================================================= */

  #travelHubScreen {
    padding: 10px;
  }

  .travel-hub-header {
    padding: 20px 10px;
  }

  .travel-hub-categories,
  .travel-hub-tools {
    grid-template-columns: 1fr;
  }

  .travel-hub-card {
    padding: 15px;
  }

  .travel-hub-title,
  .tool-title {
    font-size: 1.2rem;
  }

  .travel-hub-subtitle,
  .tool-subtitle {
    font-size: 1rem;
  }

  .tool-icon {
    font-size: 2rem;
  }


  /* =========================================================
     FOOTER MOBILE
     ========================================================= */

  .app-footer {
    padding: 10px;
  }

  .footer-links {
    flex-direction: column;
    gap: 10px;
  }

  .footer-link {
    font-size: 0.9rem;
  }

  .footer-note {
    font-size: 0.8rem;
  }
}


/* =========================================================
   EXTRA SMALL MOBILE — 390px FINAL CLEAN
   ========================================================= */

@media (max-width: 390px) {

  .global-header {
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;

    padding: 8px 10px !important;
    gap: 7px !important;
  }

  .global-header .logo img {
    height: 29px !important;
    max-height: 29px !important;
    transform: scale(1.18);
  }

  .global-header-actions {
    gap: 5px !important;
    max-width: 78% !important;
  }

  .global-header-actions button {
    min-height: 36px !important;
    max-height: 40px !important;

    padding: 4px 6px !important;

    border-radius: 12px !important;

    font-size: 0.66rem !important;
    line-height: 1.05 !important;
  }

  #homeScreen .home-hero-content {
    padding: 10px 12px 14px !important;
  }

  #homeScreen #homeStartBtn,
  #homeScreen .hero-start-btn {
    min-width: 150px !important;
    max-width: 200px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 0.76rem !important;
  }

  #conversationScreen .conv-mode-side {
    min-height: 58px !important;
    padding: 6px 4px !important;
  }

  #conversationScreen .conv-mode-icon {
    font-size: 0.88rem !important;
  }

  #conversationScreen .conv-mode-title {
    font-size: 0.76rem !important;
  }

  #conversationScreen .conv-mode-sub {
    font-size: 0.52rem !important;
    -webkit-line-clamp: 2 !important;
  }

  #conversationScreen .conv-lang-side {
    min-height: 52px !important;
    padding: 0 5px !important;
    gap: 4px !important;
  }

  #conversationScreen .conv-flag {
    min-width: 20px !important;
    max-width: 20px !important;
    font-size: 0.76rem !important;
  }

  #conversationScreen .conv-lang-select {
    font-size: 0.68rem !important;
  }
}