@charset "UTF-8";
/* ============================================================
   HopChat / MessageSecure — Hollywood Neon Glass v12.4
   BASE: layout, structure, safe-area, no neon
   ============================================================ */

/* MOBILE TWEAKS */
@media (max-width: 600px) {
  .btn-row { gap: 6px !important; }
  .recipient-select { flex: 1.2 !important; }
  .btn-row .btn-small { flex-shrink: 0 !important; }
}

/* GLOBAL RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input, select, textarea, button {
  font-size: 16px;
}

html { -webkit-text-size-adjust: 100%; }

/* ROOT + SAFE AREA */
html, body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

body.ms-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  overflow-x: hidden;
  color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

/* PHONE SHELL */
.ms-phone-shell {
  width: 390px;
  max-width: 390px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: 80px;
  overflow: hidden;
}

/* SAFARI KEYBOARD FIX */
@supports (-webkit-touch-callout: none) {
  .ms-phone-shell {
    height: calc(100vh - env(safe-area-inset-bottom));
  }
}

/* TOP NAV STRUCTURE */
.hc-topnav {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: calc(16px + env(safe-area-inset-right));
  padding-left: calc(16px + env(safe-area-inset-left));
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Desktop: center top nav */
@media (min-width: 600px) {
  .hc-topnav {
    max-width: 430px;
    margin: 0 auto;
    border-radius: 18px;
    margin-top: 10px;
  }
}

/* Mobile: hide top nav */
@media (max-width: 600px) {
  .hc-topnav { display: none; }
}

/* NAV LAYOUT */
.hc-nav-center {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.hc-nav-left,
.hc-nav-center,
.hc-nav-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hc-nav-item {
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* PANEL STACK */
.ms-phone-shell { position: relative; }

.ms-panel {
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  max-width: 390px;
  padding: 20px;
  margin: 16px auto;
  border-radius: 22px;
  max-height: calc(100vh - 60px - 90px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile panel positioning */
@media (max-width: 600px) {
  .ms-panel {
    top: calc(env(safe-area-inset-top) + 10px);
    max-height: calc(100vh - env(safe-area-inset-top) - 90px);
  }
}

/* PANEL TITLE */
.panel-title {
  font-size: 20px;
  margin-bottom: 12px;
}

/* HEADER STRUCTURE */
.ms-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px !important;
  margin: 0 !important;
}

.ms-title { font-size: 16px; }
.ms-subtitle { font-size: 10px; margin-top: 2px !important; }
.ms-tag { font-size: 9px; padding: 4px 8px; border-radius: 8px; }

/* TEXTAREA STRUCTURE */
.ms-textarea,
#msgBox {
  width: 100%;
  min-height: 220px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
}

.char-counter,
#charCounter {
  text-align: right;
  font-size: 12px;
  margin-top: 4px;
}

/* BUTTON STRUCTURE */
.btn {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
}

.btn-small {
  font-size: 13px;
  padding: 8px 12px;
}

/* BUTTON ROWS */
.controls-row,
.button-row,
.action-row,
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

.controls-row button,
.button-row button,
.action-row button {
  flex-shrink: 0;
  padding: 10px 14px;
  margin: 4px 0;
}

.btn-row.secondary { margin-top: 12px; }

/* SELECT STRUCTURE */
.contact-select,
.recipient-select {
  flex: 1;
  border-radius: 10px;
  padding: 10px;
}

/* PQC PANEL */
.pqc-section textarea { height: 120px; }

/* ATTACHMENT DRAWER STRUCTURE */
.attach-drawer {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  z-index: 99999;
  transform: translateY(100%);
  opacity: 0;
}

.attach-drawer.active {
  display: block;
  transform: translateY(0);
  opacity: 1;
}

.attach-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.attach-title { font-size: 16px; font-weight: 600; }
.attach-body { margin-top: 16px; }

/* BOTTOM NAV STRUCTURE */
.ms-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(60px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 9999;
}

.ms-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 22px;
  cursor: pointer;
}

.ms-tab span {
  font-size: 11px;
  margin-top: 2px;
}

/* Desktop: hide bottom nav */
@media (min-width: 600px) {
  .ms-bottom-nav { display: none; }
}

/* RESPONSIVE RADIUS */
@media (max-width: 390px) {
  .ms-phone-shell,
  .ms-panel {
    border-radius: 0;
    margin: 0;
    max-width: 100%;
  }
}

/* LANDSCAPE MODE FIX */
@media (orientation: landscape) and (max-width: 900px) {
  .ms-panel {
    position: relative !important;
    top: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding-top: 20px !important;
  }

  .ms-phone-shell {
    height: auto !important;
    min-height: 100vh !important;
    padding-bottom: 120px !important;
  }
}