/* ==========================================================================
   Messages (active chats, search, reply/forward) and the Activity Log.
   Only app.css variables are used, so dark mode follows automatically;
   logical properties (inline-start/end) keep RTL correct for AR/KU.
   ========================================================================== */

/* ---------- Shared search field ---------- */
.chat-search, .act-search{
  position:relative; display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:11px;
  padding:0 10px; min-height:38px; color:var(--ink-soft);
}
.chat-search:focus-within, .act-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--brand-glow); }
.chat-search svg, .act-search svg{ flex:0 0 auto; }
.chat-search input, .act-search input{
  flex:1 1 auto; min-width:0; border:none; outline:none; background:transparent;
  font-family:'Inter',sans-serif; font-size:13px; color:var(--ink); padding:8px 0;
}
.chat-search input::-webkit-search-cancel-button,
.act-search input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.act-search-clear{
  flex:0 0 auto; border:none; background:var(--surface-hover); color:var(--ink-soft);
  width:22px; height:22px; border-radius:50%; font-size:11px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.act-search-clear:hover{ color:var(--ink); }
.act-search-clear.hidden{ display:none; }

/* ---------- Messages: list ---------- */
.chat-people{ display:flex; flex-direction:column; }
.chat-people > .chat-search{ margin:10px 10px 6px; flex:0 0 auto; position:sticky; top:0; z-index:2; }
#chatPeople{ flex:1 1 auto; }
.chat-person .chat-meta{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:0; }
.chat-person .chat-meta time{ font-size:10.5px; color:var(--ink-soft); white-space:nowrap; }
.chat-person.has-unread .nm strong{ font-weight:800; }
.chat-person.has-unread .nm > span{ color:var(--ink); font-weight:600; }
.chat-person.has-unread .chat-meta time{ color:var(--rust); font-weight:700; }
.chat-empty-list{ margin:24px 12px; line-height:1.5; }

/* ---------- Messages: bubbles ---------- */
.bubble{ position:relative; transition:box-shadow .2s ease; }
.bubble .msg-body{ white-space:normal; }
.msg-tools{ display:inline-flex; gap:2px; margin-inline-start:auto; opacity:0; transition:opacity .15s ease; }
.bubble:hover .msg-tools, .bubble:focus-within .msg-tools{ opacity:1; }
@media (hover:none){ .msg-tools{ opacity:.8; } }
.msg-tool{
  border:none; background:none; color:inherit; cursor:pointer; padding:2px 4px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center; opacity:.75;
}
.msg-tool:hover{ opacity:1; background:rgba(127,127,127,.16); }
.msg-tool:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; opacity:1; }
[dir="rtl"] .msg-tool svg, [dir="rtl"] .msg-fwd svg{ transform:scaleX(-1); }
@media (pointer:coarse){ .msg-tool{ min-width:32px; min-height:28px; } }

.msg-fwd{ display:flex; align-items:center; gap:5px; font-size:11px; font-style:italic; opacity:.8; margin-bottom:4px; }
.msg-fwd strong{ font-style:normal; }

.msg-quote{
  display:flex; flex-direction:column; gap:1px; width:100%; text-align:start; cursor:pointer;
  margin:0 0 6px; padding:5px 9px; border:none; border-inline-start:3px solid var(--accent);
  border-radius:6px; background:rgba(127,127,127,.12); color:inherit; font-family:inherit;
}
.msg-quote:hover{ background:rgba(127,127,127,.2); }
.bubble.mine .msg-quote{ border-inline-start-color:rgba(255,255,255,.85); background:rgba(255,255,255,.16); }
.msg-quote-who{ font-size:11px; font-weight:700; color:var(--accent); }
.bubble.mine .msg-quote-who{ color:#fff; }
.msg-quote-text{ font-size:12px; opacity:.85; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.bubble.msg-flash{ animation:msgFlash 1.5s ease; }
@keyframes msgFlash{
  0%,40%{ box-shadow:0 0 0 3px var(--accent); }
  100%{ box-shadow:0 0 0 0 transparent; }
}
@media (prefers-reduced-motion:reduce){ .bubble.msg-flash{ animation:none; box-shadow:0 0 0 3px var(--accent); } }

/* ---------- Messages: reply bar above the compose box ---------- */
.chat-reply-bar{
  display:flex; align-items:center; gap:8px; flex:0 0 auto;
  margin:8px 12px 0; padding:7px 8px 7px 11px; border-radius:10px;
  background:var(--surface-soft); border:1px solid var(--panel-edge); border-inline-start:3px solid var(--accent);
}
.chat-reply-bar.hidden{ display:none; }
.chat-reply-inner{ flex:1 1 auto; min-width:0; }
.chat-reply-label{ font-size:11px; color:var(--ink-soft); }
.chat-reply-label strong{ color:var(--accent); }
.chat-reply-text{ font-size:12.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-reply-cancel{
  flex:0 0 auto; width:30px; height:30px; border:none; border-radius:8px; background:none;
  color:var(--ink-soft); cursor:pointer; font-size:13px;
}
.chat-reply-cancel:hover{ background:var(--surface-hover); color:var(--ink); }

/* ---------- Forward picker ---------- */
.modal.fwd-modal{ max-width:440px; display:flex; flex-direction:column; overflow:hidden; height:min(620px, 80vh); height:min(620px, 80dvh); }
.fwd-modal > .modal-head{ flex:0 0 auto; }
.fwd-preview{
  flex:0 0 auto; display:flex; flex-direction:column; gap:1px; margin:12px 14px 0; padding:7px 10px;
  border-radius:8px; background:var(--surface-soft); border-inline-start:3px solid var(--accent); min-width:0;
}
.fwd-preview .msg-quote-text{ color:var(--ink); }
.fwd-search{ margin:10px 14px; flex:0 0 auto; }
.fwd-list{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; border-top:1px solid var(--panel-edge); min-height:0; }
.fwd-target .fwd-send{
  flex:0 0 auto; font-size:11.5px; font-weight:700; color:var(--accent);
  border:1px solid var(--accent); border-radius:20px; padding:3px 11px;
}
.fwd-target:hover .fwd-send{ background:var(--accent); color:#fff; }
.fwd-target.busy{ opacity:.55; pointer-events:none; }

/* ---------- Activity log ---------- */
.modal.act-modal{
  max-width:680px; display:flex; flex-direction:column; overflow:hidden;
  height:min(760px, 86vh); height:min(760px, 86dvh);
}
.act-modal > .modal-head{ flex:0 0 auto; position:static; }
.act-toolbar{
  flex:0 0 auto; display:flex; flex-direction:column; gap:10px;
  padding:12px 18px 10px; border-bottom:1px solid var(--panel-edge); background:var(--panel);
}
.act-ranges{ display:flex; flex-wrap:wrap; gap:6px; }
.act-chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; color:var(--ink-soft);
  background:var(--surface-soft); border:1px solid var(--panel-edge); border-radius:20px;
  padding:6px 12px; cursor:pointer; min-height:32px;
}
.act-chip:hover{ color:var(--ink); background:var(--surface-hover); }
.act-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.act-chip:focus-visible, .act-date:focus-within{ outline:2px solid var(--accent); outline-offset:1px; }
.act-date{ padding-block:3px; }
.act-date input{
  border:none; background:transparent; color:inherit; font:inherit; font-size:12.5px;
  padding:0; min-width:0; width:122px; outline:none; cursor:pointer;
}
[data-theme="dark"] .act-date input::-webkit-calendar-picker-indicator{ filter:invert(1); }
.act-date.active input::-webkit-calendar-picker-indicator{ filter:invert(1); }
.act-summary{ font-size:11.5px; color:var(--ink-soft); min-height:14px; }
.act-summary.warn{ color:var(--amber-note-text); }

.act-list{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 18px 16px; }
.act-day{
  position:sticky; top:0; z-index:1; background:var(--panel);
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft);
  padding:12px 0 6px; border-bottom:1px solid var(--panel-edge);
}
.act-row{
  display:flex; align-items:flex-start; gap:10px; padding:10px 0;
  border-bottom:1px solid var(--panel-edge); font-size:13px; line-height:1.45;
}
.act-row:last-child{ border-bottom:none; }
.act-mark{ flex:0 0 auto; width:8px; height:8px; border-radius:50%; margin-top:6px; background:var(--slate); }
.act-add .act-mark{ background:var(--patina); }
.act-del .act-mark{ background:var(--danger); }
.act-mod .act-mark{ background:var(--steel); }
.act-main{ flex:1 1 auto; min-width:0; }
.act-text{ color:var(--ink); overflow-wrap:anywhere; }
.act-text .who{ font-weight:700; }
.act-handle{ font-size:11.5px; color:var(--ink-soft); margin-inline-start:4px; }
.act-time{ flex:0 0 auto; font-size:11.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; padding-top:1px; }
.act-list mark{ background:var(--pill-yellow-bg); color:inherit; border-radius:3px; padding:0 1px; box-shadow:0 0 0 1px var(--pill-yellow-border); }

/* ---------- Small screens: full-screen sheets ---------- */
@media (max-width:640px){
  #activityOverlay, #fwdOverlay{ padding:0; align-items:stretch; }
  #activityOverlay > .modal.act-modal,
  #fwdOverlay > .modal.fwd-modal{
    max-width:none; width:100%; height:100vh; height:100dvh; max-height:none;
    margin:0; border-radius:0; box-shadow:none;
  }
  .act-toolbar{ padding:10px 14px 8px; }
  .act-list{ padding:0 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .act-search, .chat-search{ min-height:44px; }
  .act-search input, .chat-search input{ font-size:16px; }   /* no iOS zoom-on-focus */
  .act-chip{ min-height:36px; }
  .act-row{ font-size:14px; padding:12px 0; }
  .fwd-list{ padding-bottom:env(safe-area-inset-bottom, 0px); }
}
@media (max-width:720px){
  .chat-people > .chat-search{ margin:10px 12px 6px; }
  .chat-reply-bar{ margin:8px 10px 0; }
  .chat-person .chat-meta time{ font-size:11.5px; }
}
@media (min-width:1600px){
  .modal.act-modal{ max-width:760px; }
}