body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; margin:0; background:#2a2a2a; color:#e6edf3; }
    html, body, .side, .sidebar-scroll, #log, .modal-body-content, .modal-sidebar .tabs, .right-sidebar {
      scrollbar-width: thin;
      scrollbar-color: #7f9616 #222;
    }
    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    .side::-webkit-scrollbar,
    .sidebar-scroll::-webkit-scrollbar,
    #log::-webkit-scrollbar,
    .modal-body-content::-webkit-scrollbar,
    .modal-sidebar .tabs::-webkit-scrollbar,
    .right-sidebar::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track,
    .side::-webkit-scrollbar-track,
    .sidebar-scroll::-webkit-scrollbar-track,
    #log::-webkit-scrollbar-track,
    .modal-body-content::-webkit-scrollbar-track,
    .modal-sidebar .tabs::-webkit-scrollbar-track,
    .right-sidebar::-webkit-scrollbar-track {
      background: #222;
    }
    html::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb,
    .side::-webkit-scrollbar-thumb,
    .sidebar-scroll::-webkit-scrollbar-thumb,
    #log::-webkit-scrollbar-thumb,
    .modal-body-content::-webkit-scrollbar-thumb,
    .modal-sidebar .tabs::-webkit-scrollbar-thumb,
    .right-sidebar::-webkit-scrollbar-thumb {
      background: #7f9616;
      border-radius: 999px;
      border: 2px solid #222;
    }
    html::-webkit-scrollbar-thumb:hover,
    body::-webkit-scrollbar-thumb:hover,
    .side::-webkit-scrollbar-thumb:hover,
    .sidebar-scroll::-webkit-scrollbar-thumb:hover,
    #log::-webkit-scrollbar-thumb:hover,
    .modal-body-content::-webkit-scrollbar-thumb:hover,
    .modal-sidebar .tabs::-webkit-scrollbar-thumb:hover,
    .right-sidebar::-webkit-scrollbar-thumb:hover {
      background: #93ad1a;
    }
    .app { display:flex; height:100vh; }
    .side { width:360px; padding:0; border-right:1px solid #444; background:#333; box-sizing:border-box; overflow:hidden; display:flex; flex-direction:column; }
    .right-sidebar { width:350px; padding:12px; border-left:1px solid #444; background:#333; box-sizing:border-box; overflow:auto; display: flex; flex-direction: column; }
    .main { flex:1; display:flex; flex-direction:column; padding:12px; box-sizing:border-box; }
    .card { background:#333; border:1px solid #444; border-radius:12px; padding:10px; }
    .row { display:flex; gap:10px; margin-top:10px; }
    input, select, button { border-radius:10px; border:1px solid #555; background:#222; color:#e6edf3; padding:12px; font-size: 14px; }
    input, select { width:100%; box-sizing:border-box; }
    input:focus, select:focus { outline: 1px solid #7f9616; border-color: #7f9616; }
    button { cursor:pointer; white-space:nowrap; transition: filter 0.2s; }
    button:hover { filter: brightness(1.1); }
    button:disabled { opacity:.6; cursor:not-allowed; }
    .muted { opacity:.75; font-size:12px; }
    .list { margin-top:10px; display:flex; flex-direction:column; gap:6px; }

    .item {
      padding:10px 12px; border-radius:10px; border:1px solid #444; background:#2a2a2a;
      cursor:pointer; user-select:none;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
    .item:hover { background: #3a3a3a; }
    .item.active { border:2px solid #7f9616; background:#3a3a3a; }

    .leftline { display:flex; align-items:center; gap:8px; min-width:0; }
    .truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .hash-icon { display:inline-flex; align-items:center; justify-content:center; opacity:.9; }
    .hash-icon svg { display:block; }
    .badge {
      display:inline-flex; align-items:center; justify-content:center;
      width:26px; height:26px;
      border-radius:50%;
      border:1px solid #7f9616;
      background:#7f9616;
      color:#fff;
      font-weight:800;
      font-size:12px;
      line-height:1;
      opacity:.98;
    }

    #log { flex:1; overflow:auto; padding:12px; background:#222; border-radius:12px; border:1px solid #444; margin-top:10px; }
    .msg { margin:10px 0; padding:6px 8px; border-radius:12px; transition: background .15s ease; }
    .msg:hover { background: rgba(255,255,255,0.03); cursor:pointer; }
    .meta { opacity:.75; font-size:12px; display:flex; justify-content:space-between; gap:10px; align-items:center; }
    .bubble { display:inline-block; padding:10px 12px; border-radius:12px; background:#333; border: 1px solid #444; white-space:pre-wrap; max-width:100%; transition: background .15s ease; }
    .msg:hover .bubble { background:#2f2f2f; }
    .receipt { opacity:.8; font-size:12px; margin-left:10px; min-width:56px; text-align:right; }
    .receipt.dim { opacity:.35; }
    .bubble-wrap { position:relative; display:inline-block; max-width:100%; }
    .msg-actions { position:absolute; top:0; left:calc(100% + 20px); display:inline-flex; align-items:center; gap:8px; opacity:0; pointer-events:none; transition: opacity .15s ease; }
    .msg:hover .msg-actions { opacity:1; pointer-events:auto; }
    .msg-action { width:38px; height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:#222; border:1px solid #444; color:#e6edf3; font-size:18px; }
    .msg-action:hover { filter: brightness(1.08); }
    .msg-action.danger:hover { border-color:#ef4444; background:rgba(239,68,68,.14); }

    .dot { width:8px; height:8px; border-radius:999px; display:inline-block; vertical-align:middle; border:1px solid #555; }
    .dot.on { background:#7f9616; }
    .dot.off { background:#222; }

    .tabs { display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width: thin; }
    .tab { flex:0 0 auto; padding:8px 10px; border-radius:10px; border:1px solid #444; background:#2a2a2a; cursor:pointer; user-select:none; box-sizing:border-box; }
    .tab.active { border:2px solid #7f9616; background:#333; color: #fff; }
    .hidden { display:none !important; }
    .screen { opacity: 1; transform: translateY(0); transition: opacity 220ms ease, transform 220ms ease; will-change: opacity, transform; }
    .screen.is-hidden { opacity: 0; transform: translateY(10px); pointer-events: none; }
    .hr { height:1px; background:#444; margin:10px 0; }
    code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono"; font-size:12px; }
    .pill { display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid #555; background:#222; font-size:12px; opacity:.9; }
    .danger { border-color:#ef4444 !important; color: #ef4444; }

    #adminCard { max-height: 72vh; overflow:auto; }
    .small { font-size: 12px; opacity:.85; }
    .attach { margin-top:6px; }
    .attach img { max-width: 360px; border-radius: 10px; border:1px solid #444; }
    .attach a { color:#a3e635; text-decoration:none; }
    .attach a:hover { text-decoration:underline; }
    #attachPreview { background:#222; }
    .search { width:100%; }

    .sidebar-top { padding:12px 12px 0 12px; }
    .sidebar-brand { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .sidebar-brand-left {  align-items:center; gap:10px; min-width:0; }
    .sidebar-brand-text { min-width:0; }
    .sidebar-appname { font-size:18px; font-weight:700; line-height:1.1; }
    .sidebar-modes { margin-top:20px; }
    .sidebar-modes .tab { flex:1; text-align:center; display:flex; align-items:center; justify-content:center; gap:8px; }
    .tab-icon { display:inline-flex; align-items:center; justify-content:center; opacity:.9; }
    .sidebar-scroll { flex:1; overflow:auto; padding:10px 12px 12px 12px; min-height:0; }
    .sidebar-section + .sidebar-section { margin-top:16px; }
    .sidebar-section-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:20px; }
    .sidebar-section-title { font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
    .sidebar-section .list { margin-top:0; }
    .sidebar-search-row { margin-bottom:20px; }
    .sidebar-section-hint { margin-top:8px; }

    #dmPickerRow { width:100%; flex-direction:column; }
    #dmPickerRow .multi-picker { width:100%; }
    #dmPickerRow #dmOpenBtn { width:100%; }
    .sidebar-footer { padding:12px; border-top:1px solid #444; background:#333; }
    .sidebar-me { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .sidebar-me-text { min-width:0; }
    .sidebar-section { background:#2a2a2a; border:1px solid #444; border-radius:12px; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; }
    .icon-btn { width:38px; height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
    .icon-btn svg { display:block; }

    button { box-sizing:border-box; }
    button:active { border-color:#7f9616; }
    button:focus-visible { outline:none; border-color:#7f9616; }
    .icon-btn:active { border-color:#7f9616; }
    .icon-btn:focus-visible { outline:none; border-color:#7f9616; }

    #send { display:flex; align-items:center; justify-content:center; line-height:0; }
    #send svg { display:block; }

    /* Login Screen Styles Improved */
    .login-screen {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: #2a2a2a;
      display: flex; justify-content: center; align-items: center;
      z-index: 1000;
      padding: 24px 16px;
      box-sizing: border-box;
      overflow: auto;
    }
    .login-card {
      background: #333;
      padding: 40px;
      border-radius: 16px;
      width: 100%; max-width: 380px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.5);
      display: flex; flex-direction: column;
      box-sizing: border-box;
    }
    .login-card input {
      background: #222;
      border: 1px solid #555;
      color: #fff;
      padding: 14px;
      font-size: 16px;
    }
    .primary-btn {
      background-color: #7f9616;
      color: #fff;
      font-weight: bold;
      border: none;
      text-transform: uppercase;
      font-size: 16px;
      padding: 14px;
      border-radius: 10px;
    }
    .primary-btn:hover {
      background-color: #657a12;
    }
    /* Logo styling */
    .logo-container {
      text-align: center;
      margin-bottom: 10px;
    }
    .login-logo {
      max-width: 180px;
      height: auto;
    }
    /* Green accents for tabs */
    .login-card .tab.active {
      outline: none;
      border-bottom: 2px solid #7f9616;
      background: transparent;
      color: #fff;
      border-radius: 0;
      border-top: none; border-left: none; border-right: none;
      font-weight: bold;
      font-size: 16px;
    }
    .login-card .tab {
      background: transparent;
      border: none;
      color: #888;
      font-size: 16px;
      padding: 10px 20px;
    }
    /* Chat Header Logo */
    .chat-logo {
      height: 45px;
      width: auto;
      margin-right: 10px;
      vertical-align: middle;
    }

    @media (max-width: 600px) {
      .login-screen {
        justify-content: center;
        align-items: center;
        padding: 16px;
      }
      .login-card {
        padding: 18px;
        max-width: 520px;
        margin: 0 auto;
      }
      .login-logo {
        max-width: 150px;
      }
      .login-card .tabs {
        margin-top: 12px;
      }
      .login-card button,
      .login-card .primary-btn {
        width: 100%;
      }
    }
    /* Full height People Card in Right Sidebar */
    .right-sidebar .card {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .right-sidebar #peopleList {
      flex: 1;
      overflow-y: auto;
    }

    /* Admin Modal Styles */
    .modal-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(2px);
      z-index: 2000;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 1;
      transition: opacity 220ms ease;
      will-change: opacity;
    }
    .modal-overlay.is-hidden {
      opacity: 0;
      pointer-events: none;
    }
    .modal-content {
      background: #333; /* Match Main Card Color */
      width: 90%;
      max-width: 900px;
      height: 80vh;
      max-height: 800px;
      border-radius: 12px;
      border: 1px solid #444;
      box-shadow: 0 20px 60px rgba(0,0,0,0.6);
      display: flex;
      flex-direction: row; /* Sidebar layout */
      overflow: hidden;
      color: #e6edf3;
      opacity: 1;
      transform: translateY(0) scale(1);
      transition: transform 220ms ease, opacity 220ms ease;
      will-change: transform, opacity;
    }
    .modal-overlay.is-hidden .modal-content {
      opacity: 0;
      transform: translateY(10px) scale(0.98);
    }
    .modal-sidebar {
      width: 230px;
      background: #2a2a2a; /* Match Body/Darker background */
      border-right: 1px solid #444;
      display: flex;
      flex-direction: column;
      padding: 0;
    }
    .modal-sidebar-header {
      padding: 20px;
      font-weight: bold;
      font-size: 14px;
      color: #e6edf3;
      padding-bottom: 10px;
    }
    .modal-sidebar .tabs {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 20px 10px;
      margin: 0;
      overflow-y: auto;
      border: none;
      scrollbar-width: thin;
    }
    .modal-sidebar .tab {
      display: block;
      border: 1px solid transparent;
      background: transparent;
      color: #aaa;
      padding: 8px 12px;
      border-radius: 6px;
      text-align: left;
      font-size: 18px;
      cursor: pointer;
      margin-bottom: 2px;
      transition: all 0.2s;
    }
    .modal-sidebar .tab:hover {
      background-color: #333;
      color: #fff;
    }
    .modal-sidebar .tab.active {
      background-color: rgba(127, 150, 22, 0.15); /* Low opacity green */
      border: 1px solid #7f9616;
      color: #fff;
      outline: none;
    }
    
    .modal-main {
      flex: 1;
      background: #333; /* Main Card Color */
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .modal-header-right {
      padding: 20px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
      border-bottom: 1px solid #444;
      background: #333;
    }
    .modal-header-right h2 {
      margin: 0;
      font-size: 20px;
      color: #e6edf3;
      font-weight: 600;
    }
    .modal-close-btn {
      background: transparent;
      border: 2px solid #555;
      color: #aaa;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      font-size: 14px;
      display: flex; align-items: center; justify-content: center;
      padding: 0;
      cursor: pointer;
      transition: 0.2s;
    }
    .modal-close-btn:hover {
      border-color: #7f9616;
      color: #fff;
      background: #7f9616;
    }
    
    .modal-body-content {
      flex: 1;
      overflow-y: auto;
      padding: 20px 40px 40px 40px;
    }

    /* Access Pickers Improvement */
    .access-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    .access-card {
      background: #222; /* Input background */
      border: 1px solid #555;
      border-radius: 8px;
      padding: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: 0.1s;
      user-select: none;
    }
    .access-card:hover {
      border-color: #7f9616;
    }
    .access-card.selected {
      background: rgba(127, 150, 22, 0.2);
      border-color: #7f9616;
      color: #fff;
    }
    .access-card.selected .muted {
      color: rgba(255,255,255,0.8);
    }

    .multi-picker {
      position: relative;
      width: 100%;
    }
    .multi-picker::after {
      content: "▾";
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #aaa;
      pointer-events: none;
      font-size: 12px;
    }
    .multi-picker-input {
      width: 100%;
      cursor: pointer;
      padding-right: 34px;
    }
    .multi-picker-menu {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 6px);
      background: #222;
      border: 1px solid #555;
      border-radius: 10px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.45);
      z-index: 50;
      overflow: hidden;
    }
    .multi-picker-search-wrap {
      padding: 8px;
      border-bottom: 1px solid #333;
      background: #222;
    }
    .multi-picker-search {
      width: 100%;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid #444;
      background: #222;
      color: #e6edf3;
    }
    .multi-picker-list {
      max-height: 260px;
      overflow: auto;
      padding: 6px;
    }
    .multi-picker-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 10px;
      cursor: pointer;
      user-select: none;
      border: 1px solid #3b3b3b;
      border-radius: 10px;
      background: #2a2a2a;
      margin: 4px 0;
    }
    .multi-picker-item:hover {
      border-color: #7f9616;
    }
    .multi-picker-item.selected {
      background: rgba(127, 150, 22, 0.12);
      border-color: #7f9616;
    }
    .multi-picker-checkbox {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 4px;
      border: 1px solid #555;
      background: #222;
      display: grid;
      place-content: center;
      flex: 0 0 auto;
      cursor: pointer;
    }
    .multi-picker-checkbox:checked {
      background: #7f9616;
      border-color: #7f9616;
    }
    .multi-picker-checkbox:checked::after {
      content: "✓";
      color: #fff;
      font-size: 12px;
      line-height: 1;
      font-weight: 700;
    }
    .multi-picker-left {
      min-width: 0;
      flex: 1 1 auto;
    }
    
    /* Inputs in Admin */
    .modal-body-content input, .modal-body-content select {
      background: #222;
      border: 1px solid #555;
      color: #e6edf3;
      padding: 10px;
      border-radius: 8px;
    }
    .modal-body-content input:focus, .modal-body-content select:focus {
      border-color: #7f9616;
      outline: 1px solid #7f9616;
    }
    .modal-body-content .hr {
      background: #444;
      margin: 20px 0;
    }
    .modal-body-content button.primary {
      background-color: #7f9616;
      color: white;
      border: none;
    }
    .modal-body-content button.primary:hover {
      background-color: #657a12;
    }

    .chat-header {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .chat-header-text {
      min-width: 0;
      flex: 1 1 auto;
    }
    .chat-back-btn {
      display: none;
    }

    @media (max-width: 1100px) {
      .modal-header-right {
        padding: 16px 20px;
      }
      .modal-body-content {
        padding: 16px 20px 24px 20px;
      }
      .modal-sidebar .tab {
        font-size: 16px;
      }
    }

    @media (max-width: 900px) {
      .app {
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
      }

      .side {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #444;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: auto;
      }

      .main {
        width: 100%;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: auto;
        padding: 10px;
      }

      .chat-back-btn {
        display: inline-flex;
        flex: 0 0 auto;
      }

      .app.mobile-chat-open .side {
        display: none;
      }
      .app:not(.mobile-chat-open) .main {
        display: none;
      }
      .right-sidebar {
        display: none !important;
      }

      .modal-overlay {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
      }
      .modal-content {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-width: none;
        max-height: none;
        border-radius: 0;
        flex-direction: column;
      }
      .modal-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #444;
      }
      .modal-sidebar .tabs {
        flex-direction: row;
        padding: 10px;
        gap: 8px;
      }
      .modal-sidebar .tab {
        font-size: 14px;
        padding: 8px 10px;
        border-radius: 10px;
        white-space: nowrap;
        text-align: center;
      }
      .modal-header-right {
        padding: 14px 16px;
      }
      .modal-body-content {
        padding: 14px 16px 18px 16px;
      }
    }