/* /account/messages/css/messenger.css — clean messenger look (fixed bubbles, full-bleed) */

/* ========== TOKENS ========== */
:root{
  --bg:#f6f7f9; --surface:#fff; --surface-2:#f9fafb;
  --border:#e5e7eb; --muted:#6b7280; --text:#111827;
  --blue:#3b82f6; --violet:#8b5cf6;
  --out-grad:linear-gradient(135deg,#8b5cf6 0%,#3b82f6 100%);
  --in-bg:#eff1f4; --in-text:#111827; --out-text:#fff;
  --r-lg:18px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(0,0,0,.06); --sh-2:0 8px 30px rgba(0,0,0,.10);
  --fs-12:12px; --fs-14:14px; --fs-16:16px;

  /* adjust to your site chrome */
  --chrome-offset:64px;   /* top nav height */
  --footer-offset:72px;   /* site footer height (0 if none) */
}

/* ========== BASE (no page scrollbar) ========== */
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:ui-sans-serif,-apple-system,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow:hidden; /* messenger controls scrolling */
}
*{box-sizing:border-box}
a{color:#2563eb;text-decoration:none}
a:hover{text-decoration:underline}
:where(button,[role="button"],a,input,textarea){outline:none}
:where(button,[role="button"],a,input,textarea):focus-visible{
  box-shadow:0 0 0 3px rgba(37,99,235,.18),0 0 0 1.5px #2563eb inset;border-radius:6px}

/* ========== GRID SHELL (full-bleed between header & footer) ========== */
.msg-shell{
  position:fixed;
  top:var(--chrome-offset);
  bottom:var(--footer-offset);
  left:0; right:0;
  height:auto;

  /* FULL-BLEED: remove the old max-width container */
  max-width:none;       /* <— was 1440px */
  margin:0;             /* no centering */
  padding:10px 12px;    /* small edge padding */

  display:grid; gap:12px; align-items:stretch;
  grid-template-columns:280px minmax(0,1fr) 320px; /* center flexes */
  overflow:hidden;
}
@media (min-width:1600px){
  .msg-shell{grid-template-columns:300px minmax(0,1fr) 340px}
}
@media (max-width:1200px){.msg-shell{grid-template-columns:260px minmax(0,1fr)} .col-right{display:none}}
@media (max-width:900px){.msg-shell{grid-template-columns:1fr} .col-left{display:none}}

.col-left,.col-main,.col-right{height:100%;min-height:0}

/* ========== LEFT: THREADS ========== */
.col-left{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:10px;display:flex;flex-direction:column;box-shadow:var(--sh-1);overflow:hidden}
.left-head{position:relative;margin-bottom:8px}
.search{width:100%;height:38px;border:1px solid var(--border);background:var(--surface-2);
  border-radius:var(--r-pill);padding:0 40px 0 14px}
.badge{position:absolute;right:12px;top:8px;background:#ef4444;color:#fff;border-radius:var(--r-pill);font-size:11px;padding:2px 6px}
.search-drop{position:absolute;left:0;right:0;top:44px;z-index:5;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;max-height:40vh;overflow:auto;box-shadow:var(--sh-2)}
.thread-list{
  flex:1 1 auto; overflow-y:auto; overflow-x:hidden;
  border-radius:12px; background:var(--surface);
  scrollbar-width:thin; scrollbar-color:#d1d5db transparent
}
.thread-list::-webkit-scrollbar{width:8px}.thread-list::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:10px}
.thread-row{display:flex;align-items:center;gap:10px;width:100%;border:0;border-bottom:1px solid var(--border);
  background:transparent;padding:.6rem .7rem;text-align:left;cursor:pointer;transition:background .15s,transform .08s}
.thread-row:hover{background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.thread-row:active{transform:translateY(1px)}
.thread-row.is-active{background:color-mix(in srgb,#3b82f6 12%,var(--surface));border-bottom-color:transparent}
.thread-main{min-width:0;flex:1}
.thread-main .name{font-weight:600;font-size:13px}
.thread-main .muted{color:var(--muted);font-size:12px}
.thread-meta{flex:0 0 auto;text-align:right;color:var(--muted);font-size:11.5px;display:flex;flex-direction:column;gap:6px}
.pill{align-self:flex-end;background:#1f2937;color:#fff;font-size:11px;padding:2px 6px;border-radius:var(--r-pill)}
.thread-row.is-unread .name{font-weight:800}.thread-row.is-unread .pill{background:#3b82f6}

/* ========== CENTER: CHAT (sticky footer; internal scroll) ========== */
.col-main{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  display:flex;flex-direction:column;box-shadow:var(--sh-1);overflow:hidden}
.chat-head{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 14px;border-bottom:1px solid var(--border)}
.chat-head .title{font-weight:700;font-size:var(--fs-16);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head .rounded-circle{width:32px;height:32px}
.icon-btn{border:1px solid var(--border);background:var(--surface-2);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{background:#eaecef}

/* Only this scrolls; keep a slim, safe right gutter */
.chat-scroll{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  padding:18px 18px 96px 14px;        /* reduced right gutter from 24→18 */
  scrollbar-gutter:stable both-edges; /* reserve space for the scrollbar */
  background:linear-gradient(180deg,transparent,transparent 36px,color-mix(in srgb,var(--surface-2) 45%,transparent) 36px);
  scrollbar-width:thin; scrollbar-color:#d1d5db transparent;
}
.chat-scroll::-webkit-scrollbar{width:8px;height:8px}
.chat-scroll::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:10px}

/* Composer – always visible */
.composer{
  position:sticky; bottom:0; z-index:11;
  display:flex; align-items:center; gap:8px; background:var(--surface);
  padding:10px; border-top:1px solid var(--border);
  border-bottom-left-radius:var(--r-lg); border-bottom-right-radius:var(--r-lg);
  box-shadow:0 -1px 0 rgba(0,0,0,.03);
}

/* guards */
.chat-scroll *{max-width:100%; word-wrap:break-word; overflow-wrap:anywhere; box-sizing:border-box}
.chat-scroll .d-flex{min-width:0; flex-wrap:wrap}
.chat-scroll .mb-3.d-flex{overflow:hidden}
.chat-scroll img{max-width:100%; height:auto}

/* ========== BUBBLES ========== */
/* NOTE: your markup uses <div class="d-inline-block p-2 rounded-3 ...">
   so we target .p-2.rounded-3 (no Bootstrap .border needed) */
.p-2.rounded-3{
  position:relative; display:block; width:fit-content; min-width:96px; max-width:65%;
  padding:10px 14px; margin-bottom:28px; border:none; border-radius:18px;
  box-shadow:0 1px 3px rgba(0,0,0,.08); font-size:14px; line-height:1.45;
  word-wrap:break-word; overflow-wrap:anywhere;
}
.p-2.rounded-3:not(.bg-light){
  background:var(--in-bg); color:var(--in-text);
  border-radius:18px 18px 18px 6px; margin-left:48px;
}
.p-2.rounded-3.bg-light{
  background:var(--out-grad); color:var(--out-text);
  border-radius:18px 18px 6px 18px; margin-left:auto; margin-right:10px; /* slimmer edge offset */
  box-shadow:0 2px 8px rgba(59,130,246,.25);
}
.p-2.rounded-3.bg-light a{color:#3e68ff;text-decoration:underline}

/* timestamp BELOW bubble */
.p-2.rounded-3 .small.text-muted{ display:block; position:static; margin-top:4px; font-size:11.5px; color:var(--muted); text-align:left; }
.text-end .p-2.rounded-3 .small.text-muted{ text-align:right }

/* hover actions beside bubble */
[data-mid] .mt-1.d-flex.gap-2{
  position:absolute; top:50%; transform:translateY(-50%);
  right:calc(100% + 6px); display:flex; gap:6px; opacity:0; transition:opacity .12s; z-index:2;
}
[data-mid]:hover .mt-1.d-flex.gap-2{ opacity:1 }
[data-mid] .mt-1.d-flex.gap-2>*{ background:#fff; color:#374151; border:1px solid #e5e7eb; border-radius:6px; padding:2px 8px; cursor:pointer; }
[data-mid] .mt-1.d-flex.gap-2>*:hover{ background:#f3f4f6 }
.text-end [data-mid] .mt-1.d-flex.gap-2, .text-end .mt-1.d-flex.gap-2{ left:calc(100% + 6px); right:auto }

/* optional centered day divider */
.chat-divider{
  display:inline-block; margin:8px auto 18px; padding:4px 10px;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--border);
  font-size:12px; border-radius:999px; box-shadow:var(--sh-1);
}

/* ========== COMPOSER INPUTS ========== */
.composer .input{
  flex:1; min-height:42px; max-height:180px; resize:vertical;
  border:1px solid var(--border); border-radius:20px; padding:10px 12px; background:#fff
}
.composer .send{
  height:34px; padding:0 14px; border-radius:20px; background:var(--blue); color:#fff;
  border:1px solid var(--blue); cursor:pointer
}
.composer .send:hover{ filter:brightness(1.05) }

/* ========== RIGHT: INFO ========== */
.col-right{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:14px 14px 16px; overflow-y:auto; overflow-x:hidden; box-shadow:var(--sh-1)
}
@media (max-width:1280px){.col-right{display:none}}
.info-card{text-align:center; position:sticky; top:0; z-index:5; background:var(--surface); padding-top:8px; margin-top:-8px}
.info-avatar{width:84px; height:84px; border-radius:50%; margin:6px auto 8px; background:#e5e7eb; overflow:hidden}
.info-name{font-weight:700; margin-top:6px}

/* ========== AVATARS & UTILS ========== */
.rounded-circle{width:28px;height:28px;object-fit:cover;border:1px solid var(--border);border-radius:50%}
.thread-left .rounded-circle{width:36px;height:36px}
.chat-scroll .rounded-circle{width:24px;height:24px}
.muted{color:var(--muted)} .text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[dir="rtl"] .thread-meta{text-align:left}