/* =====================================================================
   EIDOK MESSENGER v2: full-height app layout (desktop), full-screen chat (phones)
   ===================================================================== */
body.ek-page-messenger .footer, body.ek-page-messenger footer.footer, body.ek-page-messenger .ek-footer { display: none !important; }

/* threads panel */
.ek-threads-head { padding: 14px 14px 10px !important; border-bottom: 1px solid var(--ek-line) !important; }
.ek-threads-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ek-threads-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.ek-threads-search { display: flex; align-items: center; gap: 8px; margin: 12px 0 10px; padding: 0 14px; height: 40px; border-radius: 999px; background: var(--ek-surface-2); border: 1px solid transparent; transition: border-color .15s, background .15s; cursor: text; }
.ek-threads-search:focus-within { border-color: var(--ek-brand); background: var(--ek-surface); }
.ek-threads-search svg { width: 17px; height: 17px; color: var(--ek-text-2); flex: none; }
.ek-threads-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ek-text); font-size: 14.5px; }
.ek-threads-tabs { display: flex; gap: 6px; }
.ek-threads-tabs button { border: 0; background: transparent; color: var(--ek-text-2); font-weight: 700; font-size: 13.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.ek-threads-tabs button.active { background: var(--ek-brand-soft); color: var(--ek-brand); }
.js_live-messages-alt .feeds-item.ek-hide { display: none !important; }
.ek-threads-none { padding: 28px 16px; text-align: center; color: var(--ek-text-2); font-size: 14px; list-style: none; }

/* thread header */
.ek-thread-head { display: flex !important; align-items: center; gap: 8px; padding: 10px 12px !important; border-bottom: 1px solid var(--ek-line) !important; background: var(--ek-surface) !important; }
.ek-thread-back { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--ek-text); display: inline-flex; align-items: center; justify-content: center; margin-left: -4px; }
.ek-thread-back svg { width: 24px; height: 24px; }
.ek-thread-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--ek-text) !important; }
.ek-thread-av { position: relative; flex: none; width: 42px; height: 42px; }
.ek-thread-av img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.ek-thread-av2 { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: center/cover no-repeat var(--ek-surface-2); border: 2px solid var(--ek-surface); left: 0; top: 0; }
.ek-thread-av2.is-b { left: auto; top: auto; right: 0; bottom: 0; }
.ek-online { position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: #22C55E; border: 2px solid var(--ek-surface); }
.ek-thread-t { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ek-thread-t b { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ek-thread-t small { font-size: 12.5px; color: var(--ek-text-2); }
.ek-thread-t small .is-on { color: #16A34A; font-weight: 700; }
.ek-thread-actions { flex: none; display: flex; align-items: center; gap: 2px; }
.ek-ico { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ek-text); display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.ek-ico:hover, .ek-ico[aria-expanded="true"] { background: var(--ek-surface-2); }
.ek-ico .main-icon, .ek-ico .main-icon * { color: var(--ek-brand) !important; }
.ek-thread-actions .dropdown-menu { border-radius: 14px; padding: 6px; min-width: 210px; border: 1px solid var(--ek-line); box-shadow: 0 16px 40px rgba(0, 0, 0, .14); }
.ek-thread-actions .dropdown-item { border-radius: 10px; padding: 9px 12px; font-weight: 600; display: flex; align-items: center; }

/* chat colour picker: a small palette swatch instead of a bare red dot */
.chat-form .x-form-tools-colors i { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(#E41E26, #F59E0B, #22C55E, #1565D8, #8A2BE2, #E41E26); color: transparent !important; box-shadow: inset 0 0 0 3px var(--ek-surface); }
.chat-form .x-form-tools-colors i::before { opacity: 0; }

/* composer: bigger tap targets */
.chat-form .x-form-tools { display: flex !important; align-items: center; gap: 2px; margin: 8px 0 0 !important; padding: 0 !important; }
.chat-form .x-form-tools > li { width: 40px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; float: none !important; cursor: pointer; }
.chat-form .x-form-tools > li i { color: var(--ek-brand); }
.chat-form .x-form-tools-post { margin-left: auto !important; box-shadow: 0 6px 16px rgba(214, 36, 110, .3); }
.chat-form .x-form-tools-post i { color: #fff !important; }
.chat-form-message textarea { font-size: 15px !important; }
.conversation-body .time { opacity: .75; }

/* empty state */
.ek-msg-empty .card-body { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.ek-msg-empty-art { width: 84px; height: 84px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background: var(--ek-grad); color: #fff; box-shadow: 0 14px 34px rgba(214, 36, 110, .3); margin-bottom: 10px; transform: rotate(-6deg); }
.ek-msg-empty-art svg { width: 40px; height: 40px; transform: rotate(6deg); }
.ek-msg-empty h2 { font-size: 20px; margin: 0; }
.ek-msg-empty p { color: var(--ek-text-2); margin: 0 0 10px; }
.ek-msg-empty-btn { padding: 10px 22px !important; font-weight: 800; }

/* desktop / tablet: the page is the app, no page scroll */
@media (min-width: 768px) {
  .ek-messenger { height: calc(100vh - 70px - 36px); height: calc(100dvh - 70px - 36px); min-height: 480px !important; margin-top: 18px !important; }
  .ek-messenger > .row, .ek-messenger .sg-offcanvas-sidebar, .ek-messenger .js_conversation-container { height: 100%; }
  .ek-messenger .ek-threads, .ek-messenger .js_conversation-container > .card { height: 100%; display: flex; flex-direction: column; margin: 0 !important; overflow: hidden; }
  .ek-messenger .ek-threads .js_live-messages-alt { flex: 1 1 auto; min-height: 0; padding-top: 6px !important; }
  .ek-messenger .js_live-messages-alt > .slimScrollDiv, .ek-messenger .js_live-messages-alt .js_scroller { height: 100% !important; }
  .ek-messenger .js_live-messages-alt .js_scroller { overflow-y: auto !important; }
  .ek-messenger .panel-messages > .card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 !important; }
  .ek-messenger .panel-messages .card-body > .slimScrollDiv { flex: 1 1 auto; min-height: 0; height: auto !important; }
  .ek-messenger .panel-messages .chat-conversations { height: 100% !important; overflow-y: auto !important; }
  .ek-messenger .panel-messages .card-body > .chat-conversations { flex: 1 1 auto; min-height: 0; }
}

/* phones: an open chat takes the whole screen (site header and bottom bar covered) */
@media (max-width: 767.98px) {
  .ek-messenger { margin-top: 0 !important; padding: 0 !important; }
  .ek-messenger .ek-threads { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; min-height: calc(100dvh - 140px); }
  .ek-messenger:not(.active) .js_conversation-container {
    position: fixed !important; inset: 0; z-index: 1045; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
    display: flex !important; flex-direction: column; height: 100vh; height: 100dvh; background: var(--ek-surface); transform: none !important; left: 0 !important;
  }
  .ek-messenger:not(.active) .js_conversation-container > .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .ek-messenger:not(.active) .panel-messages > .card-header { padding-top: calc(10px + env(safe-area-inset-top)) !important; }
  .ek-messenger:not(.active) .panel-messages > .card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 !important; }
  .ek-messenger:not(.active) .panel-messages .card-body > .slimScrollDiv { flex: 1 1 auto; min-height: 0; height: auto !important; }
  .ek-messenger:not(.active) .panel-messages .chat-conversations { flex: 1 1 auto; min-height: 0; height: 100% !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  .ek-messenger:not(.active) .chat-form { padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
  body.ek-page-messenger:has(.ek-messenger:not(.active)) { overflow: hidden; }
  .ek-msg-empty .card-body { min-height: 60dvh; }
  /* list view shows only the list (no empty chat panel peeking behind it) */
  .ek-messenger.active .sg-offcanvas-mainbar { visibility: hidden; }
  .ek-messenger .ek-threads { margin: 0 !important; box-shadow: none !important; }
}

/* =====================================================================
   PAGE HEADERS (search, groups, pages, market, ...): brand colours, phone-friendly
   ===================================================================== */
.page-header { position: relative; overflow: hidden; background: var(--ek-grad) !important; }
.page-header .circle-2, .page-header .circle-3 { background: rgba(255, 255, 255, .08) !important; }
.page-header .input-group { border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); }
@media (max-width: 767.98px) {
  .page-header { padding: 26px 0 44px !important; }
  .page-header h2 { font-size: 24px !important; }
  .page-header .text-xlg { font-size: 14.5px !important; opacity: .92; }
  .page-header .floating-img { display: none !important; }
  /* two fields (marketplace: product + location) stack instead of being cut off */
  .page-header .input-group:has(> .form-control + .form-control) { flex-wrap: wrap; gap: 8px; box-shadow: none; }
  .page-header .input-group:has(> .form-control + .form-control) > .form-control,
  .page-header .input-group:has(> .form-control + .form-control) > .btn { flex: 1 1 100% !important; width: 100% !important; margin: 0 !important; border-radius: 14px !important; height: 46px; }
}