/* Step106 — dating lightbox, visible inbox shortcuts, Telegram-like messenger reactions. */

.header-messages-btn {
    display: inline-grid !important;
    place-items: center !important;
    position: relative !important;
    text-decoration: none !important;
}
.header-messages-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.dating-lightbox-open { width:100%; height:100%; display:block; padding:0; margin:0; border:0; background:transparent; cursor:zoom-in; }
.dating-lightbox-open img { width:100%; height:100%; display:block; object-fit:cover; }
.dating-photo-lightbox[hidden] { display:none !important; }
.dating-photo-lightbox { position:fixed; inset:0; z-index:99999; display:grid; place-items:center; background:rgba(3,7,18,.94); padding:18px; touch-action:none; }
.dating-photo-lightbox__figure { margin:0; width:min(94vw,1100px); height:min(90vh,900px); display:grid; place-items:center; position:relative; }
.dating-photo-lightbox__figure img { max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; user-select:none; -webkit-user-drag:none; }
.dating-photo-lightbox__figure figcaption { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); padding:5px 10px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; font-size:13px; font-weight:700; }
.dating-photo-lightbox__close,.dating-photo-lightbox__nav { position:absolute; z-index:2; border:0; color:#fff; background:rgba(17,24,39,.68); backdrop-filter:blur(8px); cursor:pointer; }
.dating-photo-lightbox__close { top:18px; right:18px; width:44px; height:44px; border-radius:50%; font-size:32px; line-height:1; }
.dating-photo-lightbox__nav { top:50%; transform:translateY(-50%); width:48px; height:60px; border-radius:16px; font-size:42px; }
.dating-photo-lightbox__nav--prev { left:18px; } .dating-photo-lightbox__nav--next { right:18px; }
body.has-dating-lightbox { overflow:hidden !important; }

/* Telegram-like compact reactions: hidden until the small smile button is pressed. */
.messenger-reactions { position:relative; margin-top:2px; min-height:0; }
.messenger-reaction-toggle { position:absolute; top:-32px; right:-34px; width:28px; height:28px; display:grid; place-items:center; padding:0; border:1px solid #e2e8f0; border-radius:50%; background:rgba(255,255,255,.94); color:#64748b; font-size:17px; line-height:1; box-shadow:0 3px 10px rgba(15,23,42,.10); opacity:0; transition:opacity .12s ease, transform .12s ease; cursor:pointer; }
.messenger-message.is-mine .messenger-reaction-toggle { right:auto; left:-34px; }
.messenger-message__bubble:hover .messenger-reaction-toggle,.messenger-message__bubble:focus-within .messenger-reaction-toggle,.messenger-reaction-toggle[aria-expanded="true"] { opacity:1; }
.messenger-reaction-bar { position:absolute !important; left:0; bottom:calc(100% + 6px); z-index:30; display:flex !important; flex-wrap:nowrap !important; gap:2px !important; margin:0 !important; padding:5px !important; border:1px solid #e5e7eb; border-radius:999px; background:rgba(255,255,255,.98); box-shadow:0 10px 28px rgba(15,23,42,.18); opacity:1 !important; transform:none !important; white-space:nowrap; }
.messenger-message.is-mine .messenger-reaction-bar { left:auto; right:0; }
.messenger-reaction-bar[hidden] { display:none !important; }
.messenger-reaction-bar form { margin:0 !important; }
.messenger-reaction-bar button { width:32px !important; height:32px !important; display:grid !important; place-items:center !important; padding:0 !important; border:0 !important; border-radius:50% !important; background:transparent !important; font-size:19px !important; }
.messenger-reaction-bar button:hover,.messenger-reaction-bar button.is-active { background:#eef2ff !important; transform:scale(1.08); }
.messenger-reaction-counts { display:flex !important; flex-wrap:wrap !important; gap:3px !important; width:max-content; max-width:100%; margin:2px 0 -8px 6px !important; position:relative; z-index:3; }
.messenger-message.is-mine .messenger-reaction-counts { margin-left:auto !important; margin-right:6px !important; }
.messenger-reaction-counts span { display:inline-flex !important; align-items:center !important; min-height:22px !important; padding:2px 6px !important; border:1px solid rgba(148,163,184,.35) !important; border-radius:999px !important; background:rgba(255,255,255,.92) !important; font-size:13px !important; line-height:1 !important; box-shadow:0 1px 4px rgba(15,23,42,.05); }
.messenger-reaction-counts span.is-active { border-color:#93c5fd !important; background:#eaf3ff !important; }

/* Make the composer feel closer to a messenger rather than a form card. */
.messenger-composer { position:sticky; bottom:8px; z-index:20; align-items:end; }
.messenger-editor-card { border-radius:22px !important; box-shadow:0 4px 14px rgba(15,23,42,.06); }
.messenger-editor-toolbar { gap:4px !important; padding:6px 8px 0 !important; }
.messenger-editor-toolbar button { min-height:30px !important; padding:5px 8px !important; border-radius:9px !important; font-size:13px !important; }
.messenger-send-btn,.messenger-file-btn { border-radius:50% !important; width:50px !important; min-width:50px !important; height:50px !important; }

@media (max-width:760px) {
  .dating-photo-lightbox { padding:0; }
  .dating-photo-lightbox__figure { width:100vw; height:100vh; }
  .dating-photo-lightbox__figure img { border-radius:0; }
  .dating-photo-lightbox__nav { display:none; }
  .dating-photo-lightbox__close { top:max(12px,env(safe-area-inset-top)); right:12px; }
  .messenger-reaction-toggle { opacity:.38; right:-30px; }
  .messenger-message.is-mine .messenger-reaction-toggle { left:-30px; }
  .messenger-reaction-toggle[aria-expanded="true"] { opacity:1; }
  .messenger-reaction-bar { max-width:calc(100vw - 90px); overflow-x:auto; scrollbar-width:none; }
  .messenger-reaction-bar::-webkit-scrollbar { display:none; }
}