/* =========================================================
   V145 — NOVAAI RESPONSIVE INTERFACE
   MOBILE + TABLET ONLY

   Goals:
   - Keep desktop logic untouched
   - Remove INDEPENDENT from the header
   - Remove project badge from the header
   - Keep mobile/tablet layouts clean and responsive
   ========================================================= */


/* =========================================================
   PHONE DEFAULTS — ALL NARROW PHONES
   ========================================================= */

@media (max-width: 699px) {

  /* ---------- HEADER ---------- */

  body:has(.app-shell) .chat-header {
    min-height: 64px !important;
    height: auto !important;
    padding: 8px 10px !important;
    gap: 8px !important;

    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;

    overflow: hidden !important;
  }

  body:has(.app-shell) .header-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;

    gap: 8px !important;

    overflow: hidden !important;
  }

  /* =====================================================
     REMOVE HEADER BADGES COMPLETELY
     ===================================================== */

  body:has(.app-shell) .owner-badge,
  body:has(.app-shell) .project-pill {
    display: none !important;
  }

  /* Keep NovaAI name readable */

  body:has(.app-shell) .title-row,
  body:has(.app-shell) .brand-title,
  body:has(.app-shell) .chat-title {
    min-width: 0 !important;

    max-width: 110px !important;

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

  /* Compact header buttons */

  body:has(.app-shell) .chat-header button {
    min-width: 44px !important;
    width: 44px !important;
    max-width: 44px !important;

    height: 44px !important;
    min-height: 44px !important;

    padding: 0 !important;

    flex: 0 0 44px !important;
  }

  /* Compact model selector */

  body:has(.app-shell) .chat-header select,
  body:has(.app-shell) .model-select {
    min-width: 0 !important;

    width: 116px !important;
    max-width: 116px !important;

    height: 44px !important;
    min-height: 44px !important;

    flex: 0 0 116px !important;

    font-size: 13px !important;
  }

  /* Small status line beneath title */

  body:has(.app-shell) .chat-header .status,
  body:has(.app-shell) .chat-header .subtitle {
    font-size: 11px !important;
    line-height: 1.2 !important;

    max-width: 170px !important;

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


  /* =====================================================
     WELCOME / HERO
     ===================================================== */

  body:has(.app-shell) .welcome h1,
  body:has(.app-shell) .welcome-title {
    font-size: clamp(34px, 9vw, 48px) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.035em !important;
  }

  body:has(.app-shell) .welcome p,
  body:has(.app-shell) .welcome-subtitle {
    font-size: clamp(16px, 4.2vw, 20px) !important;
    line-height: 1.45 !important;
  }


  /* =====================================================
     GENERAL PHONE WIDTH SAFETY
     ===================================================== */

  body:has(.app-shell) {
    overflow-x: hidden !important;
  }

  body:has(.app-shell) .chat-main,
  body:has(.app-shell) .messages,
  body:has(.app-shell) .welcome {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}


/* =========================================================
   SMALL PHONES
   Compact iPhones and narrow Android phones
   ========================================================= */

@media (max-width: 389px) {

  body:has(.app-shell) .chat-header {
    gap: 6px !important;
    padding-inline: 8px !important;
  }

  body:has(.app-shell) .title-row,
  body:has(.app-shell) .brand-title,
  body:has(.app-shell) .chat-title {
    max-width: 76px !important;
  }

  body:has(.app-shell) .chat-header select,
  body:has(.app-shell) .model-select {
    width: 90px !important;
    max-width: 90px !important;
    flex-basis: 90px !important;

    font-size: 12px !important;
  }

  body:has(.app-shell) .chat-header button {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    height: 40px !important;
    min-height: 40px !important;

    flex-basis: 40px !important;
  }

  body:has(.app-shell) .chat-header .status,
  body:has(.app-shell) .chat-header .subtitle {
    max-width: 125px !important;
  }
}


/* =========================================================
   REGULAR PHONES
   ========================================================= */

@media (min-width: 390px) and (max-width: 429px) {

  body:has(.app-shell) .title-row,
  body:has(.app-shell) .brand-title,
  body:has(.app-shell) .chat-title {
    max-width: 100px !important;
  }

  body:has(.app-shell) .chat-header select,
  body:has(.app-shell) .model-select {
    width: 110px !important;
    max-width: 110px !important;
    flex-basis: 110px !important;
  }
}


/* =========================================================
   LARGE PHONES
   Pro Max / Plus / large Android-style widths
   ========================================================= */

@media (min-width: 430px) and (max-width: 699px) {

  body:has(.app-shell) .title-row,
  body:has(.app-shell) .brand-title,
  body:has(.app-shell) .chat-title {
    max-width: 125px !important;
  }

  body:has(.app-shell) .chat-header select,
  body:has(.app-shell) .model-select {
    width: 132px !important;
    max-width: 132px !important;
    flex-basis: 132px !important;
  }

  body:has(.app-shell) .chat-header .status,
  body:has(.app-shell) .chat-header .subtitle {
    max-width: 190px !important;
  }
}


/* =========================================================
   TABLETS
   ========================================================= */

@media (min-width: 700px) and (max-width: 1023px) {

  body:has(.app-shell) .chat-header {
    min-height: 68px !important;

    padding: 10px 14px !important;
    gap: 10px !important;
  }

  /* INDEPENDENT stays removed on tablets too */

  body:has(.app-shell) .owner-badge,
  body:has(.app-shell) .project-pill {
    display: none !important;
  }

  body:has(.app-shell) .chat-header select,
  body:has(.app-shell) .model-select {
    max-width: 170px !important;
  }
}
/* =========================================================
   V145 — SIDEBAR PROJECTS EXPERIENCE
   CSS ONLY
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP SIDEBAR
   --------------------------------------------------------- */

@media (min-width: 1024px) {

  /* Give the sidebar project control more visual importance */
  body:has(.app-shell) .sidebar {
    position: relative;
  }

  /* Existing New project control */
  body:has(.app-shell) .sidebar [class*="project"],
  body:has(.app-shell) .sidebar button[aria-label*="project" i] {
    font-weight: 600 !important;
  }

  /* Make the New project action feel like a proper sidebar item */
  body:has(.app-shell) .sidebar .new-project,
  body:has(.app-shell) .sidebar [class*="new-project"] {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    min-height: 42px !important;

    padding: 9px 12px !important;
    margin-top: 6px !important;
    margin-bottom: 10px !important;

    border-radius: 10px !important;

    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Keep conversation list visually separate */
  body:has(.app-shell) .sidebar .conversation-list,
  body:has(.app-shell) .sidebar [class*="conversation-list"] {
    margin-top: 8px !important;
  }
}


/* =========================================================
   MOBILE / TABLET SIDEBAR DRAWER
   ========================================================= */

@media (max-width: 1023px) {

  /* Sidebar becomes the home of project navigation on mobile */
  body:has(.app-shell) .sidebar {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  body:has(.app-shell) .sidebar .new-project,
  body:has(.app-shell) .sidebar [class*="new-project"] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-height: 46px !important;

    padding: 10px 12px !important;
    margin: 8px 0 12px !important;

    border-radius: 12px !important;

    font-size: 15px !important;
    font-weight: 600 !important;
  }
}
/* =========================================================
   REMOVE INDEPENDENT + HEADER PROJECT BADGE EVERYWHERE
   ========================================================= */

.owner-badge,
.project-pill {
  display: none !important;
}
/* =========================================================
   SIDEBAR PROJECT STATUS
   ========================================================= */

#novaV4ProjectChip {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 8px 0 !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* =========================================================
   V145 — FINAL SIDEBAR LAYOUT
   DESKTOP ONLY
   ========================================================= */

@media (min-width: 1024px) {

  /* Overall spacing */
  body:has(.app-shell) .sidebar {
    gap: 6px !important;
  }

  body:has(.app-shell) .sidebar-bottom {
    gap: 6px !important;
  }


  /* =====================================================
     PROJECT / LIBRARY / RESEARCH AREA
     ===================================================== */

  #novaV4Nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;

    margin-top: 10px !important;
    margin-bottom: 8px !important;
  }

  #novaLibraryBtn,
  #novaResearchBtn {
    width: 100% !important;
    min-height: 36px !important;

    margin: 0 !important;
    padding: 7px 10px !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    border-radius: 10px !important;
  }

  #novaV4ProjectChip {
    grid-column: 1 / -1 !important;

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

    width: 100% !important;
    min-height: 32px !important;

    margin: 0 !important;
    padding: 6px 10px !important;

    font-size: 12px !important;
    font-weight: 500 !important;

    border-radius: 9px !important;

    opacity: 0.78 !important;

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


  /* =====================================================
     MORE TOOLS
     ===================================================== */

  body:has(.app-shell) .sidebar [class*="more-tools"] {
    min-height: 38px !important;
    margin-top: 4px !important;
    margin-bottom: 2px !important;
  }


  /* =====================================================
     TOOL ITEMS
     ===================================================== */

  body:has(.app-shell) .sidebar button,
  body:has(.app-shell) .sidebar a {
    line-height: 1.15 !important;
  }

  body:has(.app-shell) .sidebar .conversation-list {
    margin-bottom: 8px !important;
  }


  /* =====================================================
     UTILITY AREA
     ===================================================== */

  body:has(.app-shell) .sidebar-bottom > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}
/* =========================================================
   V145 HEADER CLEANUP
   Keep Tutorial only
   ========================================================= */

#novaProviderSelect,
.engine-pill,
#closeSidebar,
#clearBtn {
  display: none !important;
}
/* =========================================================
   V145 MINIMAL WELCOME SCREEN
   Keep only NovaAI logo + main heading
   ========================================================= */

.eyebrow,
.welcome-copy,
.capability-chip,
.suggestion-grid {
  display: none !important;
}
/* =========================================================
   NOVAAI PHOENIX / DOVE LOGO
   ========================================================= */

.nova-main-logo {
  width: 110px;
  height: 110px;
  object-fit: contain;
  display: block;
  margin: 0 auto 22px auto;
  border-radius: 24px;
  filter:
    drop-shadow(0 0 16px rgba(70, 150, 255, .22))
    drop-shadow(0 0 22px rgba(255, 195, 70, .16));
}
/* =========================================================
   NOVAAI SMALL BRAND LOGO
   ========================================================= */

.nova-brand-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  border-radius: 10px;
}