/* DM pills (avatar-only) */
    .dept-section .group-pills .pill.dm { padding:0; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; }
    .dept-section .group-pills .pill.dm .avatar.xs { background: var(--bg); width:28px; height:28px; border-radius:50%; overflow:hidden; }
    .dept-section .group-pills .pill.dm .avatar.xs .initials { display:grid; place-items:center; width:100%; height:100%; font-weight:700; }

    /* User card popup tweaks */
    dialog.user-modal .modal-card { padding: .75rem; }
    dialog.user-modal .section + .section { border-top: var(--line); margin-top:.5rem; padding-top:.5rem; }
    dialog.user-modal .user-card .avatar.xl { width:72px; height:72px; border-radius:12px; overflow:hidden; background:var(--muted); }
    dialog.user-modal .user-card .u-meta .muted { color: var(--text-muted); }

    /* ----- Left list (unchanged from your build, kept minimal) ----- */
    .dept-list { display:flex; flex-direction: column; gap:.5rem; overflow-x: auto; padding: 1px 5px; scrollbar-width: none; margin: 0px -8px; height: 73vh;}
    .dept-section { border:var(--line); height:30px; overflow:clip; border-radius:10px; padding:4px; }
    .dept-section.open{height:auto !important}
    .dept-section .caret { margin-left:auto; border:0; background:transparent; cursor:pointer; transform:rotate(0deg); transition: transform .2s ease; }
    .dept-section.open .caret { transform: rotate(180deg); }
    .dept-section .group-list { display:flex; flex-direction:column; gap:.5rem; padding:.35rem; max-height:0; overflow:hidden; opacity:0; transition:max-height .25s ease, opacity .2s ease; }
    .dept-section.open .group-list { max-height:600px; opacity:1; }
    .group-row { display:grid; grid-template-columns: 28px 1fr; gap:.5rem; align-items:center; padding:.15rem .3rem; border-radius:10px; background: var(--muted); border:0; text-align:left; cursor:pointer; }
    .group-row .avatar.xs { width:28px; height:28px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background: var(--bg); font-weight:700; }
    .group-row .dm-meta { display:flex; flex-direction:column; min-width:0; }
    .dept-pill { display:flex; align-items:center; gap:.5rem; font-weight:600; }
    .dept-section .group-pills { display:flex; flex-wrap:wrap; gap:.35rem; padding:.35rem; }
    .dept-section .group-pills .pill { border:0; border-radius:999px; padding:.25rem .5rem; background: var(--muted); cursor:pointer; }
    .dept-section .group-pills .pill.active { background:var(--primary-faded); }
    /* ----- Three-col expansion when info is open ----- */
    .three-col.show-info { --col-right: 1.2fr; grid-template-columns: var(--col-left) var(--col-center) var(--col-right);}
    .belt-btn i {pointer-events: none;}
    .panel .right-panel {
     overflow: auto;
     scrollbar-width: none;
    }
    /* 1s spin when toggling scope */
  /* Removed parent dependency and added inline-block */
  .rotating { display: inline-block;  animation: toggle-spin 1s ease; }

  @keyframes toggle-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  .dm-list { display:flex; flex-direction:column; gap:.5rem; padding:.35rem 0; }
  .dm-row { display:grid; grid-template-columns: 28px 1fr; gap:.5rem; align-items:center; padding:.35rem .5rem; border-radius:10px; background: var(--muted); border: 0; text-align:left; cursor:pointer; }
  .dm-row.active { background: color-mix(in oklab, var(--primary) 10%, transparent); }
  .dm-row .avatar.xs { width:28px; height:28px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background: var(--bg); }
  .dm-row .dm-meta { display:flex; flex-direction:column; min-width:0; }
  .dm-row .dm-name {font-weight: 600; display: flex; align-items: center; justify-content: space-between;}
  .dm-row .dm-preview { font-size:.85em; opacity:.85; white-space:nowrap; overflow: hidden; text-overflow:ellipsis;}
  /* ----- Chat header ----- */
  .chat-header {display:flex;align-items:center;gap:var(--gap);padding: .3rem .5rem;border-bottom:var(--line);position: relative;background:transparent;backdrop-filter:var(--backdrop);z-index: 10;}
  .chat-header .avatar.lg { width:36px; padding:1px; height:36px; border:var(--line); border-radius:50%; display:inline-grid; place-items:center; font-weight:700; background:rgba(255,255,255,.08); }
  .chat-header .title h2 { margin:0; font-size:1rem; }
  .chat-header .title .link.sm {font-size: 0.6rem;opacity:.8;padding:0;}
  .chat-header .title{display:grid}
  .chat-header .spacer { flex:1; }
  #chatInput { min-height: 38px; max-height: 40vh; overflow-y: auto; box-sizing: border-box; }
  .chat-header .menu { position:absolute; top:50%; right:5.5rem; background: var(--surface); border: var(--line); border-radius: 8px; padding:.25rem; min-width: 180px; box-shadow: var(--shadow); z-index: 10; }
  .chat-header .menu hr { border:none; border-top:1px solid rgba(255,255,255,.1); margin:.25rem 0; }
  .chat-header .menu > button { width:100%; text-align:left; padding:.4rem .5rem; background:none; border:0; cursor:pointer; }
  .chat-header .menu > button.danger { color: #ff6b6b; }
    /* ----- Messages: avatar → bubble with time inside ----- */
    .messages {display:flex;margin-top:-47px;flex-direction:column;gap:.5rem;padding: .5rem;padding-top:50px;padding-bottom: 63px;overflow-y:auto;}
    .date-chip { display:grid; place-items:center; margin:.5rem 0; }
    .date-chip .pill { background: rgba(255,255,255,.08); border: var(--line); border-radius:999px; font-size:10px; padding:.05rem .4rem; color: var(--text-muted); }
    .msg {display:flex;gap: .7rem;align-items: center;}
    .msg.me {flex-direction: row-reverse;}
    .msg .avatar.sm {cursor:pointer;border:0;width:25px;height:25px;border-radius:50%;color:#000;display:inline-grid;place-items:center;font-weight:700;margin-top: 0px;}
    .me .avatar.sm{display:none;}
    .msg { position: relative; }
    .msg .msg-content { position: relative; display:flex; flex-direction: row-reverse; max-width:72%; }
    .me .msg-content { flex-direction: row; }
    .file-pill {display: inline-flex; align-items: center; gap: .4rem; height: 60px; border-radius: 10px;
      padding: 0 5px; background: var(--dots); cursor: pointer; font-size: 10px; margin: 5px 0;}
    .msg .bubble .text {position: relative;background: var(--dots);border-radius: 15px;padding: .5rem .5rem;padding-bottom: .5rem;white-space:pre-wrap;word-break:break-word;font-size: 11px;min-width: 50px;}
    .me .bubble .text {background: var(--primary-dark);color: #fcfcfc;}
    .msg .bubble .time { font-size:.72em; opacity:.7; display:flex; justify-content:flex-end; }
    .msg .bubble .media img {max-width:320px;height:auto;border-radius:8px;display:block;contain: content;}
    .msg .bubble .media .expand-btn { position:absolute; top:6px; right:6px; border:0; background:rgba(0,0,0,.4); color:#fff; border-radius:6px; width:28px; height:28px; display:grid; place-items:center; cursor:pointer; }
    .msg .bubble .media .file-ph { width:320px; height:180px; display:grid; place-items:center; border-radius:8px; background:
      radial-gradient(var(--dots) 5px, transparent 20px),
      radial-gradient(var(--dots) 5px, transparent 20px),
      linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04)); }
    /* FIX: pending message treatment + three-dot overlay */
    .msg .bubble.pending { opacity:.4; }
    .msg .bubble .loading-dots{
      position:absolute; right:10px; bottom:18px; display:inline-flex; gap:4px;
    }
/* --- Style for Code Blocks --- */

/* The main container that holds the header and the <pre> tag */
.code-block-container {
     /* Dark gray background */
     border-radius: 8px;
     overflow: hidden; /* This is crucial to make border-radius work */
     /* margin-top: -50px; */
     display: grid;
     gap: 1px;
}

/* The header bar at the top */
.code-header {
    background-color: #3a3a3a; /* Slightly lighter gray for the header */
    padding: 0.5em 1em;
    display: flex;
    justify-content: space-between; /* Puts language on left, copy button on right */
    align-items: center;
}

/* The language name label */
.language-name {
    color: #ccc;
    font-size: 0.9em;
    font-family: sans-serif;
    font-weight: bold;
    text-transform: uppercase;
}

/* The <pre> tag that holds the code. We remove its default styling. */
.code-block {
    margin: 0;
    padding: 0;
    background: none; /* The container provides the background now */
}

/* The <code> tag itself */
.code-block code {
    display: block;
    padding: 1em 1.5em; /* Padding for the code inside the box */
    color: var(--text); /* Light text color for the code */
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 1em;
    line-height: 1.5;
    white-space: pre;
    overflow-x: auto; /* Adds a horizontal scrollbar if a line is too long */
}
/* --- Add this to your CSS for the copy button --- */
.copy-button {
    background-color: #555;
    color: #fff;
    border: none;
    padding: 0.3em 0.7em;
    border-radius: 5px;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 0.8em;
    transition: background-color 0.2s;
}

.copy-button:hover {
    background-color: #666;
}

.copy-button.copied {
    background-color: #008a00; /* Green color when copied */
}
    .msg .bubble pre.code-block {
      overflow: auto;
      border-radius: 8px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      background: rgba(0,0,0,.25);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: .9em;
    }
    .msg .bubble code {font-family: inherit;background:var(--bg)}
      /* FIX: selection affordance in emoji popover */
    dialog.rect-popover .rx-btn.selected {outline: 1px solid var(--primary);border-radius: 20px; padding: 0 2px !important; margin:4px 0 4px 4px}
    .msg .bubble .loading-dots i{ width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7;animation:ldb 1s infinite both; }
    .msg .bubble .loading-dots i:nth-child(2){ animation-delay:.15s; }
    .msg .bubble .loading-dots i:nth-child(3){ animation-delay:.3s; }
    @keyframes ldb { 0%,80%,100%{transform:scale(.6);opacity:.4;} 40%{transform:scale(1);opacity:1;} }
    .msg .bubble .filename { margin-top:.25rem; font-size:.85em; opacity:.85; }
    /* Reactions strip */
    .msg .bubble .rx-strip { display:flex; justify-content:flex-end; }
    .msg .sender-line { font-size:.8rem; opacity:.85; margin:0 0 .15rem; display:flex; align-items:baseline; gap:.3rem; }
    .msg .sender-line .sl-name.visually-hidden { display:none; }
    .msg .actions-bar .ab-left { display:flex; align-items:center; gap:.25rem; }
    .msg .actions-bar .ab-right {display: none;align-items:center;gap:.35rem;}
    .msg .actions-bar .ab-copy { border:0; background:transparent; opacity:0; transition:opacity .15s ease; cursor:pointer; }
    .msg:hover .actions-bar .ab-copy { opacity:1; }
    .msg .actions-bar .ab-plus { border:0; background:transparent; font-weight:700; cursor:pointer; }
    .msg .actions-bar .rx-strip:empty { display:none; }
    .msg .actions-bar .ab-seen { display:inline-flex; align-items:center; gap:.25rem; font-size:.85em; opacity:.75; }
    .msg .bubble .attch-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, .5fr));
      gap: 0;
    }
    .group-row.active {background: var(--primary-dark);color: #fcfcfc;}
    #chatMessages { position: relative; }
    #chatMessages.drop-hover::after {
      content: '';
      position: fixed; inset: 0;
      border-radius: 12px;
      z-index: 50;
      border: 5px dashed var(--primary);
      backdrop-filter: blur(4px);
      background: color-mix(in oklab, var(--primary) 6%, transparent);
      pointer-events: none;
    }

    .dm-row.drop-hover, .group-row.drop-hover {
      outline: 3px dashed var(--primary);
      outline-offset: -4px;
    }
    .dm-preview.truncate{font-size: 9px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;opacity: 0.3;}
    .dm-name.truncate{display: flex;font-size: 11px;justify-content: space-between;align-items: center;}
    .msg .bubble .attch-grid .attch-card {border-radius: 8px; overflow: hidden; transform-origin: center center; transition: transform 0.3s ease, z-index 0s 0.3s;}
    .msg .bubble .attch-grid .attch-card:hover { transform-origin: 100% 0%; transform: scale(1.1) rotateZ(10deg) translateY( -5px); z-index: 10; transition: transform 0.3s ease, z-index 0s;}
    .msg .bubble .attch-grid .attch-card img { width: 100%; height: 100%; object-fit: cover; }
    .msg .bubble .media .tagged { border-left: 2px solid rgba(255,255,255,.25); padding-left: .5rem; margin-bottom: .35rem; opacity: .9; }
    dialog.attch-viewer .ti.active { outline: 2px solid var(--primary); }
    .reply-chip {Pointer-events:all;position: relative;width: 50%;left: -2%;border: var(--line);border-radius: 10px;padding: .25rem .5rem;color: #fff;align-content: center;background: var(--bgblur);backdrop-filter: blur(3px);}
    .reply-chip .rc-wrap { display:flex; gap:.5rem; align-items:center; justify-content:space-between; }
    .reply-chip .rc-tease { opacity:.8; font-size:.85em; overflow:hidden; text-overflow:ellipsis; text-wrap-mode:nowrap;}
    .reply-chip .rc-x { border:0; background:transparent; cursor:pointer; }
    .reply-hint {display: flex;position: absolute; align-items: flex-end; top:50%;}
    .rx-wrap {display:flex;gap: .15rem;}
    .rx-btn{padding:3px !important;}
    .rx-chip {background: var(--primary-dark);padding:0 .3rem 0 .2rem;display: flex;border-radius: 100px;line-height: 15px;font-size: 0.8em;align-items: center;margin-top: -10px;}
    .me .rx-chip{background:var(--muted)}
    /* Audio bubble */
    .audio-bubble {display:flex;width:200px;align-items:center;gap:.5rem;padding:.35rem;border-radius: 20px;background: var(--dots);}
    .audio-bubble .ab-play {width: 25px;height: 25px;border-radius:50%;border:0;background:var(--primary);color:#000;font-weight:700;cursor:pointer;}
    .audio-bubble .ab-bar { flex:1; height:6px; border-radius:4px; background: rgba(255,255,255,.15); overflow:hidden; position:relative; }
    .audio-bubble .ab-fill {position:absolute;inset:0 auto 0 0;width:0%;height:100%;background: var(--primary-light);}
    .audio-bubble .ab-time {text-align:right;opacity:.8;font-size: .75em;}
    /* Message actions modal */
    dialog.msg-actions .modal-card { width: min(420px, 92vw); }
    .msg-actions .rx-row { display:flex; gap:.5rem; justify-content:space-between; }
    .msg-actions .rx-row .rx-btn { width:56px; height:56px; border-radius:12px; font-size:22px; border:1px solid rgba(255,255,255,.12); background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .msg-actions .menu-list { display:grid; gap:.25rem; }
    .msg-actions .menu-list > button { text-align:left; padding:.4rem .6rem; border:0; background:transparent; cursor:pointer; }
    .msg-actions .menu-list > button.danger { color:#ff6b6b; }
    /* Attach popover */
    dialog.menu-popover::backdrop { background: transparent; backdrop-filter:none; }
    .popover-card {display:flex;flex-direction: row;color:var(--text);background:transparent;border:var(--line);border-radius:10px;}
    .attach-menu .popover-card {flex-direction: column !important;}
    .popover-card > button { text-align:left; border:0; background:transparent; padding:.4rem .5rem; cursor:pointer; }
    .popover-card hr { border:none; border-top:1px solid rgba(255,255,255,.1); margin:.25rem 0; }
    /* Voice recorder */
    /* Hide sine wave canvas and show only bar-fill */
    .audio-bubble canvas.ab-wave{ display:none !important; }
    .tagged-msg{width: 230px; overflow: hidden;}
    /* Generic disabled visual */
    .disabled, [aria-disabled="true"], button:disabled, .icon-btn[disabled] { opacity:.5; cursor:not-allowed; filter:grayscale(0.3); }
    .voice-modal .vr-body { display:flex; flex-direction:column; gap:0.2rem; margin-bottom:10px; align-items:center; }
    .voice-modal .btn.round { display:flex; box-shadow:none; justify-content:center; align-items: center; width:20px; font:-webkit-small-control; height:20px !important; border-radius:50%; border:0; background:var(--primary); font-size:20px; color: var(--text); margin:5px;}
    .voice-modal .vr-live { display: flex; align-items: center; padding: 0 3px 0 0; gap: 8rem; background: var(--primary-faded); border: var(--line); border-radius: 10px; box-shadow: var(--shadow);}
    .voice-modal .vr-preview { display:flex; align-items:center; padding: 0 3px 0 0; gap:0.3rem; background: var(--primary-faded); border: var(--line); border-radius: 10px; box-shadow: var(--shadow); width:100%; }
    /* Generic audio progress styles (also used in recorder preview) */
    .ab-bar { flex:1; height:6px; border-radius:4px; background: rgba(255,255,255,.15); overflow:hidden; position:relative; }
    .ab-bar .ab-thumb { position:absolute; top:50%; transform:translate(-50%,-50%); width:10px; height:10px; border-radius:50%; background: var(--primary); opacity:0; transition: opacity .15s; pointer-events:none; }
    .ab-bar:hover .ab-thumb, .ab-bar .ab-thumb[data-hover] { opacity:1; }
    .ab-fill { position:absolute; inset:0 auto 0 0; width:0%; height:100%; background:var(--primary); }
    /* Poll bubble */
    .poll-bubble {display:flex;flex-direction:column;gap:.5rem;background: var(--primary-dark);padding: 10px 5px;border-radius: 10px;}
    .poll-bubble .poll-q {font-weight: 900;}
    .poll-bubble .poll-opts { display:flex; flex-direction:column; gap:.25rem; }
    .poll-bubble .poll-row { position:relative; margin:0; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.5rem; padding:.3rem .35rem; border-radius:15px; background: rgba(255,255,255,.06); }
    .poll-bubble .poll-row .po-bar { position:absolute; left:0; top:0; bottom:0; width:0%; background: color-mix(in oklab, var(--primary) 25%, transparent); border-radius:15px; pointer-events:none; }
    .poll-bubble .poll-row .po-name { position:relative; }
    .poll-bubble .poll-row .po-pct { position:relative; z-index:1; font-variant-numeric:tabular-nums; opacity:.85; }
    #chatAttach.icon-btn{border: var(--line)}
    #chatRecord.icon-btn{position: absolute; right: 1.5vw; bottom:1.2vh; width: 25px; height: 25px; margin-top: 8px}
    /* user card layout */
    #chatInfo .user-card { display:grid; grid-template-columns:72px 1fr; gap:.75rem; align-items:center; }
    #chatInfo .btn-row { display:flex; gap:.5rem; flex-wrap:wrap; }
    .other .actions-bar{flex-direction:row-reverse}
    /* ----- Right panel details ----- */
    #chatContext { padding:.5rem; }
    #chatInfo .section { display:flex; flex-direction:column; gap:.5rem; margin-bottom: .75rem; }
    #chatInfo .avatar.xl {width:65px;height:65px;padding:2px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:rgba(255,255,255,.08);}
    #chatInfo .group-name {font-weight:700;align-content:center;font-size:1.5vw;outline:none;}
    .avatar-wrap{display: flex;gap: 5px;align-items: center;flex-direction: column;}
    #chatInfo textarea {width:100%;min-height: 40px;border-radius: 8px !important;border: var(--line);background: var(--muted);color: var(--text);padding:.5rem;}
    #chatInfo .section-h { display:flex; align-items:center; justify-content:space-between; }
    #chatInfo .files-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); scrollbar-width: none; gap:.5rem; max-height:40vh; overflow:auto; }
    #chatInfo .file-card { display:flex; flex-wrap: wrap; gap:.25rem; background: rgba(255,255,255,.03); border: var(--line); border-radius:8px; padding:.4rem; }
    #chatInfo .file-card .thumb {aspect-ratio: 4/3;width: 100%;display:grid;place-items:center;overflow:hidden;border-radius:6px;background: rgba(255,255,255,.04);}
    #chatInfo .file-card .thumb img { width:100%; height:100%; object-fit:cover; }
    #chatInfo .file-card .thumb .placeholder { width:100%; height:100%; display:grid; place-items:center; background:
      radial-gradient(var(--dots) 5px, transparent 20px),
      radial-gradient(var(--dots) 5px, transparent 20px),
      linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04)); }
    #chatInfo .file-card .thumb .placeholder span { font-size:.5rem; opacity:.8; }
    #chatInfo .file-card .meta .name { font-weight:600; }
    #chatInfo .file-card .meta .sub { color: var(--text-muted); font-size:.5rem; }
    #chatInfo .file-card .actions { display:flex; gap:.25rem; justify-content:flex-end; }
    #chatInfo .user-row { display:grid; grid-template-columns: 28px 1fr auto; align-items:center; gap:.5rem; padding:.35rem .25rem; border-bottom: var(--line); }
    #chatInfo .user-row .info .email { color: var(--text-muted); font-size:.8rem; }
    #chatInfo .user-row .actions button { display:none; }
    #chatInfo[data-can-manage="true"] .user-row .actions button { display:inline-flex; }
    /* file preview dialog */
    dialog.file-preview { border:0; border-radius:12px; padding:0; background:var(--surface); box-shadow: var(--shadow); max-width:min(92vw, 720px); }
    dialog.file-preview .content { padding: .75rem; }
    dialog.file-preview .content img { width:100%; height:auto; display:block; border-radius:10px; }
    dialog.file-preview .content .placeholder.big { width:100%; height:50vh; display:grid; place-items:center; background:
      radial-gradient(var(--dots) 5px, transparent 20px),
      radial-gradient(var(--dots) 5px, transparent 20px),
      linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04)); border-radius:10px; }
    dialog.file-preview footer.actions { display:flex; justify-content:space-between; gap:.5rem; padding:.5rem .75rem; border-top: var(--line); }
    dialog.file-preview footer.actions .right { display:flex; gap:.5rem; }
    .msg.streak-mid{margin-bottom: -0.5px !important;}
    .msg.streak-mid, .msg.streak-last {margin-top: -2px !important;}
    .msg.streak-first{margin-bottom:-1px}
    .msg.streak-mid, .msg.streak-last{padding-left: 36px;}
    /* Header strip inside bubble */
    .msg .bubble .sender-strip {
      font-size:.78rem; opacity:.9; margin: -.1rem 0 .2rem;
      display: none; /* default hidden; shown by streak rules */
      align-items: baseline; justify-content: space-between; gap:.5rem;
    }
    .msg .bubble .sender-strip .sender-name { font-weight:800; font-size: 8px }
    .msg .bubble .sender-strip .sender-time { opacity:.9; font-size:.5rem; }

    /* Show header only for first/single messages */
    .msg.streak-first .bubble .sender-strip,
    .msg.streak-single .bubble .sender-strip { display: flex; }

    /* Remove/ignore old inline time area */
    .msg .bubble .time { display: none !important; }

    /* Transparent media bubbles */
    .msg .bubble.is-media {/*background: transparent; padding-top: 0.2rem;*/background: transparent;/* padding: .5rem 0; */display: flex;/* margin: -20px; */flex-direction: column;}

    .single-attch, .attch-card, .msg .bubble .media { position:relative; }
    img{contain:size}
    /* In-bubble footer */
    .msg .bubble .actions-bar {display:flex;justify-content:space-between;align-items:center;gap:.4rem; z-index: 5}
    .actions-bar{flex-direction:row-reverse;}
    .msg .bubble .actions-bar .ab-left {display:flex;align-items:center;gap:.25rem;z-index: 2;/* padding-bottom: 5px; */}
    .msg .bubble .actions-bar .rx-strip:empty { display:none; }
    .msg .bubble .actions-bar .ab-plus {
      border:1px solid rgba(255,255,255,.15); border-radius:999px; width:15px; height:15px;
      background:transparent; cursor:pointer; opacity:0; transition:opacity .5s ease; display:grid; place-items:center;
    }
    .msg:hover .bubble .actions-bar .ab-plus { opacity:1; }
    .msg .bubble .actions-bar .view-count { display:inline-flex; align-items:center; gap:.15rem; opacity:.5; font-size:.5rem; }
    .msg .actions-bar .view-count.seen i { color: var(--primary); }
    .msg .actions-bar .view-count .count { display: none !important; }

    /* moreactions flexbox outside bubble (hover-only) */
    .msg .more-actions {position: absolute;display:flex;bottom: 35%;gap: 0px;left: 101%;flex-direction:column;opacity:0;font-size: 9px;height: 0;justify-content: center;}
    .msg.me .more-actions {left: -20px;}
    .msg .more-actions .ab-plus { opacity:1; }
    .msg .more-actions .copy-btn { cursor:pointer; }
    .msg:hover .more-actions { opacity:1; transition:opacity 1s ease; }
    .streak-last .more-actions{bottom:60%}
    .is-media .more-actions{bottom:50%}
    .is-event .more-actions{bottom: 75px}
    /* Underline links in every bubble */
    .msg .bubble .text a { text-decoration: underline; }

    /* Search row below header */
    .chat-search-row { padding: .35rem 0; margin:0 -3px; }
    .chat-search-row .input {
      width: 100%; border-radius: 10px; background: var(--muted);
      border: var(--line); color: var(--text); padding: .05rem .6rem;
    }

    /* Pinned section styles */
    .dept-section.pinned .dept-pill .label::before {
      content: '📌';
      margin-right: .4rem;
    }

    /* Entrance animations for bubbles */
    .msg.animate-in { animation: bubbleInOther .26s ease-out forwards; }
    .msg.me.animate-in { animation: bubbleInMe .26s ease-out forwards; }

    @keyframes bubbleInOther {
      from { opacity: 0; transform: translate(-12px, 8px) scale(.985); }
      to   { opacity: 1; transform: translate(0, 0) scale(1); }
    }
    @keyframes bubbleInMe {
      from { opacity: 0; transform: translate(12px, 8px) scale(.985); }
      to   { opacity: 1; transform: translate(0, 0) scale(1); }
    }

    /* Attachments preview tray above composer */
    #attchPreviewTray.attachments {
      padding: .4rem .5rem;
      border: var(--line);
      max-height: 174px;
      max-width: 45vw;
      overflow: hidden;
      flex-basis: 100%;
      position: relative;
      border-radius: 10px;
      backdrop-filter: blur(5px);
      pointer-events:all;
    }
    #attchGrid.attch-grid {
      display: grid;
      grid-auto-flow: column;
      gap: 0.3rem;
      overflow-x: auto;
      scrollbar-color: var(--text) transparent;
      scrollbar-width: thin;
      padding-bottom: 3px;
      cursor: pointer;
    }
    .attch-card {position: relative;background: var(--muted);border-radius: 10px;
      box-shadow: var(--shadow);padding: 2px;display: grid;grid-template-rows: 1fr auto;height: 120px;width: 120px;
    }
    .messages > .thread[hidden]{ display:none;}

/* Wrapper to keep the pill positioned relative to the record button */
.voice-recorder-wrapper {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

/* Container for the pills - NOW handles the arrow */
.vr-pill-container {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-63%);
    margin-bottom: 50px;
    width: 220px;
    height: 40px;
    perspective: 1000px;
}

/* The arrow is now on the container so it doesn't flip */
.vr-pill-container::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: var(--bg) transparent transparent transparent;
}


/* --- The Flip Transition Logic --- */
.vr-pill-container.flipped .vr-pill.live {
  transform: rotateY(-180deg);
}
.vr-pill-container.flipped .vr-pill.preview {
  transform: rotateY(0deg);
}

/* Base style for BOTH pills */
.vr-pill {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background-color: var(--bg);
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    backface-visibility: hidden;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
}
/* Initial state for the live recording pill (facing forward) */
.vr-pill.live {
  transform: rotateY(0deg);
}
.vr-pill.preview {
  transform: rotateY(180deg);
}

/* --- Rest of your styles (mostly unchanged) --- */

.vr-pill .vr-wave {
  flex-grow: 1;
  height: 100%;
  width: 50%;
}

.vr-pill .vr-time,
.vr-pill .vr-preview-time {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  color: #a7a7ad;
  padding: 0 3px;
  flex-shrink: 0;
}

.vr-pill .vr-control {
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 18px;
    padding: 0 8px;
    cursor: pointer;
    display: flex;
    position: absolute;
    bottom: 100%;
    align-items: center;
    justify-content: center;
}
.vr-control.pause {
    position: relative;
    bottom: 0;
}
/* Preview Player Styles */
.vr-pill .vr-preview-controls {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
}
.vr-pill.preview audio { display: none; }
.vr-pill .vr-play-pause {
    background: #48484a;
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.vr-pill .vr-progress-bar {
    flex-grow: 1;
    height: 4px;
    background-color: #545458;
    border-radius: 2px;
    overflow: hidden;
}
.vr-pill .vr-progress {
    width: 0%;
    height: 100%;
    background-color: var(--primary);
    border-radius: 2px;
    transition: width 0.1s linear;
}

/* 'X' Close Button */
.vr-pill .vr-close {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--muted);
  color: var(--text-muted);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  z-index: 10;
}
.vr-pill .vr-close:hover { background: #6e6e72; }    
      .attach-menu{
        backdrop-filter:var(--backdrop);
        border-radius: 10px;
        left: 2%;
        bottom: 110%;
        max-width: 160px;
        pointer-events: all;
      }  
      .attch-card img { width:100%; height:100%; object-fit:cover; border-radius: 8px; display:block; }
      .attch-card .file-icon { font-size: 11px; opacity: .7; }
      .attch-card .attch-meta {display: flex; justify-content: space-between; gap: 6px; width: 112px; font-size: .6rem; opacity: .85;
        background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(3px); border-radius: 5px; padding: 5px; margin: 1px; margin-bottom: -2px;}
      .msg .bubble .attch-grid, .msg .bubble .attch-grid * { pointer-events: auto !important; }
      .group-pills .pill.drop-hover { outline: 4px dashed var(--primary); outline-offset: -2px; }

      /* ——— Event bubble (background image card) ——— */
.bubble.is-event .event-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  min-width: 20vw;
  max-width: 20vw;
  height: 20vh;
  display: flex;
}
.bubble.is-event .event-card .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
}
.bubble.is-event .event-card .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.95), var(--primary-dark));
}
.bubble.is-event .event-card .meta {
  position: relative;
  padding: .75rem;
  gap: 10px;
  color: white;
}
.bubble.is-event .event-card .title {
  font-weight: 600;
}
.bubble.is-event .event-card .sub {
  opacity: .85;
  font-size: .65rem;
  margin-top: .15rem;
}

/* ——— DM list header (name + time on one line) ——— */
#chatList .dm-list .dm-row .dm-meta .dm-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}
#chatList .dm-list .dm-row .dm-meta .dm-time {
  opacity: .66;
  font-size: .75rem;
  white-space: nowrap;
}