/* === Chat panel & messages === */
/* make \n show as real line breaks and keep URLs from overflowing */
.bubble .body, .message .body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chatPanel{
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border-radius:var(--radius);
  padding:0;
  border:1px solid var(--border-weak-2);
  display:flex; flex-direction:column;
  min-height:0;
  position:relative;
}
.chatHead{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:.6rem; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--border-weak);
  background: linear-gradient(180deg, var(--header-glass-from), var(--header-glass-to));
  backdrop-filter: blur(6px);
  border-radius:1rem 1rem 0 0;
}
.chatTitle .title{ font-weight:700; font-size:1rem; color:#dfe8ff }
.subtitle{ color:var(--muted); font-size:.82rem }
.chatActions{ display:flex; gap:.5rem; align-items:center }

#messages{
  flex:1; min-height:0; overflow:auto; padding:14px 14px 0 14px;
  display:flex; flex-direction:column; gap:.5rem;
}
.chatMetaRow{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex: 1 0 100%;}

#chatForm { display: flex; flex-wrap: wrap; gap: 4px; }
#message { flex: 1; }
.iconBtn, #sendBtn { flex: 0 0 auto; }

.composer{
  display:flex; gap:.6rem; align-items:center; padding:10px 12px; border-top:1px solid var(--border-weak);
  background: linear-gradient(180deg, var(--composer-glass-from), var(--composer-glass-to));
  border-radius:0 0 1rem 1rem;
}
.composer .form-control{
  background:var(--input-bg); border:1px solid var(--border-weak); color:var(--text);
  padding:.65rem .75rem; border-radius:12px; flex:1; min-width:0;
}
.composer .form-control:focus{ outline:none; border-color:rgba(13,110,253,.7) }
.iconBtn{ background:transparent; border:0; color:var(--muted); padding:.35rem .5rem; border-radius:8px; cursor:pointer }
.iconBtn:hover{ background:rgba(255,255,255,.06); color:#fff }

.msgRow{ display:flex; gap:.6rem; align-items:flex-end; max-width:80%; margin-bottom:0.5rem; width:100%; }
.msgRow.own{ margin-left:auto; flex-direction:row-reverse; }
.avatarSmall{
  width:36px;                 /* make it square */
  height:36px;
  flex:0 0 36px;              /* if used in flex rows */
  position:relative;
    display:grid;                 /* ⬅️ grid */
  place-items:center; 
  border-radius:50%;
  overflow:hidden;
  background: linear-gradient(180deg, var(--accent-2), #178f89); /* fallback */
}

.avatarSmall > img{
  position:absolute;
  inset:0;                    /* top:0; right:0; bottom:0; left:0 */
  width:100%;
  height:100%;
  font-weight:700;
  object-fit:cover;           /* fill the circle */
  display:block;              /* kill baseline gap */
  /* Optional: tiny scale for stubborn 1px rings on some DPRs */
  /* transform: scale(1.01); */
}

.bubble{
  padding:.6rem .7rem; border-radius:12px; position:relative; display:inline-block;
  font-size:.94rem; line-height:1.2; word-break:break-word;
  border:1px solid var(--border-weak-2); box-shadow: 0 4px 18px rgba(0,0,0,.18);
  transition:transform .08s ease, opacity .12s ease; backface-visibility:hidden;
  padding-top:1.1rem;
  position:relative;
  min-width: 250px !important;
  max-width: 1000px !important;
}
.bubble:hover{ transform:translateY(-2px) }
.bubble.own{ background: linear-gradient(135deg, rgb(32 153 218 / 26%), rgb(0 135 255 / 20%)); color:#fff; border-radius:14px; }
.bubble.other{ background:var(--other-bg); color:#e6eef7 }

/* Highlight bubble when it mentions me */
.bubble.mention-me {
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.15), rgba(255, 209, 102, 0.05));
  border: 1px solid rgba(255, 209, 102, 0.4);
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(255, 209, 102, 0.15), inset 0 0 4px rgba(255, 209, 102, 0.2);
  position: relative;
}

/* Mention text styling */
.bubble .mention {
  background-color: rgba(255, 209, 102, 0.2);
  color: #ffda6b;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}
.bubble .mention:hover { background-color: rgba(255, 209, 102, 0.35); }

/* Mention autocomplete dropup */
.mentionSuggest {
  position: fixed;
  z-index: 3000;
  min-width: 220px;
  max-height: 260px;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border-weak);
  border-radius: 10px;
  box-shadow: 0 -12px 32px rgba(0,0,0,.35);
  display: none;
  transform-origin: bottom center;
}
.mentionSuggest .item { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; cursor: pointer; }
.mentionSuggest .item:hover, .mentionSuggest .item.active { background: rgba(45,180,166,.14); }
.mentionSuggest .avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg,var(--accent-2),#178f89);
  overflow: hidden;
}
.mentionSuggest .name { font-weight: 600; }
.mentionSuggest .sub  { font-size: .8rem; color: var(--muted); }

.meta{ display:flex; align-items:center; gap:.4rem; margin-bottom:.25rem }

.meta .time{ font-size:.72rem; color:var(--muted) }
.meta .sender { display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; }
.meta .sender .name { font-weight:600; }
.meta .sender .handle {
  color: var(--muted, #8b93a6);
  font-size:1em; opacity:.9; text-decoration:none; white-space:nowrap;
}
.meta .sender .handle::before { content:""; margin-right:.25rem; opacity:.6; }
.meta .sender .handle:hover { opacity:1; text-decoration:underline; }
.time {
	float: right;
	font-size: 0.85rem;
	color: dimgray;
	margin-top: 5px;
}



.sending{ opacity:0.85; filter:grayscale(.15) }
.pending-dot{ width:6px; height:6px; border-radius:50%; background:var(--muted); display:inline-block; margin-left:6px }

.tinyBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.15rem 0.4rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  min-height: 1.4rem;
}
.tinyBtn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }

.actionsRow { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.25rem; }

.deletedMsg {
  font-style: italic;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  display: inline-block;
  opacity: 0.85;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.deletedMsg:hover { opacity: 1; background: rgba(255, 255, 255, 0.07); }

/* System messages */
.msg-system { opacity:.8; font-size:.85rem; text-align:center; margin:8px 0; }

.system-message {
  background: rgba(255, 255, 255, 0.05); /* subtle background */
  border-left: 3px solid #ffc107;         /* gold accent */
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.9rem;
}

.system-message .sys-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.system-message .sys-line {
  opacity: 0.85;
}

.form-control-msg{
  resize: none;
  overflow-y: auto;
  line-height: 1.4;
  min-height: 2.5rem;
  max-height: 9rem;
  font-size: 16px;
   scrollbar-gutter: stable both-edges; */
  scrollbar-width: thin;
  scrollbar-color: var(--msg-scroll-thumb, rgba(148,163,184,.6)) transparent;
}

.form-control-msg::-webkit-scrollbar{
  width: 10px;
  height: 10px;
  background: transparent; 
}
.form-control-msg::-webkit-scrollbar-track{
  background: transparent;
}
.form-control-msg::-webkit-scrollbar-track-piece{
  background: transparent; 
}
.form-control-msg::-webkit-scrollbar-thumb{
  background-color: var(--msg-scroll-thumb, rgba(148,163,184,.6));
  border-radius: 12px;
  border: 2px solid transparent; 
  background-clip: padding-box;
}
.form-control-msg:hover::-webkit-scrollbar-thumb{
  background-color: var(--msg-scroll-thumb-hover, rgba(203,213,225,.75));
}
.form-control-msg::-webkit-scrollbar-corner{
  background: transparent;
}

.form-control-msg:hover::-webkit-scrollbar-track{
  background: transparent; 
}

:root[data-theme="light"]{
  --msg-scroll-thumb: rgba(100,116,139,.70);
  --msg-scroll-thumb-hover: rgba(71,85,105,.90);
}
:root{
  --msg-scroll-thumb: rgba(148,163,184,.60);
  --msg-scroll-thumb-hover: rgba(203,213,225,.75);
}