/* =========================================================================
   MODERN THEME OVERLAY  —  "Calm slate + soft blue"
   Loaded last so it refreshes the existing chat UI without touching layout.
   Covers: surfaces, header, bubbles, composer, buttons, scrollbars, motion.
   Palette: understated. Soft-blue outgoing bubbles (dark text), neutral
   slate-grey received bubbles, a single calm blue accent. No gradients.
   Light + dark modes.
   ========================================================================= */

:root {
  /* Calm blue accent (single, no gradients) */
  --mt-accent: #2f80ed;
  --mt-accent-strong: #1f6fe0;
  --mt-accent-soft: rgba(47, 128, 237, 0.1);

  /* Outgoing (mine) bubble — soft blue, dark text */
  --mt-out-bg: #e8f1ff;
  --mt-out-text: #1b2430;
  --mt-out-link: #1f6fe0;
  --mt-out-border: rgba(47, 128, 237, 0.14);
  --mt-out-shadow: 0 1px 2px rgba(31, 111, 224, 0.1);

  /* Incoming (received) bubble — neutral slate-grey */
  --mt-in-bg: #f2f4f7;
  --mt-in-text: #1b2430;
  --mt-in-border: rgba(15, 23, 42, 0.06);
  --mt-in-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);

  /* Surfaces */
  --mt-surface: #ffffff;
  --mt-app-bg: #f0f2f5;
  --mt-hairline: rgba(15, 23, 42, 0.08);

  --mt-radius: 18px;
  --mt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----------------------------------------------------------------------- */
/* Surfaces                                                                 */
/* ----------------------------------------------------------------------- */
.message-area {
  background: var(--mt-app-bg);
}

/* ----------------------------------------------------------------------- */
/* Chat header — neutral, quiet                                             */
/* ----------------------------------------------------------------------- */
.msg-head {
  background: #ffffff;
  border-bottom: 1px solid var(--mt-hairline);
  box-shadow: 0 1px 8px rgba(15, 23, 42, 0.04);
}
.msg-head h3 {
  letter-spacing: -0.01em;
}

/* Header action buttons (call, more, etc.) */
.moreoption li button {
  background: #ffffff;
  border: 1px solid var(--mt-hairline);
  color: #475569;
  transition: transform 0.2s var(--mt-ease), background 0.2s var(--mt-ease),
    color 0.2s var(--mt-ease), box-shadow 0.25s var(--mt-ease);
}
.moreoption li button:hover {
  background: var(--mt-accent-soft);
  color: var(--mt-accent-strong);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(47, 128, 237, 0.16);
}
.moreoption li button:active {
  transform: translateY(0) scale(0.96);
}

/* ----------------------------------------------------------------------- */
/* Message bubbles                                                          */
/* ----------------------------------------------------------------------- */
.msg-body ul li.sender,
.msg-body ul li.repaly {
  margin-bottom: 6px;
}

/* Shared bubble shape + padding (no padding exists in base CSS) */
.msg-body ul li .bgretext {
  padding: 9px 14px;
  border-radius: var(--mt-radius);
  transition: box-shadow 0.25s var(--mt-ease);
  line-height: 1.45;
}
.msg-body ul li .bgretext p {
  margin-bottom: 0;
}

/* Incoming (left) — neutral grey */
.msg-body ul li.sender .bgretext {
  background: var(--mt-in-bg);
  color: var(--mt-in-text);
  border: 1px solid var(--mt-in-border) !important;
  border-radius: 6px var(--mt-radius) var(--mt-radius) var(--mt-radius);
  box-shadow: var(--mt-in-shadow);
  margin-bottom: 6px;
}

/* Outgoing (right) — soft blue, dark text */
.msg-body ul li.repaly .bgretext {
  background: var(--mt-out-bg);
  color: var(--mt-out-text);
  border: 1px solid var(--mt-out-border) !important;
  border-radius: var(--mt-radius) var(--mt-radius) 6px var(--mt-radius);
  box-shadow: var(--mt-out-shadow);
}
.msg-body ul li.repaly .bgretext a {
  color: var(--mt-out-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Gentle lift on hover */
.msg-body ul li .bgretext:hover {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.09);
}

/* Reveal/highlight when jumping to a replied message */
.msg-body ul li .bgretext.reveal {
  animation: mt-reveal-pulse 1.4s var(--mt-ease);
}
@keyframes mt-reveal-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(47, 128, 237, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(47, 128, 237, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(47, 128, 237, 0);
  }
}

/* Date / notification dividers */
.msg-body li.divider h6,
.msg-body li.dividerNotification p {
  background: #ffffff;
  border: 1px solid var(--mt-hairline);
  color: #64748b;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

/* ----------------------------------------------------------------------- */
/* Composer / send box                                                      */
/* ----------------------------------------------------------------------- */
.send-box {
  border-top: 1px solid var(--mt-hairline);
  background: #ffffff;
  padding: 0 !important;
}

/* ----------------------------------------------------------------------- */
/* New single-row composer                                                  */
/* ----------------------------------------------------------------------- */
.composer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
}

.composer-plus-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: background 0.2s, color 0.2s;
}
.composer-plus-btn:hover {
  background: var(--mt-accent-soft);
  color: var(--mt-accent-strong);
}

/* Plus menu — icon grid with labels */
.composer-plus-menu {
  position: absolute;
  bottom: 60px;
  left: 10px;
  display: grid;
  grid-template-columns: repeat(4, 64px);
  justify-content: start;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--mt-hairline);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  z-index: 100;
  width: max-content;
}
/* Hide the dropzone's native file input so the Attach cell stays icon-sized
   (an unhidden file input was widening the first column and shoving the
   remaining items to the right). */
.composer-plus-menu input[type="file"] {
  display: none !important;
}
/* Forkout sits inside a Bootstrap .btn-group; make it a clean grid cell so its
   button fills and centers like every other item, and anchor its dropdown. */
.composer-plus-menu .btn-group {
  position: relative;
  display: flex;
}
.composer-plus-menu .btn-group > .composer-plus-menu-item {
  width: 100%;
}
.composer-plus-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 8px 4px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.composer-plus-menu-item:hover {
  background: var(--mt-accent-soft);
}
.composer-plus-menu-item .pm-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #444;
}
.composer-plus-menu-item .pm-label {
  font-size: 10px;
  color: #666;
  text-align: center;
  white-space: nowrap;
}

.composer-editor-pill {
  flex: 1;
  min-width: 0;
  background: #f2f4f7;
  border-radius: 20px;
  border: 1px solid var(--mt-hairline);
  padding: 0 6px 0 12px;
  display: flex;
  align-items: center;
  min-height: 32px;
  gap: 4px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.composer-editor-pill:focus-within {
  border-color: var(--mt-accent);
  box-shadow: 0 0 0 3px var(--mt-accent-soft);
}
/* EditorContent renders <div.custom-editor-content><div.ProseMirror>>.
   The wrapper is the real flex child of the pill, so it must grow — otherwise
   it collapses to content width and the input looks tiny. */
.composer-editor-pill .custom-editor-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.composer-editor-pill .tiptap,
.composer-editor-pill .ProseMirror {
  outline: none;
  flex: 1;
  min-width: 0;
  width: 100%;
  max-height: 90px;
  overflow-y: auto;
  line-height: 1.25;
  font-size: 0.88rem;
}
.composer-editor-pill p {
  margin: 0;
}
/* Emoji button inside the pill */
.composer-emoji-inside {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  transition: color 0.2s;
}
.composer-emoji-inside:hover {
  color: var(--mt-accent-strong);
}

.composer-send-icon-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--mt-accent);
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(47,128,237,0.32);
  transition: background 0.2s, transform 0.18s, box-shadow 0.2s;
}
/* The mdi-send glyph carries built-in left whitespace in its em-box, so flex
   centering alone leaves it visually off-center. Normalize the glyph box and
   nudge it to optically center the paper-plane. */
.composer-send-icon-btn i,
.composer-send-icon-btn .mdi {
  display: block;
  line-height: 1;
  transform: translateX(1px);
}
.composer-send-icon-btn:hover {
  background: var(--mt-accent-strong);
  transform: scale(1.08);
}
.composer-send-icon-btn:active {
  transform: scale(0.95);
}
/* Mic button same size as send */
.composer-action-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: background 0.2s, color 0.2s;
}
.composer-action-btn:hover {
  background: var(--mt-accent-soft);
  color: var(--mt-accent-strong);
}

/* Dark mode */
.darkmode .composer-plus-menu {
  background: #1a2030;
  border-color: rgba(255,255,255,0.1);
}
.darkmode .composer-plus-menu-item .pm-icon {
  background: rgba(255,255,255,0.07);
  color: #ccc;
}
.darkmode .composer-plus-menu-item .pm-label {
  color: #aaa;
}
.darkmode .composer-editor-pill {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}
.darkmode .composer-plus-btn,
.darkmode .composer-action-btn,
.darkmode .composer-emoji-inside {
  color: #aaa;
}

/* Dark mode overrides */
.darkmode .composer-plus-menu {
  background: #1a2030;
  border-color: rgba(255,255,255,0.1);
}
.darkmode .composer-editor-pill {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}
.darkmode .composer-plus-btn,
.darkmode .composer-action-btn {
  color: #aaa;
}

/* Reply preview slides in */
.replySbx {
  border-radius: 14px;
  animation: mt-slide-down 0.22s var(--mt-ease);
}
@keyframes mt-slide-down {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Toolbar icon buttons — smoother motion */
.chatbox-icon-btn {
  border: 1px solid transparent;
  transition: background 0.2s var(--mt-ease), color 0.2s var(--mt-ease),
    box-shadow 0.25s var(--mt-ease), transform 0.18s var(--mt-ease);
}
.chatbox-icon-btn:hover {
  background: var(--mt-accent-soft);
  color: var(--mt-accent-strong);
  transform: translateY(-2px);
}
.chatbox-icon-btn:active {
  transform: translateY(0) scale(0.94);
}
.chatbox-icon-btn--active,
.chatbox-icon-btn.is-active {
  background: var(--mt-accent-soft);
  color: var(--mt-accent-strong);
}

/* Primary Send / Update button — solid calm blue, subtle shadow */
.sendbtnright button.sendbtn {
  background: var(--mt-accent);
  border: none;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(47, 128, 237, 0.28);
  transition: transform 0.2s var(--mt-ease), box-shadow 0.25s var(--mt-ease),
    background 0.2s var(--mt-ease);
}
.sendbtnright button.sendbtn:hover {
  background: var(--mt-accent-strong);
  box-shadow: 0 6px 16px rgba(47, 128, 237, 0.36);
  transform: translateY(-2px);
}
.sendbtnright button.sendbtn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 6px rgba(47, 128, 237, 0.3);
}

/* ----------------------------------------------------------------------- */
/* Sidebar chat list                                                        */
/* ----------------------------------------------------------------------- */
.chat-list a.d-flex {
  border-radius: 14px;
}
/* No movement on hover — kill any transform/translate from other stylesheets */
.chat-list a.d-flex,
.chat-user-list a.d-flex,
.chat-list a.d-flex:hover,
.chat-user-list a.d-flex:hover,
.chat-user-list:hover {
  transform: none !important;
  transition: none !important;
}

/* ----------------------------------------------------------------------- */
/* Scrollbars — thin, modern, branded on hover                              */
/* ----------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 12px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--mt-accent);
  background-clip: content-box;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .msg-body ul li .bgretext,
  .moreoption li button,
  .chatbox-icon-btn,
  .sendbtnright button.sendbtn,
  .chat-list a.d-flex,
  .replySbx,
  .msg-body ul li .bgretext.reveal {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================================
   GLOBAL COLOR UPGRADE
   Re-skins the recurring chrome (buttons, tabs, badges, inputs, links,
   dropdowns, sliders, ticks) onto the single calm-blue accent.
   Meaningful category colors (purple/green labels) are intentionally kept.
   ========================================================================= */

/* --- Primary buttons --------------------------------------------------- */
.btnblue,
.createnotes button {
  background: var(--mt-accent);
  border: none;
  color: #fff;
  transition: background 0.2s var(--mt-ease), box-shadow 0.25s var(--mt-ease),
    transform 0.18s var(--mt-ease);
  box-shadow: 0 2px 8px rgba(47, 128, 237, 0.26);
}
.btnblue:hover,
.btnblue.bg-none:hover,
.createnotes button:hover {
  background: var(--mt-accent-strong) !important;
  color: #fff;
  box-shadow: 0 6px 16px rgba(47, 128, 237, 0.34);
  transform: translateY(-1px);
}
.btnblue:active,
.createnotes button:active {
  transform: translateY(0) scale(0.97);
}

/* --- Sidebar / file nav tabs ------------------------------------------- */
.chat-area .nav-tabs .nav-item.show .nav-link,
.chat-area .nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active,
.filetabs .nav-item.show .nav-link,
.filetabs .nav-link.active {
  color: var(--mt-accent) !important;
}
.chat-area .nav-tabs .nav-link {
  transition: color 0.2s var(--mt-ease), border-color 0.2s var(--mt-ease),
    background 0.2s var(--mt-ease);
}
.chat-area .nav-tabs .nav-link:focus,
.chat-area .nav-tabs .nav-link:hover {
  border: 0.91px solid var(--mt-accent);
  color: var(--mt-accent);
}

/* --- Search box -------------------------------------------------------- */
.msg-search {
  background: #f2f4f7;
  border: 1px solid var(--mt-hairline);
  border-radius: 12px;
  transition: border-color 0.2s var(--mt-ease), box-shadow 0.2s var(--mt-ease);
}
.msg-search:focus-within {
  border-color: var(--mt-accent);
  box-shadow: 0 0 0 3px var(--mt-accent-soft);
}
.msg-search .form-control {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* --- Unread / count badges --------------------------------------------- */
.bg1C,
.bg1C[class] {
  background: var(--mt-accent);
}

/* --- Dropdown menu items ----------------------------------------------- */
.dropdown-item:focus,
.dropdown-item:hover {
  background-color: var(--mt-accent) !important;
  color: #fff !important;
}

/* --- Misc accent icons / links ----------------------------------------- */
.text-blue {
  color: var(--mt-accent);
}
.toggleBtns:hover .toggledots i {
  color: var(--mt-accent);
}
.onofbtnwx button:hover {
  border: 0.91px solid var(--mt-accent);
}

/* --- Read-receipt ticks ------------------------------------------------- */
.chat-user-list .readmsg i.active {
  color: var(--mt-accent);
}

/* --- Rich-text formatting active state (bold/italic/etc.) -------------- */
.ql-formats button.is-active {
  background: var(--mt-accent);
}

/* --- Audio play button + range sliders --------------------------------- */
.playbtnaudiobg .playbtnaudio {
  background: var(--mt-accent);
  transition: background 0.2s var(--mt-ease), transform 0.18s var(--mt-ease);
}
.playbtnaudiobg .playbtnaudio:hover {
  background: var(--mt-accent-strong);
  transform: scale(1.05);
}
input[type="range"] {
  color: var(--mt-accent);
  --brightness-hover: var(--mt-accent);
}

/* =========================================================================
   STRUCTURE / CHROME UPGRADE  (light mode)
   ========================================================================= */

/* --- Composer message input ------------------------------------------- */
.send-box .editor-wrapper .tiptap.ProseMirror.input-box-tip {
  background: #f2f4f7;
  border: 1px solid var(--mt-hairline);
  border-radius: 22px;
  padding: 12px 20px;
  transition: border-color 0.2s var(--mt-ease), box-shadow 0.2s var(--mt-ease),
    background 0.2s var(--mt-ease);
}
.send-box .editor-wrapper:focus-within .tiptap.ProseMirror.input-box-tip {
  border-color: var(--mt-accent);
  box-shadow: 0 0 0 3px var(--mt-accent-soft);
  background: #ffffff;
}

/* --- Sidebar tabs: clean segmented control ----------------------------- */
.chat-area .nav-tabs {
  gap: 4px;
}
.chat-area .nav-tabs .nav-link {
  border: 1px solid transparent !important;
  border-radius: 999px;
  background: transparent;
  color: #64748b !important;
  font-weight: 500;
  padding: 5px 14px;
  transition: background 0.2s var(--mt-ease), color 0.2s var(--mt-ease),
    box-shadow 0.25s var(--mt-ease);
}
.chat-area .nav-tabs .nav-link:hover {
  background: var(--mt-accent-soft);
  border: 1px solid transparent !important;
  color: var(--mt-accent-strong) !important;
}
.chat-area .nav-tabs .nav-item.show .nav-link,
.chat-area .nav-tabs .nav-link.active {
  background: var(--mt-accent) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 3px 10px rgba(47, 128, 237, 0.3);
}

/* --- Left icon rail ----------------------------------------------------- */
.leftbar .nav-pills .nav-link {
  border: none !important;
  border-radius: 12px !important;
  width: 44px;
  height: 44px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 5px auto;
  padding: 0 !important;
  font-size: 1.3rem;
  transition: background 0.2s var(--mt-ease), color 0.2s var(--mt-ease),
    transform 0.18s var(--mt-ease), box-shadow 0.25s var(--mt-ease);
}
.leftbar .nav-pills .nav-link:hover {
  background: rgba(0, 0, 0, 0.07);
  color: inherit;
  transform: translateY(-1px);
}
.leftbar .nav-pills .nav-link.active,
.leftbar .nav-pills .show > .nav-link {
  background: var(--mt-accent);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(47, 128, 237, 0.32);
}
.leftbar .nav-pills .nav-link.active svg path,
.leftbar .nav-pills .show > .nav-link svg path {
  fill: #ffffff !important;
}

/* =========================================================================
   DARK MODE
   ========================================================================= */
.darkmode {
  --mt-app-bg: #0b0e11;
  --mt-in-bg: #161b22;
  --mt-in-text: #cdd3da;
  --mt-in-border: rgba(255, 255, 255, 0.05);
  --mt-hairline: rgba(255, 255, 255, 0.08);

  /* Outgoing — muted calm blue, light text */
  --mt-out-bg: #1b3656;
  --mt-out-text: #e7eefb;
  --mt-out-link: #9cc2ff;
  --mt-out-border: rgba(120, 170, 255, 0.14);
  --mt-out-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.darkmode .msg-head {
  background: #0d1117;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.darkmode .moreoption li button {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cdd3da;
}
.darkmode .moreoption li button:hover {
  background: rgba(47, 128, 237, 0.22);
  color: #cfe0ff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

/* Incoming bubble — dark surface */
.darkmode .msg-body ul li.sender .bgretext {
  background: var(--mt-in-bg);
  color: var(--mt-in-text);
  border: 1px solid var(--mt-in-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Outgoing bubble — muted blue, light text */
.darkmode .msg-body ul li.repaly .bgretext {
  background: var(--mt-out-bg);
  color: var(--mt-out-text);
  border: 1px solid var(--mt-out-border) !important;
  box-shadow: var(--mt-out-shadow);
}
.darkmode .msg-body ul li.repaly .bgretext a {
  color: var(--mt-out-link);
}

.darkmode .msg-body li.divider h6,
.darkmode .msg-body li.dividerNotification p {
  background: #11161c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #aeb6c0;
  box-shadow: none;
}

.darkmode .send-box {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}


.darkmode ::-webkit-scrollbar-thumb {
  background-color: #2b323b;
  background-clip: content-box;
}
.darkmode ::-webkit-scrollbar-thumb:hover {
  background-color: var(--mt-accent);
  background-clip: content-box;
}

/* Dark-mode search box */
.darkmode .msg-search {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.darkmode .msg-search:focus-within {
  border-color: var(--mt-accent);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.18);
}

/* Dark-mode dropdown hover keeps accent */
.darkmode .dropdown-item:focus,
.darkmode .dropdown-item:hover {
  background-color: var(--mt-accent) !important;
  color: #fff !important;
}

/* Dark-mode composer input — proper dark surface (was rendering light) */
.darkmode .send-box .editor-wrapper .tiptap.ProseMirror.input-box-tip {
  background: #1a212b !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cdd3da;
}
.darkmode
  .send-box
  .editor-wrapper:focus-within
  .tiptap.ProseMirror.input-box-tip {
  border-color: var(--mt-accent);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.18);
  background: #1e2630 !important;
}

/* Dark-mode tabs — segmented control */
.darkmode .chat-area .nav-tabs .nav-link,
.darkmode .nav-tabs .nav-item .nav-link,
.darkmode .nav-tabs .nav-link {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: #aeb6c0 !important;
}
.darkmode .chat-area .nav-tabs .nav-link:hover {
  background: rgba(47, 128, 237, 0.18) !important;
  color: #cfe0ff !important;
}
.darkmode .chat-area .nav-tabs .nav-item.show .nav-link,
.darkmode .chat-area .nav-tabs .nav-link.active,
.darkmode .filetabs .nav-item.show .nav-link,
.darkmode .filetabs .nav-link.active {
  background-color: var(--mt-accent) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

/* Dark-mode left rail */
.darkmode .leftbar .nav-pills .nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.darkmode .leftbar .nav-pills .nav-link.active,
.darkmode .leftbar .nav-pills .show > .nav-link {
  background: var(--mt-accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}