/* Cósmica Universo: mobile conversation-first layout. */
.mobile-menu-button, .mobile-menu-backdrop { display: none; }
.mobile-menu-panel { display: contents; }

@media (max-width: 760px) {
  #appView.app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 62px minmax(0, 1fr); }
  #appView .sidebar {
    position: relative; z-index: 40; height: 62px; min-height: 62px; max-height: none;
    overflow: visible; border-right: 0; border-bottom: 1px solid rgba(136,146,191,.24);
  }
  #appView .sidebar-top {
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;
    height: 61px; gap: 7px; padding: 6px 12px;
  }
  #appView .brand-row { display: flex; flex: 1 1 auto; min-width: 0; gap: 9px; grid-column: auto; grid-row: auto; }
  #appView .brand-mark.small { flex: none; width: 37px; height: 37px; border-radius: 12px; font-size: 19px; }
  #appView .brand-row strong { font-size: 15px; line-height: 1.15; }
  #appView .brand-row span { font-size: 10px; line-height: 1.3; }
  #appView .owner-status-access { width: 34px; height: 34px; }
  #appView .sidebar-actions, #appView .sidebar-actions.owner-enabled {
    display: flex; flex: none; align-items: center; width: 40px;
    grid-column: auto; grid-row: auto; gap: 0;
  }
  #appView #newSessionButton {
    width: 40px; height: 40px; min-height: 40px; margin: 0;
    padding: 0; font-size: 0; border-radius: 12px;
  }
  #appView #newSessionButton::before { content: "+"; color: #f8f5fd; font-size: 25px; font-weight: 450; }
  #appView .mobile-menu-button {
    display: inline-flex; flex: none; align-items: center; justify-content: center;
    width: 40px; height: 40px; min-height: 40px; padding: 0;
    border: 1px solid rgba(138,147,186,.27); border-radius: 12px;
    background: rgba(24,29,52,.78); color: #e3e7f5; font-size: 22px;
  }
  #appView .mobile-menu-button[aria-expanded="true"] {
    border-color: rgba(230,85,153,.6); background: rgba(100,46,98,.38);
  }
  #appView .mobile-menu-panel {
    display: none; position: absolute; z-index: 52; top: 100%; left: 9px; right: 9px;
    max-height: min(70dvh,520px); flex-direction: column; min-height: 0;
    border: 1px solid rgba(143,135,193,.34); border-radius: 16px;
    background: linear-gradient(160deg,#15172d,#0d1223 74%);
    box-shadow: 0 24px 58px rgba(0,0,0,.68); overflow: hidden;
  }
  #appView.mobile-menu-open .mobile-menu-panel { display: flex; }
  #appView .mobile-menu-backdrop:not(.hidden) {
    display: block; position: fixed; z-index: 51; inset: 0; background: rgba(3,5,12,.54);
  }
  #appView .mobile-menu-panel .session-list {
    display: flex; flex: 1 1 auto; order: 1; flex-direction: column; gap: 4px;
    min-height: 0; max-height: min(52dvh,390px); overflow-x: hidden; overflow-y: auto;
    width: 100%; padding: 12px; scroll-snap-type: none; scrollbar-width: thin;
  }
  #appView .mobile-menu-panel .session-row,
  #appView .mobile-menu-panel .session-item {
    flex: none; width: 100%; max-width: 100%; margin: 0; scroll-snap-align: none;
  }
  #appView .mobile-menu-panel .session-row .session-item { min-width: 0; }
  #appView .mobile-menu-panel .sidebar-bottom {
    display: flex; order: 2; flex: none; width: 100%; padding: 11px 12px;
    border-top: 1px solid rgba(138,151,190,.2); border-bottom: none;
    background: rgba(13,16,31,.78);
  }
  #appView .mobile-menu-panel .sidebar-bottom .muted { max-width: calc(100vw - 115px); font-size: 11px; }
  #appView .chat-panel { min-height: 0; overflow: hidden; }
  #appView .compact-header { min-height: 40px; padding: 8px 15px; }
  #appView .messages { flex: 1 1 auto; min-height: 0; width: 100%; padding: 18px 15px 14px; }
  #appView .message { margin-bottom: 20px; }
  #appView .message.user { max-width: 90%; }
  #appView .message .bubble { font-size: 15px; line-height: 1.6; }
  #appView .composer-wrap {
    flex: none; width: calc(100% - 16px); margin: 0 auto max(8px,env(safe-area-inset-bottom));
    padding: 6px 7px 7px; border-radius: 17px;
  }
  #appView .composer { grid-template-columns: minmax(0,1fr) 44px; gap: 7px; }
  #appView #messageInput { min-height: 45px; font-size: 16px; padding: 10px 11px; }
  #appView .composer-controls, #appView #contextControl { display: none !important; }
}
@media (max-width: 760px) and (max-height: 560px) {
  #appView .sidebar, #appView .sidebar-top { display: flex; }
  .keyboard-open #appView .sidebar { display: none; }
  .keyboard-open #appView.app { grid-template-rows: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  #appView .brand-row { gap: 6px; }
  #appView .owner-status-access { width: 30px; height: 30px; }
  #appView .sidebar-top { gap: 5px; padding-inline: 9px; }
}

/* Conversation-first mobile header: only the Astra mark and the menu icon. */
.mobile-menu-actions { display: none; }
@media (max-width: 760px) {
  #appView .brand-row > div:not(.brand-mark) { display: none !important; }
  #appView .brand-row .owner-status-access { display: none !important; }
  #appView .sidebar-actions, #appView .sidebar-actions.owner-enabled { display: none !important; }
  #appView .brand-row { flex: 1 1 auto; }
  #appView .compact-header { display: none !important; }
  #appView .mobile-menu-panel .mobile-menu-actions {
    display: flex; flex: none; order: 0; flex-direction: column; gap: 8px;
    padding: 12px 12px 4px;
  }
  #appView .mobile-menu-actions button {
    width: 100%; min-height: 43px; padding: 9px 12px; border-radius: 12px;
    border: 1px solid rgba(140,148,195,.27); background: rgba(43,48,81,.60);
    color: #f0f1fb; text-align: left; font-size: 14px; font-weight: 600;
  }
  #appView .mobile-menu-actions button.hidden { display: none !important; }
  #appView .mobile-menu-actions button:hover,
  #appView .mobile-menu-actions button:focus-visible { border-color: rgba(224,92,158,.50); }
}