/* TXTpass AppSail Messaging - responsive layer.
   Loaded AFTER smsMessaging.css so existing message/event logic is unchanged. */
:root { --tp-top-h: 82px; --tp-left: clamp(290px, 31%, 480px); }
html, body { max-width: 100%; }
body#desktop { height: 100dvh; min-height: 0; overflow: hidden !important; }
.messaging-topbar {
  min-height: var(--tp-top-h) !important;
  height: var(--tp-top-h) !important;
  display: flex !important;
  flex-wrap: nowrap;
  gap: 12px !important;
  padding: 8px 14px !important;
  box-sizing: border-box;
}
.messaging-topbar .topbar-left {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center;
  gap: clamp(10px, 2vw, 24px) !important;
  min-width: 0;
}
.messaging-topbar .topbar-tabs-wrap {
  flex: 0 1 var(--tp-left) !important;
  width: var(--tp-left) !important;
  max-width: var(--tp-left) !important;
  min-width: 0 !important;
  padding-right: 0 !important;
  overflow: hidden;
}
.messaging-topbar #phoneTabs {
  width: 100%;
  max-width: 100%;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.messaging-topbar #phoneTabs > li { flex-shrink: 0; }
.messaging-topbar #phoneTabs .nav-link { white-space: nowrap; }
#topbarSearchSection {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  flex: 1 1 260px !important;
  width: auto !important;
  max-width: 440px !important;
  min-width: 125px !important;
  margin: 0 !important;
}
#topbarSearchSection #xxinput-wrapper,
#topbarSearchSection .search-container { width: 100% !important; max-width: 100% !important; }
.messaging-topbar .topbar-right {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 4;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: 0 !important;
  min-width: 0;
}
#filterChipsSection { min-width: 0; max-width: clamp(110px, 18vw, 360px); overflow: hidden; }
#filterChipsBar { min-width: 0; }
#filterChipsList { max-width: 100%; overflow-x: auto; flex-wrap: nowrap !important; }
#filterChipsList .filter-chip { flex: 0 0 auto; }
#filterDropdownContainer { max-width: min(92vw, 360px); }
.main-container { height: 100dvh !important; min-height: 0; overflow: hidden; }
.main-container #left-section {
  width: var(--tp-left) !important;
  flex: 0 0 var(--tp-left) !important;
  min-width: 0;
  margin-top: calc(var(--tp-top-h) + 4px) !important;
  height: calc(100dvh - var(--tp-top-h) - 4px) !important;
  overflow: hidden !important;
}
.main-container #left-section #summaryListContainer { min-width: 0; min-height: 0; }
.main-container #right-section {
  flex: 1 1 auto !important;
  width: calc(100% - var(--tp-left)) !important;
  min-width: 0;
  margin-top: calc(var(--tp-top-h) + var(--conversation-header-height, 56px)) !important;
  height: calc(100dvh - var(--tp-top-h) - var(--conversation-header-height, 56px)) !important;
}
.main-container #right-section > #top {
  left: var(--tp-left) !important;
  top: var(--tp-top-h) !important;
  width: calc(100% - var(--tp-left)) !important;
  max-width: calc(100% - var(--tp-left));
  box-sizing: border-box;
}
.main-container #right-section > #bottom.conversation-composer-bottom {
  left: var(--tp-left) !important;
  width: calc(100% - var(--tp-left)) !important;
  max-width: calc(100% - var(--tp-left));
  box-sizing: border-box;
}
.main-container #right-section #detailList { min-height: 0 !important; }
.main-container #right-section #detailList #messageContent {
  min-height: calc(100dvh - var(--tp-top-h) - var(--conversation-header-height, 56px) - 120px) !important;
}
/* Give phone-number tabs an additional 150px of room before Search.
   This shifts Search right without relying on an absolute offset. */
@media (min-width: 1201px) {
  .messaging-topbar .topbar-tabs-wrap {
    flex: 0 1 calc(var(--tp-left) + 150px) !important;
    width: calc(var(--tp-left) + 150px) !important;
    max-width: calc(var(--tp-left) + 150px) !important;
  }
  #topbarSearchSection {
    flex-shrink: 1 !important;
    min-width: 150px !important;
  }
}
@media (max-width: 1200px) {
  :root { --tp-left: clamp(250px, 34%, 410px); }
  .messaging-topbar { gap: 8px !important; padding: 8px 10px !important; }
  .messaging-topbar .topbar-tabs-wrap {
    flex-basis: calc(var(--tp-left) + 80px) !important;
    width: calc(var(--tp-left) + 80px) !important;
    max-width: calc(var(--tp-left) + 80px) !important;
  }
  #topbarSearchSection { flex-basis: 200px !important; }
  #filterChipsSection { max-width: 150px; }
}
@media (max-width: 820px) {
  :root { --tp-top-h: 122px; --tp-left: 38%; }
  .messaging-topbar {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    align-content: flex-start;
    gap: 7px !important;
    padding: 6px 10px !important;
  }
  .messaging-topbar .topbar-left {
    width: 100% !important;
    flex: 1 1 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px !important;
  }
  .messaging-topbar .topbar-tabs-wrap {
    flex: 0 0 48px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 48px;
  }
  .messaging-topbar #phoneTabs { height: 48px; }
  #topbarSearchSection {
    flex: none !important;
    width: calc(100% - 112px) !important;
    max-width: calc(100% - 112px) !important;
    min-width: 0 !important;
  }
  #topbarSearchSection .search-container { height: 44px; }
  .messaging-topbar .topbar-right {
    position: absolute !important;
    top: 62px;
    right: 10px;
    max-width: 108px;
    margin: 0 !important;
  }
  .messaging-topbar #filterChipsSection { display: none !important; }
  .topbar-filter-wrap #filterBtn { min-height: 44px; padding: 7px 14px; }
  .main-container #right-section > #top { padding-left: 10px !important; padding-right: 10px !important; }
  .main-container #right-section > #bottom.conversation-composer-bottom { padding: 8px !important; }
}
@media (max-width: 600px) {
  :root { --tp-top-h: 118px; --tp-list-h: 25dvh; }
  .messaging-topbar { padding: 4px 8px !important; }
  .messaging-topbar .topbar-right { top: 59px; right: 8px; }
  .messaging-topbar .topbar-tabs-wrap { flex-basis: 46px !important; height: 46px; }
  .messaging-topbar #phoneTabs { height: 46px; }
  .main-container {
    display: block !important;
    height: 100dvh !important;
    width: 100% !important;
  }
  .main-container #left-section {
    position: absolute;
    top: var(--tp-top-h);
    left: 0;
    width: 100% !important;
    height: var(--tp-list-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 2px solid #e2e8ee;
  }
  .main-container #left-section #summaryside,
  .main-container #left-section #summaryListContainer { height: 100% !important; }
  .main-container #left-section #summaryListContainer { padding: 3px 8px 5px !important; }
  .main-container #right-section {
    position: absolute;
    left: 0;
    top: calc(var(--tp-top-h) + var(--tp-list-h));
    width: 100% !important;
    height: calc(100dvh - var(--tp-top-h) - var(--tp-list-h)) !important;
    margin: 0 !important;
    padding-top: var(--conversation-header-height, 56px);
    box-sizing: border-box;
  }
  .main-container #right-section > #top {
    top: calc(var(--tp-top-h) + var(--tp-list-h)) !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100%;
  }
  .main-container #right-section > #bottom.conversation-composer-bottom {
    left: 0 !important;
    width: 100% !important;
    max-width: 100%;
  }
  .main-container #right-section #detailList { height: 100%; padding-bottom: 115px; }
  .main-container #right-section #detailList #messageContent {
    min-height: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .main-container #right-section > #top #contactBack #namenumber { font-size: 16px !important; }
  .main-container #right-section > #bottom #topsend #input-wrapper { min-width: 0; }
  #createContactModal .modal-dialog,
  #contactInfoModal .modal-dialog,
  #appointmentsModal .modal-dialog { margin: 8px !important; max-width: calc(100vw - 16px); }
}
@media (max-height: 550px) and (min-width: 601px) {
  :root { --tp-top-h: 68px; }
  .messaging-topbar { padding-top: 4px !important; padding-bottom: 4px !important; }
}

/* V5: reserve tab visibility before allocating search width. */
@media (min-width: 1001px) {
  .messaging-topbar { justify-content: space-between !important; }
  .messaging-topbar .topbar-left {
    flex: 1 1 auto !important;
    display: flex !important;
    min-width: 0 !important;
    gap: 12px !important;
  }
  .messaging-topbar .topbar-tabs-wrap {
    flex: 1 1 480px !important;
    min-width: min(480px, 45vw) !important;
    width: auto !important;
    max-width: none !important;
    overflow: hidden !important;
  }
  .messaging-topbar #phoneTabs { overflow-x: auto !important; }
  .messaging-topbar #phoneTabs > li { flex: 0 0 auto !important; }
  .messaging-topbar #topbarSearchSection {
    flex: 0 1 310px !important;
    min-width: 170px !important;
    max-width: 340px !important;
    width: auto !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
  }
  .messaging-topbar .topbar-right { flex: 0 0 auto !important; }
}
@media (min-width: 1001px) and (max-width: 1300px) {
  .messaging-topbar .topbar-tabs-wrap { min-width: 460px !important; flex-basis: 460px !important; }
  .messaging-topbar #topbarSearchSection { flex-basis: 250px !important; max-width: 290px !important; }
  .messaging-topbar .topbar-right { gap: 6px !important; }
  #filterChipsSection { max-width: 120px !important; }
}
@media (min-width: 821px) and (max-width: 1000px) {
  :root { --tp-top-h: 118px; }
  .messaging-topbar { align-items: flex-start !important; flex-wrap: wrap !important; align-content: flex-start !important; gap: 5px !important; }
  .messaging-topbar .topbar-left { flex: 1 1 100% !important; width: 100% !important; flex-wrap: wrap !important; gap: 5px !important; }
  .messaging-topbar .topbar-tabs-wrap { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; height: 49px; }
  .messaging-topbar #phoneTabs { height: 49px; }
  .messaging-topbar #topbarSearchSection { flex: 0 1 calc(100% - 175px) !important; min-width: 0 !important; width: calc(100% - 175px) !important; max-width: calc(100% - 175px) !important; }
  .messaging-topbar .topbar-right { position: absolute !important; right: 12px !important; top: 65px !important; }
  .messaging-topbar #filterChipsSection { display: none !important; }
}

/* V9: large-desktop Search location matching requested visual position.
   Reserve the left tab track rather than using an overlay or absolute offset. */
@media (min-width: 1500px) {
  .messaging-topbar .topbar-tabs-wrap {
    flex: 0 0 clamp(720px, 52vw, 1090px) !important;
    width: clamp(720px, 52vw, 1090px) !important;
    min-width: 0 !important;
    max-width: clamp(720px, 52vw, 1090px) !important;
  }
  .messaging-topbar #topbarSearchSection {
    flex: 0 1 390px !important;
    min-width: 230px !important;
    max-width: 420px !important;
  }
}
@media (min-width: 1301px) and (max-width: 1499px) {
  .messaging-topbar .topbar-tabs-wrap {
    flex: 0 0 46vw !important;
    width: 46vw !important;
    min-width: 0 !important;
    max-width: 46vw !important;
  }
}

/* v11: contact form switches (Hide, Favorite and Birthday options). */
#createContactModal .tp-contact-switch { display:flex; align-items:center; gap:10px; padding-left:0; margin:0 0 20px; min-height:32px; }
#createContactModal .tp-contact-switch .form-check-input { appearance:none; -webkit-appearance:none; float:none; position:relative; flex:0 0 44px; width:44px; height:25px; margin:0; border:1px solid #cbd5e1; border-radius:999px; background:#cbd5e1; box-shadow:none; cursor:pointer; transition:background .15s ease; }
#createContactModal .tp-contact-switch .form-check-input::after { content:''; position:absolute; left:3px; top:3px; width:17px; height:17px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .15s ease; }
#createContactModal .tp-contact-switch .form-check-input:checked { background:#28b477; border-color:#28b477; }
#createContactModal .tp-contact-switch .form-check-input:checked::after { transform:translateX(19px); }
#createContactModal .tp-contact-switch .form-check-input:focus-visible { outline:3px solid #93c5fd; outline-offset:2px; }
#createContactModal .tp-contact-switch .form-check-label { margin:0; cursor:pointer; }

/* TXTpass v12 - contact details alignment and persistent footer */
#contactInfoModal .modal-content { display: flex !important; flex-direction: column !important; }
#contactInfoModal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto !important; }
#contactInfoModal .modal-footer {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 16px; width: 100%; margin-top: auto; padding: 14px 24px !important;
  border-top: 1px solid #dee2e6; background: #fff; flex: 0 0 auto;
}
#contactInfoModal .modal-footer .owner-info { min-width: 0; overflow-wrap: anywhere; }
#contactInfoModal .modal-footer #editContact {
  min-width: 120px; padding: 10px 24px !important;
  background: #2ab67a; color: #fff; border: 0; border-radius: 7px;
}
#contactInfoModal .tp-contact-detail-line {
  display: flex !important; align-items: center !important; gap: 12px;
  min-height: 32px; margin-bottom: 6px; line-height: 1.4;
}
#contactInfoModal .tp-contact-detail-line > i {
  flex: 0 0 22px; width: 22px !important; margin-right: 0 !important;
  text-align: center; font-size: 16px;
}
#contactInfoModal .tp-contact-detail-line > a,
#contactInfoModal .tp-contact-detail-line > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  #contactInfoModal .modal-footer { padding: 12px 16px !important; }
  #contactInfoModal .modal-footer #editContact { min-width: 90px; }
}

/* v19: accessible date-of-birth picker for Add/Edit Contact */
.tp-dob-calendar{position:absolute;z-index:1090;left:0;top:calc(100% + 6px);width:min(360px,92vw);padding:14px;background:#fff;border:1px solid #cbd5e1;border-radius:14px;box-shadow:0 12px 30px #18253533;color:#172238;font-size:14px}
.tp-dob-calendar[hidden]{display:none!important}
.tp-dob-nav{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-bottom:8px}
.tp-dob-calendar button{border:0;background:transparent;border-radius:8px;cursor:pointer;padding:7px 9px;color:inherit}
.tp-dob-nav>button:first-child,.tp-dob-nav>button:last-child{color:#26b779;font-size:25px}
.tp-dob-title{font-weight:700;font-size:16px}
.tp-dob-month-select{display:block;width:100%;padding:6px;margin-bottom:10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff}
.tp-dob-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center}
.tp-dob-days>span{padding:8px 0;color:#64748b}
.tp-dob-calendar button:hover{background:#e9faf2}
.tp-dob-calendar button.selected{background:#29b77b;color:white}
.tp-dob-years{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tp-dob-footer{display:flex;justify-content:flex-start;margin-top:10px;border-top:1px solid #edf0f3;padding-top:6px}
.tp-dob-footer button{color:#26b779;font-weight:600}