/* Modals, image editor, attachment editor — index/modals.css */
    /* ============ MODAL ============ */
    .modal-overlay {
      display: flex;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 100;
      justify-content: center;
      align-items: center;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.18s ease, visibility 0.18s;
      contain: layout style;
    }

    .modal-overlay.open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .modal-overlay > * {
      transform: translateY(10px) scale(0.98);
      opacity: 0;
      transition: transform 0.18s ease, opacity 0.18s ease;
    }

    .modal-overlay.open > * {
      transform: none;
      opacity: 1;
    }
    /* ── Public file link modal ── */
    .file-link-modal {
      max-width: 500px;
      width: min(96vw, 500px);
      padding: 0;
      border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
      background: var(--bg-secondary);
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
        0 24px 64px rgba(0,0,0,0.38),
        0 8px 24px rgba(0,0,0,0.22),
        inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
      overflow: hidden;
      border-radius: 20px;
      animation: flm-in .22s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes flm-in {
      from { opacity:0; transform: scale(.88) translateY(14px); }
      to   { opacity:1; transform: scale(1) translateY(0); }
    }
    .file-link-modal-header-band {
      position: relative;
      overflow: hidden;
      padding: 28px 28px 20px;
      background:
        radial-gradient(ellipse 140% 140% at 50% -30%,
          color-mix(in srgb, var(--accent) 28%, transparent) 0%,
          transparent 65%),
        linear-gradient(160deg,
          color-mix(in srgb, var(--accent) 16%, var(--bg-secondary)) 0%,
          color-mix(in srgb, var(--success) 10%, var(--bg-secondary)) 100%);
      border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      text-align: center;
    }
    .file-link-header-deco {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(28px);
      opacity: .32;
    }
    .file-link-header-deco.d1 {
      width: 120px; height: 120px;
      top: -40px; right: -20px;
      background: var(--accent);
    }
    .file-link-header-deco.d2 {
      width: 90px; height: 90px;
      bottom: -30px; left: -20px;
      background: var(--success);
    }
    .file-link-modal-icon {
      position: relative;
      width: 56px;
      height: 56px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 80%, #fff 20%),
        color-mix(in srgb, var(--success) 70%, var(--accent) 30%));
      color: #fff;
      box-shadow:
        0 6px 20px color-mix(in srgb, var(--accent) 50%, transparent),
        inset 0 1px 0 rgba(255,255,255,.28);
    }
    .file-link-modal-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .file-link-modal-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -.01em;
    }
    .file-link-modal-subtitle {
      font-size: 12px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .file-link-modal-subtitle i { color: color-mix(in srgb, var(--warning) 80%, var(--text-muted)); }
    .file-link-modal-body {
      padding: 20px 20px 28px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .file-link-card {
      border-radius: 14px;
      border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
      background: color-mix(in srgb, var(--bg-primary) 60%, transparent);
      overflow: hidden;
      transition: box-shadow .18s ease, border-color .18s ease;
    }
    .file-link-card:hover {
      border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
      box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 14%, transparent);
    }
    .file-link-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px 7px;
      background: color-mix(in srgb, var(--accent) 8%, transparent);
      border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
    }
    .file-link-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 600;
      color: color-mix(in srgb, var(--accent) 90%, var(--text-primary));
      background: color-mix(in srgb, var(--accent) 14%, transparent);
      border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
      border-radius: 20px;
      padding: 2px 8px 2px 6px;
      text-transform: uppercase;
      letter-spacing: .03em;
    }
    .file-link-badge i { font-size: 9px; }
    .file-link-open-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: var(--accent);
      text-decoration: none;
      padding: 2px 6px;
      border-radius: 6px;
      background: color-mix(in srgb, var(--accent) 10%, transparent);
      transition: background .15s;
    }
    .file-link-open-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
    .file-link-card-body {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 11px 12px;
    }
    .file-link-value {
      font-size: 12.5px;
      color: var(--text-primary);
      font-family: ui-monospace, 'Cascadia Code', 'Fira Mono', monospace;
      word-break: break-all;
      flex: 1;
      text-decoration: none;
      letter-spacing: -.01em;
      opacity: .88;
      transition: opacity .15s, color .15s;
    }
    .file-link-value:hover { opacity: 1; color: var(--accent); }
    .file-link-copy-btn {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
      background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 16%, var(--bg-primary)),
        color-mix(in srgb, var(--accent) 8%, var(--bg-primary)));
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      font-size: 13px;
      transition: background .15s, transform .15s, box-shadow .15s;
    }
    .file-link-copy-btn:hover {
      background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 28%, var(--bg-primary)),
        color-mix(in srgb, var(--accent) 18%, var(--bg-primary)));
      transform: translateY(-1px);
      box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
    }
    .file-link-copy-btn:active { transform: scale(.94); }

    .modal-box.split-window-modal-box {
      width: min(92vw, 720px);
      max-width: min(92vw, 720px);
      padding: 18px 18px 16px;
      border-radius: 22px;
      border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
      background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 32%),
        var(--bg-secondary);
      box-shadow: 0 24px 68px rgba(0,0,0,0.38);
    }

    .split-window-modal-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 14px;
    }

    .split-window-modal-subtitle {
      margin-top: 6px;
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.55;
    }

    .split-window-close-btn {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
      background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
      color: var(--text-muted);
      cursor: pointer;
      flex-shrink: 0;
    }

    .split-window-filter-row {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 12px;
    }

    .split-window-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .split-window-tab {
      border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
      background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
      color: var(--text-muted);
      border-radius: 999px;
      padding: 8px 14px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
    }

    .split-window-tab.active {
      color: #fff;
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 90%, #fff 10%), color-mix(in srgb, var(--accent) 70%, #0f172a 30%));
      border-color: color-mix(in srgb, var(--accent) 70%, transparent);
    }

    #split-window-search-input {
      width: 100%;
      min-width: 0;
      border-radius: 14px;
      border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
      background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
      color: var(--text-primary);
      font-size: 13px;
      padding: 12px 14px;
      outline: none;
    }

    #split-window-search-input:focus {
      border-color: color-mix(in srgb, var(--accent) 70%, transparent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    .split-window-status {
      margin-bottom: 12px;
      border-radius: 12px;
      padding: 10px 12px;
      font-size: 12px;
      background: color-mix(in srgb, var(--accent) 10%, transparent);
      border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
      color: var(--text-muted);
    }

    .split-window-target-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      max-height: min(58vh, 520px);
      overflow-y: auto;
      padding-right: 4px;
    }

    .split-window-target-card {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      width: 100%;
      text-align: left;
      border-radius: 18px;
      border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
      background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
      padding: 14px;
      cursor: pointer;
    }

    .split-window-target-card:hover {
      border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
      box-shadow: 2px 2px 9px rgb(0 0 0 / 19%);
    }

    .split-window-target-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      background: color-mix(in srgb, var(--accent) 16%, transparent);
      color: var(--accent);
    }

    .split-window-target-body {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .split-window-target-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .split-window-target-meta,
    .split-window-target-desc {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.5;
    }

    .split-window-target-tag {
      position: absolute;
      top: 10px;
      right: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 54px;
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
      border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    }

    .split-window-empty {
      grid-column: 1 / -1;
      border-radius: 18px;
      border: 1px dashed color-mix(in srgb, var(--border) 84%, transparent);
      padding: 24px;
      text-align: center;
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.6;
      background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
    }

    @media (max-width: 720px) {
      .split-window-target-list {
        grid-template-columns: 1fr;
      }
    }

    .modal-box.app-launch-choice-modal-box {
      width: min(92vw, 520px);
      max-width: min(92vw, 520px);
      padding: 20px;
      border-radius: 22px;
      border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
      background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 10%, transparent), transparent 36%),
        var(--bg-secondary);
      box-shadow: 0 24px 68px rgba(0,0,0,0.38);
    }

    .app-launch-choice-name {
      font-size: 18px;
      font-weight: 800;
      color: var(--text-primary);
      margin-bottom: 6px;
    }

    .app-launch-choice-meta {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 16px;
      line-height: 1.55;
    }

    .app-launch-choice-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .app-launch-choice-btn {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      width: 100%;
      min-height: 132px;
      padding: 16px;
      border-radius: 18px;
      border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
      background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
      color: var(--text-primary);
      text-align: left;
      cursor: pointer;
      transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
    }

    .app-launch-choice-btn:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
      box-shadow: 0 12px 26px rgba(0,0,0,0.16);
    }

    .app-launch-choice-btn.primary {
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--bg-primary)), color-mix(in srgb, var(--accent) 6%, var(--bg-primary)));
      border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
    }

    .app-launch-choice-btn-title {
      font-size: 14px;
      font-weight: 800;
      color: var(--text-primary);
    }

    .app-launch-choice-btn-subtitle {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.55;
    }

    @media (max-width: 640px) {
      .app-launch-choice-actions {
        grid-template-columns: 1fr;
      }
    }

    .file-link-close-btn {
      position: absolute;
      top: 12px;
      right: 14px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, #fff 18%, transparent);
      background: color-mix(in srgb, #000 18%, transparent);
      color: rgba(255,255,255,.72);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      cursor: pointer;
      transition: background .15s, color .15s, transform .15s;
      z-index: 2;
    }
    .file-link-close-btn:hover {
      background: color-mix(in srgb, #000 38%, transparent);
      color: #fff;
      transform: scale(1.1);
    }

    .modal-box {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 32px;
      width: 360px;
      max-width: 90vw;
      box-shadow: var(--shadow);
      position: relative;
    }
    #modal-invite-suggestions,
    #members-modal-invite-suggestions {
      display: none;
      position: absolute;
      left: 0; right: 0;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-top: 4px;
      max-height: 220px;
      overflow-y: auto;
      z-index: 10;
      box-shadow: 0 4px 18px rgba(0,0,0,0.28);
    }
    #modal-invite-suggestions.visible,
    #members-modal-invite-suggestions.visible { display: block; }
    .invite-suggestion-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      cursor: pointer;
      font-size: 14px;
      transition: background 0.12s;
    }
    .invite-suggestion-item:hover, .invite-suggestion-item.focused {
      background: var(--bg-hover, rgba(99,102,241,0.13));
    }
    .invite-suggestion-avatar {
      width: 30px; height: 30px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      background: var(--accent);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700; color: #fff;
      overflow: hidden;
    }
    .invite-suggestion-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .invite-suggestion-name-wrapper {
      display: flex;
      flex-direction: column;
      min-width: 0;
      gap: 2px;
    }
    .invite-suggestion-name { font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .invite-suggestion-fullname { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .invite-suggestion-match { color: var(--accent); }

    #user-profile-modal {   z-index: 200;    }
    #user-profile-modal.open .modal-box {
      animation: userProfileModalIn 0.3s cubic-bezier(0.18, 0.82, 0.25, 1);
      transform-origin: 50% 18%;
      z-index: 200;
    }
    @keyframes userProfileModalIn {
      0% { transform: translateY(16px) scale(0.92); opacity: 0; }
      58% { transform: translateY(-2px) scale(1.02); opacity: 1; }
      100% { transform: translateY(0) scale(1); opacity: 1; }
    }
    #up-avatar-wrap.profile-avatar-clickable { cursor: zoom-in; }

    #profile-image-modal {
      z-index: 1800;
      background: rgba(2, 6, 23, 0.86);
    }
    #profile-image-modal .profile-image-stage {
      width: min(92vw, 760px);
      max-height: 88vh;
      position: relative;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(8, 15, 34, 0.78);
      box-shadow: 0 26px 64px rgba(0,0,0,0.45);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }
    #profile-image-modal.open .profile-image-stage {
      animation: profileImageStageIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
    }
    #profile-image-modal-img {
      width: 100%;
      height: auto;
      max-height: calc(88vh - 24px);
      object-fit: contain;
      border-radius: 12px;
      background: #0b1222;
      display: block;
    }
    .profile-image-close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.25);
      background: rgba(15, 23, 42, 0.76);
      color: #f8fafc;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.16s, transform 0.16s;
    }
    .profile-image-close:hover {
      background: rgba(30, 41, 59, 0.9);
      transform: scale(1.04);
    }
    @keyframes profileImageStageIn {
      0% { transform: scale(0.92); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }

    .modal-box h2 {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 20px;
      color: var(--text-primary);
    }

    .modal-box input {
      width: 100%;
    #app-force-update-overlay {
      z-index: 100100;
      background: rgba(7, 10, 20, 0.84);
    }
    #app-force-update-overlay .force-update-card {
      width: min(420px, calc(100vw - 28px));
      padding: 28px 24px 22px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(180deg, rgba(22, 28, 45, 0.98), rgba(12, 16, 28, 0.98));
      box-shadow: 0 24px 60px rgba(0,0,0,0.4);
      color: var(--text-primary);
      text-align: center;
    }
    .force-update-icon {
      width: 68px;
      height: 68px;
      margin: 0 auto 16px;
      border-radius: 20px;
      display: grid;
      place-items: center;
      font-size: 30px;
      color: #fff;
      background: linear-gradient(135deg, #f59e0b, #ef4444);
      box-shadow: 0 16px 36px rgba(239, 68, 68, 0.28);
    }
    .force-update-card h2 {
      margin: 0 0 10px;
      font-size: 24px;
      line-height: 1.2;
    }
    .force-update-card p {
      margin: 0;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.65;
    }
    .force-update-version-row {
      margin: 18px 0 20px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .force-update-version-box {
      padding: 12px 10px;
      border-radius: 14px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.06);
    }
    .force-update-version-label {
      display: block;
      margin-bottom: 6px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
    }
    .force-update-version-value {
      display: block;
      font-size: 20px;
      font-weight: 800;
      color: #fff;
    }
    .force-update-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .force-update-btn {
      width: 100%;
      border: 0;
      border-radius: 14px;
      padding: 13px 16px;
      font: inherit;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
    }
    .force-update-btn:hover {
      transform: translateY(-1px);
    }
    .force-update-btn.primary {
      background: linear-gradient(135deg, #38bdf8, #2563eb);
      color: #fff;
    }
    .force-update-btn.secondary {
      background: rgba(255,255,255,0.08);
      color: var(--text-primary);
    }
    .force-update-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      transform: none;
    }
    .force-update-note {
      margin-top: 12px;
      font-size: 12px;
      color: var(--text-muted);
    }
      padding: 11px 14px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg-tertiary);
      color: var(--text-primary);
      font-size: 15px;
      font-family: inherit;
      outline: none;
      transition: border-color 0.2s;
	  margin-bottom: 12px;
    }

    .modal-box input:focus { border-color: var(--accent); }

    .modal-box .modal-error {
      color: var(--accent);
      font-size: 13px;
      min-height: 20px;
      margin-bottom: 8px;
    }

    .modal-box .modal-success {
      color: var(--success);
      font-size: 13px;
      min-height: 20px;
      margin-bottom: 8px;
    }

    .modal-actions {
      display: flex;
      gap: 10px;
      margin-top: 4px;
    }

    .modal-actions button { flex: 1; padding: 10px; margin-top: 0; width: auto; box-sizing: border-box; }
    .attach-picker-actions {
      display: flex;
      gap: 10px;
      margin-top: 6px;
    }
    .attach-picker-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px 12px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--bg-tertiary);
      color: var(--attach-picker-color, var(--text-primary));
      cursor: pointer;
      font-family: inherit;
      font-size: 13px;
      transition: border-color 0.15s, background 0.15s, color 0.15s;
    }
    .attach-picker-btn i { font-size: 18px; }
    .attach-picker-btn:hover {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 14%, var(--bg-tertiary));
      color: #fff;
    }

    /* ===== Image Editor Modal ===== */
    #image-editor-modal {
      padding: 0;
      align-items: stretch;
      justify-content: stretch;
      background: rgba(0,0,0,0.86);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .image-editor-modal-box {
      width: 100vw;
      max-width: 100vw;
      height: 100vh;
      height: 100dvh;
      max-height: 100vh;
      max-height: 100dvh;
      padding: 0;
      border-radius: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--bg-primary);
      border: none;
    }

    /* top bar */
    .image-editor-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: max(14px, env(safe-area-inset-top)) 12px 12px;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .image-editor-meta-title {
      flex: 1;
      min-width: 0;
      text-align: center;
    }
    .image-editor-meta-title h2 {
      margin: 0;
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: 0.01em;
    }
    .image-editor-meta-title .ie-filename {
      font-size: 11.5px;
      color: var(--text-muted);
      margin-top: 1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ie-header-btn {
      width: 38px; height: 38px;
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      border: none; border-radius: 50%;
      background: transparent;
      color: var(--text-secondary);
      font-size: 17px;
      cursor: pointer;
      transition: background 0.14s;
      -webkit-tap-highlight-color: transparent;
    }
    .ie-header-btn:hover { background: color-mix(in srgb, var(--text-primary) 10%, transparent); }
    .ie-header-btn:active { background: color-mix(in srgb, var(--text-primary) 18%, transparent); }

    /* image stage (grows to fill space) */
    .image-editor-scroll {
      flex: 1;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background-color: var(--bg-primary);
      background-image: repeating-conic-gradient(color-mix(in srgb, var(--text-primary) 5%, transparent) 0% 25%, transparent 0% 50%);
      background-size: 20px 20px;
    }

    .image-editor-preview-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .image-editor-stage {
      position: relative;
      display: inline-block;
      line-height: 0;
    }

    .image-editor-canvas {
      display: block;
      /* max-w/h set explicitly by fitCanvasToViewport() in JS; CSS fallback for initial paint */
      max-width: calc(100vw - 32px);
      max-height: calc(100dvh - 260px);
      border-radius: 6px;
      box-shadow: 0 8px 48px rgba(0,0,0,0.7);
    }

    /* paint overlay canvas */
    .image-editor-paint-canvas {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      touch-action: none;
      border-radius: 6px;
      z-index: 1;
    }

    /* crop overlay — above paint canvas */
    .image-editor-crop-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: 6px;
      z-index: 2;
    }
    .image-editor-crop-overlay.active { pointer-events: auto; }

    .image-editor-crop-box {
      position: absolute;
      border: 1.5px solid #fff;
      background: rgba(255,255,255,0.06);
      box-shadow: 0 0 0 9999px rgba(0,0,0,0.52);
      cursor: move;
      touch-action: none;
    }
    /* Rule-of-thirds grid lines */
    .image-editor-crop-box::before,
    .image-editor-crop-box::after {
      content: '';
      position: absolute;
      pointer-events: none;
    }
    .image-editor-crop-box::before {
      inset: 0;
      background:
        linear-gradient(to right,  transparent 33.3%, rgba(255,255,255,0.18) 33.3%, rgba(255,255,255,0.18) calc(33.3% + 1px), transparent calc(33.3% + 1px),
                                   transparent 66.6%, rgba(255,255,255,0.18) 66.6%, rgba(255,255,255,0.18) calc(66.6% + 1px), transparent calc(66.6% + 1px)),
        linear-gradient(to bottom, transparent 33.3%, rgba(255,255,255,0.18) 33.3%, rgba(255,255,255,0.18) calc(33.3% + 1px), transparent calc(33.3% + 1px),
                                   transparent 66.6%, rgba(255,255,255,0.18) 66.6%, rgba(255,255,255,0.18) calc(66.6% + 1px), transparent calc(66.6% + 1px));
    }

    .image-editor-crop-handle {
      position: absolute;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 6px rgba(0,0,0,0.45);
    }
    .image-editor-crop-handle.se { right: -9px; bottom: -9px; cursor: nwse-resize; }
    .image-editor-crop-handle.sw { left: -9px;  bottom: -9px; cursor: nesw-resize; }
    .image-editor-crop-handle.ne { right: -9px; top: -9px;    cursor: nesw-resize; }
    .image-editor-crop-handle.nw { left: -9px;  top: -9px;    cursor: nwse-resize; }

    /* floating rotate buttons on image */
    .image-editor-overlay-actions {
      position: absolute;
      right: 8px;
      bottom: 8px;
      display: flex;
      gap: 6px;
      z-index: 2;
    }
    .image-editor-overlay-btn {
      width: 36px; height: 36px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 50%;
      background: rgba(0,0,0,0.62);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.14s, transform 0.12s;
    }
    .image-editor-overlay-btn:hover  { background: rgba(255,255,255,0.18); transform: scale(1.08); }
    .image-editor-overlay-btn:active { background: rgba(255,255,255,0.28); transform: scale(0.94); }

    /* bottom controls panel */
    .image-editor-controls {
      flex-shrink: 0;
      background: var(--bg-secondary);
      border-top: 1px solid var(--border);
      padding: 14px 16px max(14px, env(safe-area-inset-bottom));
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* tool button row */
    .image-editor-toolbar {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .image-editor-tool-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 11px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg-tertiary);
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 12px;
      font-family: inherit;
      transition: border-color 0.14s, background 0.14s, color 0.14s;
      -webkit-tap-highlight-color: transparent;
    }
    .image-editor-tool-btn:hover {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 16%, var(--bg-tertiary));
      color: var(--text-primary);
    }
    .image-editor-tool-btn.active {
      border-color: #f97316;
      background: rgba(249,115,22,0.18);
      color: #fed7aa;
    }

    /* sliders row */
    .image-editor-sliders {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 18px;
    }
    @media (max-width: 480px) {
      .image-editor-sliders { grid-template-columns: 1fr; }
    }
    .image-editor-slider-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .image-editor-slider-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11.5px;
      color: var(--text-muted);
    }
    .image-editor-slider-header span:last-child {
      font-weight: 600;
      color: var(--text-secondary);
    }
    .image-editor-slider-group input[type="range"] {
      width: 100%;
      height: 4px;
      accent-color: var(--accent);
      cursor: pointer;
    }

    /* stats row (above caption bar) */
    .image-editor-stats {
      font-size: 11px;
      color: var(--text-muted);
      text-align: right;
      white-space: nowrap;
      line-height: 1.5;
      min-height: 16px;
    }

    /* caption bar — message-input style */
    .ie-caption-bar {
      display: flex;
      align-items: flex-end;
      gap: 8px;
    }
    .ie-caption-input {
      flex: 1;
      resize: none;
      min-height: 38px;
      max-height: 88px;
      overflow-y: auto;
      padding: 9px 12px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--bg-tertiary);
      color: var(--text-primary);
      font-size: 14px;
      font-family: inherit;
      outline: none;
      transition: border-color 0.14s;
      line-height: 1.45;
      box-sizing: border-box;
    }
    .ie-caption-input::placeholder { color: var(--text-muted); }
    .ie-caption-input:focus { border-color: var(--accent); }

    .ie-send-btn {
      flex-shrink: 0;
      width: 42px; height: 42px;
      border-radius: 50%;
      border: none;
      background: var(--accent);
      color: #fff;
      font-size: 16px;
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background 0.14s, transform 0.12s;
    }
    .ie-send-btn:hover  { filter: brightness(1.12); }
    .ie-send-btn:active { transform: scale(0.93); }
    .ie-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ── Paint toolbar ── */
    .ie-paint-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px;
      padding: 10px 12px;
      background: color-mix(in srgb, var(--accent) 6%, rgba(255,255,255,0.025));
      border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,0.07));
      border-radius: 12px;
    }

    .ie-paint-color-swatch {
      width: 30px; height: 30px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.35);
      cursor: pointer;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
      transition: border-color 0.14s, transform 0.12s;
    }
    .ie-paint-color-swatch:hover { border-color: rgba(255,255,255,0.7); transform: scale(1.1); }
    .ie-paint-color-swatch input[type=color] {
      position: absolute; inset: -4px;
      opacity: 0; cursor: pointer;
      width: calc(100% + 8px); height: calc(100% + 8px);
    }

    .ie-paint-size-group {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 1;
      min-width: 110px;
    }
    .ie-paint-size-label {
      font-size: 11px;
      color: var(--text-muted);
      flex-shrink: 0;
    }
    .ie-paint-size-slider {
      flex: 1;
      height: 4px;
      accent-color: var(--accent);
      cursor: pointer;
    }
    .ie-paint-size-val {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      min-width: 18px;
      text-align: right;
    }

    /* stage cursor overrides in paint mode */
    .image-editor-stage.paint-mode .image-editor-paint-canvas { cursor: crosshair; }
    .image-editor-stage.paint-eraser .image-editor-paint-canvas { cursor: cell; }

    /* ===== Attachment Editor Modal ===== */
    #attachment-editor-modal {
      background: rgba(0,0,0,0.72);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .attachment-editor-modal-box {
      width: min(600px, 100%);
      max-height: min(90dvh, 780px);
      padding: 0;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--bg-secondary);
      border: 1px solid rgba(255,255,255,0.09);
      box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
    }

    /* header */
    .ae-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 18px 14px;
      background: rgba(255,255,255,0.025);
      border-bottom: 1px solid rgba(255,255,255,0.07);
      flex-shrink: 0;
    }
    .ae-header-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: color-mix(in srgb, var(--accent) 18%, transparent);
      border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--accent);
      font-size: 15px;
      flex-shrink: 0;
    }
    .ae-header-text { flex: 1; min-width: 0; }
    .ae-header-text h2 {
      margin: 0;
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.2;
    }
    .ae-header-text .ae-filename {
      font-size: 11.5px;
      color: var(--text-muted);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ae-close-btn {
      width: 34px; height: 34px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.05);
      color: var(--text-secondary);
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer;
      font-size: 14px;
      transition: background 0.14s, color 0.14s;
      flex-shrink: 0;
    }
    .ae-close-btn:hover { background: rgba(255,255,255,0.12); color: var(--text-primary); }

    /* scrollable body */
    .attachment-editor-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .attachment-editor-scroll::-webkit-scrollbar { width: 4px; }
    .attachment-editor-scroll::-webkit-scrollbar-track { background: transparent; }
    .attachment-editor-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

    /* preview area */
    .attachment-editor-preview {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 160px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.07);
      background: rgb(110 148 197 / 11%);
      overflow: hidden;
    }

    .attachment-editor-video {
      width: 100%;
      max-height: min(45vh, 380px);
      border-radius: 13px;
      background: #000;
      display: block;
    }

    /* file card */
    .attachment-editor-file-card {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      border: none;
    }

    .attachment-editor-file-icon {
      width: 48px; height: 48px;
      border-radius: 12px;
      display: inline-flex; align-items: center; justify-content: center;
      background: color-mix(in srgb, var(--accent) 16%, transparent);
      border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
      color: var(--accent);
      font-size: 20px;
      flex-shrink: 0;
    }

    .attachment-editor-file-meta {
      min-width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .attachment-editor-file-name {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text-primary);
      word-break: break-all;
      line-height: 1.35;
    }

    .attachment-editor-file-size {
      font-size: 12px;
      color: var(--text-muted);
    }

    /* options grid */
    .attachment-editor-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .attachment-editor-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .attachment-editor-field label {
      font-size: 11.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
    }

    .attachment-editor-field select,
    .attachment-editor-field textarea {
      width: 100%;
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 10px;
      background: rgb(110 148 197 / 11%);
      color: var(--text-primary);
      font-size: 13px;
      font-family: inherit;
      padding: 9px 12px;
      outline: none;
      transition: border-color 0.15s, background 0.15s;
    }

    .attachment-editor-field textarea {
      min-height: 68px;
      resize: vertical;
      line-height: 1.5;
    }
    .attachment-editor-field textarea::placeholder { color: var(--text-muted); }

    .attachment-editor-field select:focus,
    .attachment-editor-field textarea:focus {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 6%, rgba(255,255,255,0.04));
    }
    .attachment-editor-field select option { background: var(--bg-secondary); }

    /* stats line */
    .attachment-editor-stats {
      font-size: 12px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .attachment-editor-stats::before {
      content: '';
      display: inline-block;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent);
      opacity: 0.6;
      flex-shrink: 0;
    }

    /* progress */
    .attachment-editor-progress {
      display: none;
      border-radius: 12px;
      padding: 12px 14px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
    }

    .attachment-editor-progress.visible {
      display: block;
    }

    .attachment-editor-progress-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
      font-size: 12px;
      color: var(--text-secondary);
    }

    .attachment-editor-progress-label span:last-child {
      font-weight: 700;
      color: var(--accent);
    }

    .attachment-editor-progress-track {
      width: 100%;
      height: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      overflow: hidden;
    }

    .attachment-editor-progress-fill {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #f43f5e));
      transition: width 0.15s linear;
      box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
    }

    /* compress toggle */
    .ae-compress-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 14px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      background: rgb(110 148 197 / 11%);
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      transition: border-color 0.15s, background 0.15s;
    }
    .ae-compress-row:hover {
      border-color: color-mix(in srgb, var(--accent) 50%, transparent);
      background: color-mix(in srgb, var(--accent) 5%, transparent);
    }
    .ae-compress-row input[type=checkbox] {
      position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
    }
    .ae-cs {
      width: 40px; height: 22px;
      background: rgba(255,255,255,0.13);
      border-radius: 11px;
      flex-shrink: 0;
      position: relative;
      transition: background 0.18s;
    }
    .ae-cs::after {
      content: '';
      position: absolute;
      width: 18px; height: 18px;
      background: #fff;
      border-radius: 50%;
      top: 2px; left: 2px;
      transition: left 0.18s;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }
    .ae-compress-row input[type=checkbox]:checked + .ae-cs { background: var(--accent); }
    .ae-compress-row input[type=checkbox]:checked + .ae-cs::after { left: 20px; }
    .ae-compress-info { flex: 1; min-width: 0; }
    .ae-compress-info strong { font-size: 13px; font-weight: 600; color: var(--text-primary); display: block; margin-bottom: 1px; }
    .ae-compress-info span { font-size: 11.5px; color: var(--text-muted); }

    /* footer actions */
    .ae-footer {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 18px;
      border-top: 1px solid rgba(255,255,255,0.07);
      background: rgba(255,255,255,0.015);
      flex-shrink: 0;
    }
    .ae-cancel-btn {
      flex: 1;
      padding: 11px 16px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.05);
      color: var(--text-secondary);
      font-size: 14px;
      font-family: inherit;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.14s, color 0.14s;
    }
    .ae-cancel-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
    .ae-send-btn {
      flex: 2;
      padding: 11px 20px;
      border-radius: 12px;
      border: none;
      background: var(--accent);
      color: #fff;
      font-size: 14px;
      font-family: inherit;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      transition: filter 0.14s, transform 0.12s;
    }
    .ae-send-btn:hover { filter: brightness(1.1); }
    .ae-send-btn:active { transform: scale(0.97); }
    .ae-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

    @media (max-width: 640px) {
      #attachment-editor-modal { padding: 0; align-items: center; }
      .attachment-editor-modal-box {
        width: 100%;
        max-height: 92dvh;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
      }
    }


/* ─── Delete Scope Modal ────────────────────────────────── */
.delete-scope-modal {
  max-width: 380px;
  text-align: center;
  padding: 28px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.delete-scope-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(var(--danger-rgb, 220,53,69), 0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--danger, #dc3545);
}
.delete-scope-desc {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.delete-scope-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.delete-scope-btns .btn {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.delete-scope-btns .btn i {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.delete-scope-btns .btn-secondary {
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border);
}
.delete-scope-btns .btn-secondary:hover {
  background: var(--bg3, var(--bg2));
}
.delete-scope-sub {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  display: block;
  margin-top: 1px;
}
.delete-scope-cancel {
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
}
.delete-scope-cancel:hover { background: var(--bg2); color: var(--text); }

/* ===== SMS modal custom styling ===== */
#sms-modal .modal-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: none;
  background: var(--bg3);
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background 0.15s, color 0.15s;
  z-index: 1;
}
#sms-modal .modal-close-btn:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg3));
  color: var(--text-primary);
}

#sms-modal .modal-box {
  max-width: 460px;
  width: min(94vw, 460px);
  padding: 18px 18px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 94%, #fff) 0%, var(--bg-secondary) 100%);
  box-shadow: 0 28px 64px rgba(2,6,23,0.45), 0 8px 28px rgba(2,6,23,0.28);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
}

#sms-modal .modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

#sms-modal .modal-title i { font-size: 20px; }

#sms-modal #sms-notify-info {
  border-radius: 12px;
  padding: 14px 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--bg-primary) 88%, transparent), color-mix(in srgb, var(--bg-secondary) 96%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 10%, transparent);
  line-height: 1.55;
}

#sms-modal #sms-notify-info div[data-i18n="sms.notify_preview"],
#sms-modal #sms-notify-info div[data-i18n="sms.notify_preview"]:not(:empty) {
  direction: rtl;
  text-align: right;
  font-size: 14px;
  color: var(--text);
}

#sms-modal #sms-usage-row {
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg-primary);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

/* make modal buttons consistent height and visually prominent */
#sms-modal .btn {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
}

#sms-modal .btn.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff), var(--accent));
  color: #fff;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

@media (max-width:480px) {
  #sms-modal .modal-box { width: 92vw; padding: 14px; border-radius: 14px; }
  #sms-modal .btn { height: 42px; }
}

/* Fix primary button top margin for SMS modal layout */
#sms-modal .btn { margin-top: 0 !important; }
#sms-modal .modal-actions button { margin-top: 0 !important; }

/* ─── Multi-file Send Modal ─────────────────────────────── */
.multi-file-modal-box {
  width: min(540px, 100%);
  max-height: min(88dvh, 720px);
  padding: 0;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
}

.multi-file-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.multi-file-scroll::-webkit-scrollbar { width: 4px; }
.multi-file-scroll::-webkit-scrollbar-track { background: transparent; }
.multi-file-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

.multi-file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-primary) 50%, transparent);
}

.multi-file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.multi-file-item:last-of-type { border-bottom: none; }

.multi-file-item-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--accent);
  font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.multi-file-item-meta {
  flex: 1;
  min-width: 0;
}
.multi-file-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.multi-file-item-size {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.multi-file-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.multi-file-zip-name-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 2px 0;
}
.multi-file-zip-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.multi-file-zip-name-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-primary) 60%, transparent);
  color: var(--text-primary);
  font-size: 13.5px;
  font-family: inherit;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.multi-file-zip-name-input:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, rgba(255,255,255,0.04));
}

@media (max-width: 640px) {
  .multi-file-modal-box {
    width: 100%;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
  }
  #multi-file-modal { padding: 0; align-items: flex-end; }
}

/* ── Link open confirmation sheet (APK native app) ───────────── */
#_link-open-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#_link-open-sheet.visible { opacity: 1; }
._link-open-sheet-inner {
  background: var(--bg-secondary, #1a1d27);
  border: 1px solid var(--border, #2e3350);
  border-radius: 16px;
  padding: 16px;
  width: 100%;
  max-width: 480px;
  transform: translateY(20px);
  transition: transform 0.22s cubic-bezier(.34,1.2,.64,1);
}
#_link-open-sheet.visible ._link-open-sheet-inner { transform: translateY(0); }
._link-open-sheet-label {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 4px;
}
._link-open-sheet-url {
  font-size: 13px;
  color: var(--text-primary, #e2e8f0);
  word-break: break-all;
  background: var(--bg-primary, #0f1117);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 14px;
  border: 1px solid var(--border, #2e3350);
}
._link-open-sheet-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
._link-open-cancel {
  background: transparent;
  border: 1px solid var(--border, #2e3350);
  color: var(--text-muted, #94a3b8);
  border-radius: 9px;
  padding: 8px 18px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
._link-open-confirm {
  background: var(--accent, #6c63ff);
  border: none;
  color: #fff;
  border-radius: 9px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
._link-open-cancel:hover { background: var(--bg-tertiary, #21253a); }
._link-open-confirm:hover { filter: brightness(1.1); }


/* ── Poll Modal shared close button ──────────────────────────────────────── */
.poll-modal-close-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-muted);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.poll-modal-close-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary));
  color: var(--text-primary);
}

/* ── Poll Create Modal ─────────────────────────────────────────────────── */
.poll-create-box {
  max-width: 420px;
  width: 100%;
  padding: 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
}

/* Header */
.poll-create-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-primary);
  flex-shrink: 0;
}
.poll-create-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.poll-create-icon {
  width: 32px;
  height: 32px;
  background: var(--accent);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}
.poll-create-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

/* Scrollable body */
.poll-create-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
}

/* Question */
.poll-question-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-secondary);
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 13px;
  font-size: 14px;
  color: var(--text-primary);
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  min-height: 62px;
}
.poll-question-input:focus {
  border-color: var(--accent);
  background: var(--bg-primary);
}

/* Section label */
.poll-section-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 7px;
}

/* Options section */
.poll-options-section { display: flex; flex-direction: column; }

.poll-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

.poll-option-input-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-secondary);
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  padding: 3px 5px 3px 12px;
  transition: border-color 0.15s, background 0.15s;
}
.poll-option-input-row:focus-within {
  border-color: var(--accent);
  background: var(--bg-primary);
}
.poll-option-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 18px;
  flex-shrink: 0;
}
.poll-option-input {
  flex: 1;
  background: none;
  border: none;
  padding: 7px 5px;
  font-size: 13.5px;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
}
.poll-option-remove-btn {
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.poll-option-remove-btn:hover {
  color: var(--error, #e53e3e);
  background: rgba(229,57,53,0.09);
}

.poll-add-option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 1.5px dashed var(--border-color);
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.poll-add-option-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* Settings grid (2 columns) */
.poll-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.poll-setting-item {
  display: flex;
  flex-direction: column;
}

/* Segmented toggle */
.poll-type-toggle {
  display: flex;
  background: var(--bg-secondary);
  border: 1.5px solid var(--border-color);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}
.poll-type-btn {
  flex: 1;
  border: none;
  background: none;
  color: var(--text-secondary);
  padding: 5px 7px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.poll-type-btn.active {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* Select + datetime inputs */
.poll-select,
.poll-expires-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-secondary);
  border: 1.5px solid var(--border-color);
  border-radius: 9px;
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.poll-select:focus,
.poll-expires-input:focus { border-color: var(--accent); }

/* Error message */
.poll-create-error {
  color: var(--error, #e53e3e);
  font-size: 12px;
  border-radius: 8px;
  padding: 0 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s, padding 0.15s;
  background: rgba(229,57,53,0.08);
}
.poll-create-error:not(:empty) {
  padding: 7px 10px;
  max-height: 60px;
}

/* Footer */
.poll-create-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-primary);
  flex-shrink: 0;
}
.poll-cancel-btn {
  background: var(--bg-secondary);
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: background 0.12s;
}
.poll-cancel-btn:hover { background: var(--bg-tertiary); }
.poll-submit-btn {
  flex: 1;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.12s, transform 0.1s;
}
.poll-submit-btn:hover { filter: brightness(1.08); }
.poll-submit-btn:active { transform: scale(0.98); }
.poll-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }