* { box-sizing: border-box; }
    body { margin:0; font-family:Arial,sans-serif; background:#f3f4f6; color:#1f2937; font-size:14px; }

    /* ---- Layout ---- */
    .app { display:flex; min-height:100vh; }
    .sidebar { width:280px; background:#fafafa; border-right:1px solid #e5e7eb; padding:18px 14px; display:flex; flex-direction:column; gap:14px; flex-shrink:0; }
    .brand { font-size:24px; font-weight:700; letter-spacing:-0.4px; }
    .brand span { color:#6d28d9; }
    .primary-btn { width:100%; border:none; border-radius:14px; padding:12px 14px; background:#6d28d9; color:white; font-size:14px; cursor:pointer; }
    .nav-group { display:flex; flex-direction:column; gap:4px; }
    .nav-title { font-size:11px; color:#6b7280; text-transform:uppercase; margin:8px 8px 2px; letter-spacing:.04em; }
    .nav-item { border:none; background:transparent; text-align:left; padding:10px 12px; border-radius:10px; font-size:14px; cursor:pointer; color:#374151; }
    .nav-item:hover { background:#f1f5f9; }
    .nav-item.active { background:#ede9fe; color:#4c1d95; font-weight:600; }
    .nav-item.disabled { opacity:.55; cursor:default; }
    .premium-pill { font-size:10px; color:#a16207; background:#fef3c7; border-radius:999px; padding:2px 6px; margin-left:6px; }
    .sidebar-footer { margin-top:auto; padding:12px; border-radius:12px; background:#f8fafc; border:1px solid #e5e7eb; font-size:12px; color:#4b5563; line-height:1.45; }
    .main { flex:1; padding:18px; display:flex; flex-direction:column; gap:14px; min-width:0; }

    /* ---- Top bar ---- */
    .top-banner { background:#fff; border:1px solid #e5e7eb; border-radius:18px; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
    .top-banner-title { font-size:16px; font-weight:700; margin-bottom:3px; }
    .top-banner-sub { color:#6b7280; font-size:13px; }
    .top-banner-actions { display:flex; gap:10px; flex-wrap:wrap; }
    .btn-dark, .btn-light, .btn { border:none; border-radius:12px; padding:11px 16px; font-size:14px; cursor:pointer; }
    .btn-dark { background:#6d28d9; color:#fff; }
    .btn-light { background:#f3f4f6; color:#111827; }
    .btn { background:#f3f4f6; color:#111827; }
    .btn-sm { padding:7px 12px; font-size:12px; border-radius:8px; border:1px solid #cbd5e1; background:white; color:#0f172a; cursor:pointer; }
    .btn-sm:hover { background:#f1f5f9; }
    .btn-danger { background:#f5f3ff; color:#6d28d9; border:1px solid #ddd6fe; }
    .btn-danger:hover { background:#ede9fe; }

    .topbar { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; position:relative; }
    .search { flex:1; min-width:220px; max-width:700px; background:white; border:1px solid #e5e7eb; border-radius:16px; padding:12px 16px; font-size:14px; }
    .account-wrap { display:flex; align-items:center; gap:10px; background:white; border:1px solid #e5e7eb; border-radius:999px; padding:7px 10px 7px 12px; cursor:pointer; position:relative; }
    .account-meta { font-size:13px; line-height:1.2; }
    .account-email { color:#6b7280; font-size:11px; }
    .avatar { width:34px; height:34px; border-radius:50%; background:#6d28d9; color:white; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; font-size:13px; }


    /* ── EMOJI PICKER ── */
    .emoji-btn { border:none; background:transparent; font-size:18px; cursor:pointer; padding:4px 6px; border-radius:8px; transition:transform .15s; }
    .emoji-btn:hover { transform:scale(1.2); background:#f3f4f6; }
    .emoji-panel { display:none; position:absolute; top:32px; right:0; left:auto; background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:12px; box-shadow:0 8px 32px rgba(0,0,0,.12); z-index:1000; width:320px; }
    .emoji-panel.open { display:block; }
    .emoji-categories { display:flex; gap:4px; margin-bottom:8px; overflow-x:auto; padding-bottom:4px; }
    .emoji-cat-btn { border:none; background:none; font-size:16px; cursor:pointer; padding:4px 6px; border-radius:8px; opacity:.6; transition:all .15s; flex-shrink:0; }
    .emoji-cat-btn.active, .emoji-cat-btn:hover { opacity:1; background:#f3f4f6; }
    .emoji-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; max-height:200px; overflow-y:auto; }
    .emoji-item { border:none; background:none; font-size:20px; cursor:pointer; padding:4px; border-radius:8px; transition:transform .1s; text-align:center; }
    .emoji-item:hover { transform:scale(1.3); background:#f3f4f6; }
    .emoji-search { width:100%; border:1px solid #e5e7eb; border-radius:8px; padding:6px 10px; font-size:13px; margin-bottom:8px; }

    /* ── REACTION EMOJI RAIN ── */
    @keyframes emojiFloat {
      0%   { transform:translateY(0) rotate(0deg) scale(1); opacity:1; }
      50%  { transform:translateY(-45vh) rotate(var(--rot)) scale(1.2); opacity:.9; }
      100% { transform:translateY(-90vh) rotate(calc(var(--rot)*2)) scale(.8); opacity:0; }
    }
    .emoji-rain-particle { position:fixed; pointer-events:none; font-size:2rem; z-index:99999; animation:emojiFloat var(--dur) ease-out forwards; }
    
    /* ── REACTION PICKER nel viewer ── */
    .reaction-pick-btn { border:2px solid #e5e7eb; background:#fff; border-radius:999px; padding:6px 10px; font-size:20px; cursor:pointer; transition:all .15s; }
    .reaction-pick-btn:hover { border-color:#6d28d9; transform:scale(1.15); }
    .reaction-pick-btn.selected { border-color:#6d28d9; background:#ede9fe; transform:scale(1.15); }
    .reaction-bar { display:flex; gap:8px; padding:12px 16px; border-top:1px solid #f1f5f9; flex-wrap:wrap; align-items:center; }
    .reaction-emoji-btn { border:none; background:#f3f4f6; border-radius:999px; padding:6px 12px; font-size:18px; cursor:pointer; transition:all .15s; }
    .reaction-emoji-btn:hover { background:#ede9fe; transform:scale(1.15); }

    /* ---- Panel ---- */
    .panel { background:white; border:1px solid #e5e7eb; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; flex:1; min-height:0; max-height:calc(100vh - 140px); }
    .panel-header { padding:16px 18px; border-bottom:1px solid #edf2f7; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
    .panel-title { font-size:22px; font-weight:700; }
    .panel-subtitle { font-size:13px; color:#6b7280; margin-top:4px; }
    .guest-badge { font-size:11px; padding:4px 8px; border-radius:999px; background:#ede9fe; color:#5b21b6; }
    .view { display:none; }
    .view.active { display:block; }
    .content-wrap { padding:18px; overflow-y:auto; max-height:calc(100vh - 200px); }
    .helper { font-size:12px; color:#6b7280; }
    .empty-state { padding:24px 18px; color:#6b7280; font-size:13px; }

    /* ---- Badges ---- */
    .badge { font-size:10px; padding:3px 8px; border-radius:999px; white-space:nowrap; display:inline-block; background:#f3f4f6; color:#374151; }
    .badge.viewed { background:#ecfdf5; color:#047857; }
    .badge.expired { background:#ede9fe; color:#6d28d9; }
    .badge.revoked { background:#ede9fe; color:#6d28d9; }
    .badge.deleted { background:#ede9fe; color:#6d28d9; }
    .badge.pending { background:#eff6ff; color:#1d4ed8; }
    .badge.protected { background:#ede9fe; color:#5b21b6; }
    .mini-badge { font-size:10px; padding:3px 8px; border-radius:999px; background:#ecfdf5; color:#047857; }

    /* ---- Workspace ---- */
    .workspace { display:grid; grid-template-columns:var(--list-w,300px) minmax(360px,1fr) var(--detail-w,320px); min-height:660px; position:relative; }
    .workspace.no-detail { grid-template-columns:var(--list-w,320px) 1fr; }
    .list-pane, .message-pane, .detail-pane { min-width:0; height:100%; overflow-y:auto; }
    .list-pane { border-right:1px solid #edf2f7; background:#fff; overflow-y:auto; position:sticky; top:0; max-height:calc(100vh - 240px); }
    .message-pane { border-right:1px solid #edf2f7; background:#fcfcfd; overflow-y:auto; position:sticky; top:0; max-height:calc(100vh - 240px); }
    .detail-pane { background:#fff; padding:16px; overflow-y:auto; position:sticky; top:0; max-height:calc(100vh - 240px); }

    /* ---- Resize handle for list pane ---- */
    .resize-handle { position:absolute; top:0; right:-3px; width:6px; height:100%; cursor:col-resize; background:transparent; z-index:10; }
    .resize-handle:hover, .resize-handle.dragging { background:#6d28d9; opacity:.3; }
    .detail-resize-handle { position:absolute; top:0; left:-3px; width:6px; height:100%; cursor:col-resize; background:transparent; z-index:10; }
    .detail-resize-handle:hover, .detail-resize-handle.dragging { background:#6d28d9; opacity:.3; }

    /* ---- Account dropdown menu ---- */
    .account-menu { position:absolute; top:calc(100% + 8px); right:0; background:white; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.08); padding:8px; min-width:200px; z-index:500; }
    .account-menu-item { padding:10px 12px; border-radius:8px; cursor:pointer; font-size:13px; }
    .account-menu-item:hover { background:#f1f5f9; }

    /* ---- Spinner ---- */
    .spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.3); border-top-color:white; border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; margin-right:6px; }
    @keyframes spin { to { transform:rotate(360deg); } }

    /* ---- Sidebar logout ---- */
    .sidebar-logout { width:100%; border:1px solid #ddd6fe; background:white; color:#6d28d9; border-radius:10px; padding:10px; font-size:13px; cursor:pointer; margin-top:10px; }
    .sidebar-logout:hover { background:#f5f3ff; }
    .list-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid #f1f5f9; background:#fff; position:sticky; top:0; }
    .list-title { font-size:15px; font-weight:700; }

    /* ---- Mail rows ---- */
    .mail-row { display:grid; grid-template-columns:36px 1fr; gap:12px; padding:12px 16px; border-bottom:1px solid #f1f5f9; align-items:start; cursor:pointer; }
    .mail-row.unread { background:#fff; }
    .mail-row.unread .sender { font-weight:800; color:#111; }
    .mail-row.unread .subject-text { font-weight:700; color:#1a1a2e; }
    .mail-row.unread .preview-text { color:#4b5563; }
    .unread-dot { width:8px;height:8px;background:#6d28d9;border-radius:50%;display:inline-block;margin-right:4px;flex-shrink:0; }
    .mail-row:hover { background:#fafafa; }
    .mail-row.active { background:#f5f3ff; }
    .mini-avatar { width:36px; height:36px; border-radius:50%; background:#e5e7eb; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }
    .msg-avatar { width:38px; height:38px; border-radius:50%; background:#e5e7eb; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; }
    .sender { font-weight:700; font-size:13px; margin-bottom:2px; }
    .subject-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:2px; }
    .subject-text { font-size:13px; }
    .preview-text { font-size:12px; color:#6b7280; line-height:1.35; margin-bottom:6px; }
    .mini-actions { display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
    .mini-actions .btn-sm { padding:5px 9px; font-size:11px; }

    /* ---- Message pane ---- */
    .msg-header { padding:18px 20px; border-bottom:1px solid #edf2f7; background:#fff; }
    .msg-subject { font-size:18px; font-weight:700; margin-bottom:10px; }
    .msg-meta-wrap { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    .msg-meta { color:#6b7280; font-size:12px; line-height:1.5; }
    .msg-tag { font-size:10px; padding:4px 8px; border-radius:999px; background:#ede9fe; color:#5b21b6; margin-left:auto; }
    .message-body-wrap { padding:20px; }
    .message-body { white-space:pre-wrap; line-height:1.7; color:#0f172a; font-size:14px; background:#fff; border:1px solid #edf2f7; border-radius:16px; padding:18px; }
    .message-body-html { line-height:1.7; color:#0f172a; font-size:14px; background:#fff; border:1px solid #edf2f7; border-radius:16px; padding:18px; }
    .revoked-notice { margin:12px 20px; padding:10px 16px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; color:#9ca3af; font-size:12px; }

    /* ---- Attachments in viewer ---- */
    .attachments-section { padding:0 20px 20px; }
    .attachments-title { font-size:13px; color:#6b7280; margin-bottom:10px; font-weight:600; }
    .attachment-grid { display:flex; flex-direction:column; gap:10px; }
    .attachment-card { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #edf2f7; border-radius:12px; padding:12px 14px; }
    .attachment-icon { width:38px; height:38px; border-radius:8px; background:#f3f4f6; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
    .attachment-info { flex:1; min-width:0; }
    .attachment-name { font-size:13px; font-weight:600; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .attachment-meta { font-size:11px; color:#6b7280; margin-top:2px; }
    .attachment-preview-img { width:100%; max-height:200px; object-fit:cover; border-radius:8px; margin-top:8px; }

    /* ---- Detail pane ---- */
    .detail-card { border:1px solid #edf2f7; border-radius:16px; padding:16px; margin-bottom:16px; background:#fff; }
    .detail-title { font-size:13px; color:#6b7280; margin-bottom:12px; font-weight:600; }
    .detail-row { display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:13px; }
    .status-opened { color:#047857; }
    .status-pending { color:#1d4ed8; }
    .status-revoked { color:#5b21b6; }
    .status-expired { color:#5b21b6; }

    /* ---- Sender actions in detail pane ---- */
    .sender-actions-grid { display:flex; flex-direction:column; gap:8px; }

    /* ---- Reply box ---- */
    .reply-box textarea { width:100%; min-height:100px; border:1px solid #d1d5db; border-radius:12px; padding:12px; font-size:14px; resize:vertical; font-family:Arial,sans-serif; margin-bottom:10px; }
    .reply-btn { width:100%; border:none; border-radius:12px; padding:12px 14px; font-size:14px; background:#6d28d9; color:#fff; cursor:pointer; }
    .detail-note { font-size:12px; color:#6b7280; line-height:1.45; margin-top:10px; }
    .cta-box button { width:100%; border:none; border-radius:12px; padding:12px 14px; font-size:14px; cursor:pointer; margin-top:10px; background:#f3f4f6; color:#111827; }

    /* ---- Compose ---- */
    .compose-shell { max-width:1400px; background:#fff; border:1px solid #edf2f7; border-radius:18px; overflow:hidden; }
    .compose-top { padding:16px 18px; border-bottom:1px solid #f1f5f9; font-weight:700; background:#fcfcfd; font-size:15px; display:flex; align-items:center; gap:12px; }
    .compose-back-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; border:none; background:#f1f5f9; color:#0f172a; cursor:pointer; transition:background .15s; padding:0; }
    .compose-back-btn:hover { background:#e2e8f0; }
    .compose-back-btn svg { display:block; }

    /* ---- Attachment previews (extended) ---- */
    .attachment-preview-pdf { width:100%; height:300px; border:1px solid #e5e7eb; border-radius:8px; margin-top:8px; background:#f8fafc; }
    .attachment-preview-text { width:100%; max-height:200px; overflow:auto; border:1px solid #e5e7eb; border-radius:8px; padding:12px; margin-top:8px; background:#f8fafc; font-family:ui-monospace,monospace; font-size:12px; white-space:pre-wrap; color:#334155; }
    .attachment-preview-video { width:100%; max-height:300px; border-radius:8px; margin-top:8px; background:#000; }
    .attachment-preview-audio { width:100%; margin-top:8px; }
    .attachment-preview-generic { display:flex; align-items:center; gap:14px; padding:16px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px; margin-top:8px; }
    .attachment-preview-generic-icon { font-size:36px; }
    .attachment-preview-generic-info { flex:1; }
    .attachment-preview-generic-name { font-weight:600; color:#0f172a; font-size:13px; }
    .attachment-preview-generic-hint { font-size:12px; color:#6b7280; margin-top:2px; }
    .compose-body { padding:18px; display:grid; gap:14px; }
    .field-row { display:grid; grid-template-columns:80px 1fr; gap:10px; align-items:start; }
    .field-label { font-size:13px; color:#6b7280; padding-top:10px; }
    .input { width:100%; border:1px solid #d1d5db; border-radius:12px; padding:12px 13px; font-size:14px; background:white; }
    .compose-divider { height:1px; background:#f1f5f9; margin:2px 0; }

    /* Quill editor container */
    .quill-wrap { border:1px solid #d1d5db; border-radius:12px; overflow:hidden; }
    .quill-wrap .ql-toolbar { border:none; border-bottom:1px solid #e5e7eb; background:#fafafa; }
    .quill-wrap .ql-container { border:none; font-size:14px; min-height:160px; }

    /* Multi-file upload area */
    .file-drop-area { border:2px dashed #d1d5db; border-radius:12px; padding:16px; text-align:center; color:#6b7280; font-size:13px; cursor:pointer; transition:border-color .2s; }
    .file-drop-area:hover, .file-drop-area.drag-over { border-color:#6d28d9; color:#6d28d9; }
    .file-list { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
    .file-item { display:flex; align-items:center; gap:10px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px; padding:8px 12px; }
    .file-item-name { flex:1; font-size:13px; color:#0f172a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .file-item-size { font-size:11px; color:#6b7280; flex-shrink:0; }
    .file-item-remove { background:none; border:none; color:#5b21b6; cursor:pointer; font-size:16px; flex-shrink:0; }

    .options-box { border:1px solid #e5e7eb; border-radius:16px; padding:16px; background:#fafafa; }
    .options-title { font-weight:700; margin-bottom:10px; font-size:14px; }
    .option-grid { display:grid; grid-template-columns:repeat(2,minmax(200px,1fr)); gap:8px 18px; }
    .option-row { display:flex; align-items:center; gap:10px; font-size:13px; }
    .actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    .note-box { margin-top:16px; border:1px dashed #d1d5db; border-radius:14px; padding:14px; color:#4b5563; font-size:13px; background:#fcfcfc; }

    /* ---- Upgrade tooltip ---- */
    .upgrade-tooltip {
      position:fixed; bottom:24px; right:24px; z-index:9999;
      background:#6d28d9; color:white; border-radius:16px;
      padding:16px 20px; max-width:320px;
      box-shadow:0 8px 32px rgba(109,40,217,.35);
      animation:slideUp .3s ease;
    }
    @keyframes slideUp { from { transform:translateY(20px); opacity:0; } to { transform:translateY(0); opacity:1; } }
    .upgrade-tooltip-title { font-weight:700; font-size:15px; margin-bottom:6px; }
    .upgrade-tooltip-sub { font-size:13px; opacity:.85; margin-bottom:14px; line-height:1.4; }
    .upgrade-tooltip-actions { display:flex; gap:8px; }
    .upgrade-tooltip-btn { border:none; border-radius:10px; padding:9px 16px; font-size:13px; cursor:pointer; font-weight:600; }
    .upgrade-tooltip-btn.primary { background:white; color:#6d28d9; }
    .upgrade-tooltip-btn.secondary { background:rgba(255,255,255,.2); color:white; }

    /* ---- Plans modal ---- */
    .plans-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; }
    .plans-modal { background:white; border-radius:24px; padding:32px; max-width:1100px; width:100%; max-height:90vh; overflow-y:auto; }
    .plans-modal-title { font-size:24px; font-weight:800; margin-bottom:6px; }
    .plans-modal-sub { color:#6b7280; font-size:14px; margin-bottom:24px; }
    .plans-modal-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
    .plans-modal-card { border:2px solid #e5e7eb; border-radius:14px; padding:14px; }
    .plans-modal-card.featured { border-color:#6d28d9; background:#faf5ff; }
    .plans-modal-card-name { font-size:18px; font-weight:800; margin-bottom:4px; }
    .plans-modal-card-price { font-size:28px; font-weight:800; color:#6d28d9; margin-bottom:4px; }
    .plans-modal-card-features { list-style:none; padding:0; margin:12px 0 16px; }
    .plans-modal-card-features li { font-size:13px; color:#374151; padding:4px 0; display:flex; align-items:center; gap:8px; }
    .plans-modal-card-features li::before { content:"✓"; color:#6d28d9; font-weight:700; }
    .plans-modal-card-btn { width:100%; border:none; border-radius:12px; padding:12px; font-size:14px; font-weight:700; cursor:pointer; background:#6d28d9; color:white; }
    .plans-modal-card.featured .plans-modal-card-btn { background:#6d28d9; }

    /* ---- Login modal ---- */
    .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:1000; }
    .modal-box { background:white; border-radius:20px; padding:32px; max-width:440px; width:90%; text-align:center; }
    .modal-title { font-size:22px; font-weight:700; margin-bottom:8px; }
    .modal-sub { color:#6b7280; font-size:14px; margin-bottom:24px; }
    .modal-input { width:100%; border:1px solid #d1d5db; border-radius:12px; padding:13px 15px; font-size:15px; margin-bottom:12px; }
    .modal-btn { width:100%; border:none; border-radius:12px; padding:14px; background:#6d28d9; color:white; font-size:15px; font-weight:700; cursor:pointer; }
    .modal-btn:hover { background:#5b21b6; }
    .modal-link { margin-top:14px; font-size:13px; color:#6b7280; }
    .modal-link a { color:#6d28d9; cursor:pointer; }
    .otp-grid { display:flex; gap:6px; justify-content:center; margin-bottom:16px; }
    .otp-input { width:clamp(36px,12vw,52px); height:clamp(44px,14vw,60px); border:2px solid #e5e7eb; border-radius:12px; text-align:center; font-size:clamp(20px,6vw,28px); font-weight:700; color:#0b1736; }
    .otp-input:focus { border-color:#6d28d9; outline:none; }

    /* ---- Providers / onboarding ---- */
    .providers { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-top:20px; }
    .provider-card { border:1px solid #e5e7eb; border-radius:16px; padding:18px; background:#fff; cursor:pointer; }
    .provider-card:hover { background:#fafafa; }
    .provider-name { font-weight:700; margin-bottom:6px; }
    .provider-note,.muted { color:#6b7280; font-size:13px; line-height:1.45; }
    .secure-card { max-width:760px; background:#6d28d9; color:white; border-radius:20px; padding:28px; }
    .secure-inner { margin-top:18px; padding:18px; border-radius:16px; background:rgba(255,255,255,.06); line-height:1.6; font-size:13px; }

    .hidden { display:none !important; }

    /* ---- Blocked senders ---- */
    .block-row { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border:1px solid #e5e7eb; border-radius:12px; background:white; margin-bottom:8px; gap:10px; }
    .block-row-info { flex:1; min-width:0; }
    .block-row-value { font-weight:600; color:#0f172a; font-size:14px; word-break:break-all; }
    .block-row-meta { font-size:11px; color:#6b7280; margin-top:2px; }
    .block-type-badge { font-size:10px; padding:2px 7px; border-radius:999px; background:#ede9fe; color:#6d28d9; font-weight:600; margin-right:6px; }
    .block-type-badge.domain { background:#fff7ed; color:#9a3412; }
    .blocked-empty { text-align:center; padding:40px 20px; color:#6b7280; font-size:13px; }
    .blocked-empty-icon { font-size:48px; margin-bottom:12px; opacity:.3; }
    .blocked-counter { display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px; background:#ede9fe; color:#6d28d9; margin-left:6px; font-weight:700; }

    /* ---- Block confirm modal ---- */
    .block-modal-content { max-width:480px; }
    .block-radio-group { display:flex; flex-direction:column; gap:10px; margin:18px 0; text-align:left; }
    .block-radio-option { display:flex; align-items:flex-start; gap:10px; padding:12px; border:1.5px solid #e5e7eb; border-radius:12px; cursor:pointer; transition:border-color .15s; }
    .block-radio-option:hover { border-color:#cbd5e1; }
    .block-radio-option.selected { border-color:#6d28d9; background:#faf5ff; }
    .block-radio-option input { margin-top:3px; }
    .block-radio-label { font-size:13px; }
    .block-radio-label strong { display:block; margin-bottom:2px; color:#0f172a; }
    .block-radio-label span { color:#6b7280; font-size:12px; }
    .block-modal-actions { display:flex; gap:10px; margin-top:16px; }
    .block-modal-actions button { flex:1; }

    @media(max-width:1180px) { .workspace { grid-template-columns:260px 1fr; } .detail-pane { display:none; } }
    @media(max-width:768px) {

      /* ── Layout base ── */
      .app { flex-direction:column; height:100dvh; overflow:hidden; }
      .main { padding:0 !important; gap:0 !important; display:flex; flex-direction:column; flex:1; overflow:hidden; margin-top:52px; }
      .panel { border-radius:0 !important; border-left:none !important; border-right:none !important; border-bottom:none !important; max-height:none !important; flex:1; overflow:hidden; }
      .panel-header { padding:12px 16px; flex-wrap:nowrap; }
      .panel-title { font-size:18px; }

      /* ── Topbar mobile ── */
      .mobile-topbar { display:flex !important; }

      /* ── Sidebar a scomparsa ── */
      .sidebar {
        position:fixed; top:0; left:-280px; width:280px; height:100dvh;
        z-index:1000; transition:left .25s cubic-bezier(.4,0,.2,1);
        box-shadow:none; border-right:1px solid #e5e7eb; overflow-y:auto;
      }
      .sidebar.open { left:0; box-shadow:4px 0 24px rgba(0,0,0,.15); }
      .sidebar-overlay { display:block !important; }
      .sidebar-overlay.visible { opacity:1; pointer-events:all; }

      /* ── Workspace & panes ── */
      .workspace { display:block !important; height:100%; overflow:hidden; }
      .list-pane { width:100%; height:100%; overflow-y:auto; border-right:none; }
      .detail-pane { display:none !important; }

      /* ── Message pane — full screen slide ── */
      .message-pane {
        position:fixed; top:52px; left:0; right:0; bottom:0;
        background:#fff; z-index:100;
        transform:translateX(100%);
        transition:transform .25s cubic-bezier(.4,0,.2,1);
        overflow:hidden;
        max-height:none !important;
        display:flex !important; flex-direction:column;
      }
      .message-pane.mobile-open { transform:translateX(0); }

      /* ── Hide desktop toolbar (bottom bar handles actions) ── */
      .msg-toolbar { display:none !important; }
      #mobileActionsBtn { display:none !important; }

      /* ── Mobile bottom action bar ── */
      .message-body-wrap { flex:1 !important; overflow-y:auto !important; min-height:0 !important; -webkit-overflow-scrolling:touch; }
      .mobile-msg-bar {
        display:flex !important; flex-shrink:0;
        position:static;
        background:#fff; border-top:1px solid #e5e7eb;
        padding:6px 4px; padding-bottom:max(48px, env(safe-area-inset-bottom, 48px));
        gap:2px; box-shadow:0 -2px 12px rgba(0,0,0,.06);
      }
      /* mobile-msg-bar-btn 6-up */
      .mobile-msg-bar-btn {
        flex:1; display:flex; flex-direction:column; align-items:center;
        gap:2px; padding:5px 1px; border:none; background:none;
        color:#6d28d9; font-size:9px; font-weight:600; cursor:pointer;
        border-radius:10px; font-family:inherit; transition:background .1s;
        min-width:0;
      }
      .mobile-msg-bar-btn:active { background:#f5f3ff; }
      .mobile-msg-bar-btn svg { width:22px !important; height:22px !important; }
      .mobile-msg-bar-btn--danger { color:#6d28d9 !important; }

      /* ── Archive mobile — single column ── */
      #view-archive > div { flex-direction:column !important; }
      #view-archive > div > div:first-child { width:100% !important; min-width:0 !important; border-right:none !important; border-bottom:1px solid #e5e7eb; max-height:50dvh; }
      #view-archive > div > #archivePreview { display:none !important; }
      #view-archive > div > #archivePreview.mobile-preview-open {
        display:flex !important; position:fixed; inset:0; top:52px;
        z-index:150; background:#fff; overflow-y:auto; flex-direction:column;
      }

      /* ── Mobile actions bottom sheet ── */
      .mobile-actions-sheet {
        position:fixed; bottom:0; left:0; right:0; z-index:9001;
        background:#fff; border-radius:20px 20px 0 0;
        box-shadow:0 -4px 40px rgba(0,0,0,.15);
        transform:translateY(100%);
        transition:transform .28s cubic-bezier(.4,0,.2,1);
        padding:0 0 32px;
        max-height:85dvh; overflow-y:auto;
      }
      .mobile-actions-sheet.open { transform:translateY(0); }
      .mobile-actions-overlay {
        display:none; position:fixed; inset:0; z-index:9000;
        background:rgba(0,0,0,.35); backdrop-filter:blur(2px);
      }
      .mobile-actions-overlay.visible { display:block; }
      .mobile-sheet-handle {
        display:block; width:36px; height:4px; background:#e5e7eb;
        border-radius:2px; margin:12px auto 8px;
      }
      .mobile-sheet-item {
        display:flex; align-items:center; gap:14px;
        padding:14px 24px; font-size:15px; font-weight:500; color:#1f2937;
        cursor:pointer; border:none; background:none; width:100%;
        text-align:left; font-family:inherit;
      }
      .mobile-sheet-item:active { background:#f5f3ff; }
      .mobile-sheet-item.danger { color:#6d28d9; }
      .mobile-sheet-sep { height:1px; background:#f0f0f0; margin:4px 0; }


      /* Fix scroll mobile per views non-messaggi */
      /* content-wrap mobile fix — libera lo scroll compose */
      .content-wrap { max-height:none !important; overflow-y:visible !important; display:block !important; padding:16px !important; }
      #view-compose, #view-contacts, #view-groups,
      #view-blocked, #view-trash, #view-onboarding, #view-secure {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        height: 100%;
      }
      #view-compose .compose-shell,
      #view-contacts > *, #view-groups > * { overflow-y: visible !important; }
      /* ── Forms & compose ── */
      .field-row { grid-template-columns:1fr; gap:6px; }
      .option-grid { grid-template-columns:1fr; }
      .compose-pane { padding:16px; }
      .compose-shell { border-radius:12px; }

    }

    /* Elementi solo mobile - nascosti su desktop */
    .mobile-topbar { display:none; position:fixed; top:0; left:0; right:0; height:52px; background:#fff; border-bottom:1px solid #e5e7eb; z-index:500; align-items:center; padding:0 16px; gap:12px; }
    .mobile-hamburger { border:none; background:none; cursor:pointer; padding:8px; border-radius:8px; color:#374151; }
    .mobile-hamburger:hover { background:#f3f4f6; }
    .mobile-logo-text { font-weight:800; font-size:18px; color:#1e1b4b; flex:1; }
    .mobile-back-btn { display:none; align-items:center; gap:6px; border:none; background:none; cursor:pointer; color:#6d28d9; font-weight:600; font-size:15px; padding:8px 4px; }
    .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:999; opacity:0; pointer-events:none; transition:opacity .25s; }
  
    /* Mobile action bar — hidden on desktop */
    .mobile-msg-bar { display:none; }
    .msg-toolbar { display:flex; align-items:center; gap:4px; padding:8px 16px; border-bottom:1px solid #f0f0f0; background:#fafafa; }
    .toolbar-btn { border:none; background:transparent; border-radius:8px; padding:6px 8px; cursor:pointer; color:#374151; display:flex; align-items:center; justify-content:center; transition:background .15s; }
    .toolbar-btn:hover { background:#f0f0f5; color:#111; }
    .toolbar-btn-danger:hover { background:#ede9fe; color:#6d28d9; }
    .toolbar-btn.active { color:#f97316; }
    .toolbar-sep { width:1px; height:20px; background:#e5e7eb; margin:0 4px; }


/* ─── Ad Slots ─────────────────────────────────────────── */
.ad-slot {
  display: block;
  width: 100%;
  min-width: 228px;
  box-sizing: border-box;
}
.ad-slot .ad-banner-card {
  display: block;
  width: 100% !important;
  min-height: 250px;
}

/* ============ YouMel Adblock Modal ============ */
#ymAdblockModal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ymFadeIn 0.2s ease-out;
}
.ym-adblock-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 5, 30, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.ym-adblock-dialog {
  position: relative;
  background: linear-gradient(135deg, #1a0a3a 0%, #2d1060 50%, #1a0a3a 100%);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 16px;
  padding: 32px 28px 24px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(109, 40, 217, 0.4);
  animation: ymSlideUp 0.3s ease-out;
}
.ym-adblock-icon { font-size: 48px; margin-bottom: 12px; line-height: 1; }
.ym-adblock-title { color: #fff; font-size: 22px; font-weight: 800; margin: 0 0 12px; line-height: 1.3; }
.ym-adblock-text { color: rgba(255,255,255,0.92); font-size: 15px; line-height: 1.5; margin: 0 0 12px; }
.ym-adblock-text strong { color: #a78bfa; font-weight: 700; }
.ym-adblock-subtext { color: rgba(255,255,255,0.7); font-size: 13px; line-height: 1.5; margin: 0 0 24px; }
.ym-adblock-actions { display: flex; gap: 10px; margin-bottom: 16px; }
.ym-adblock-btn {
  flex: 1; display: inline-block; padding: 12px 16px;
  border-radius: 10px; font-size: 14px; font-weight: 700;
  text-decoration: none; text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer; border: none; font-family: inherit;
}
.ym-adblock-btn-primary {
  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  color: #fff; box-shadow: 0 4px 14px rgba(109,40,217,0.4);
}
.ym-adblock-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(109,40,217,0.5); }
.ym-adblock-btn-secondary {
  background: rgba(255,255,255,0.1); color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}
.ym-adblock-btn-secondary:hover { background: rgba(255,255,255,0.15); transform: translateY(-1px); }
.ym-adblock-close {
  background: transparent; color: rgba(255,255,255,0.55);
  font-size: 12px; border: none; cursor: pointer;
  padding: 6px 12px; font-family: inherit;
  transition: color 0.15s ease;
}
.ym-adblock-close:hover { color: rgba(255,255,255,0.85); }
body.youmel-adblock-active [data-adblock-gate]::after {
  content: '🛡️'; font-size: 11px; margin-left: 6px; opacity: 0.7;
}
body.youmel-adblock-active [data-adblock-gate] { position: relative; }
@keyframes ymFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ymSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 480px) {
  .ym-adblock-dialog { padding: 24px 20px 18px; }
  .ym-adblock-actions { flex-direction: column; }
  .ym-adblock-title { font-size: 19px; }
}

/* ─── YouMel Sponsored Slot (first-party, anti-adblock) ─── */
.ym-sponsored {
  display:block; width:100%; border-radius:12px; overflow:hidden;
  text-decoration:none; cursor:pointer; position:relative;
  font-family:inherit; border:none; padding:0; background:none;
}
.ym-sponsored-inner {
  padding:12px 14px 10px;
  background:linear-gradient(135deg,#1a0a3a,#2d1060,#1a0a3a);
  border-radius:12px;
  border:1px solid rgba(167,139,250,0.25);
  transition:border-color 0.2s;
}
.ym-sponsored:hover .ym-sponsored-inner { border-color:rgba(167,139,250,0.55); }
.ym-sponsored-label {
  font-size:9px; font-weight:700; letter-spacing:0.08em;
  color:rgba(255,255,255,0.4); text-transform:uppercase; margin-bottom:6px;
}
.ym-sponsored-title {
  font-size:12px; font-weight:700; color:#fff; line-height:1.3; margin-bottom:3px;
}
.ym-sponsored-sub {
  font-size:11px; color:rgba(255,255,255,0.7); line-height:1.4; margin-bottom:8px;
}
.ym-sponsored-cta {
  display:inline-block; font-size:11px; font-weight:700;
  color:#a78bfa; border:1px solid rgba(167,139,250,0.4);
  border-radius:6px; padding:3px 10px;
}

/* ─── Banner grande nel detail-pane ─────────────────────── */
#adSlot-inbox .ym-sponsored-inner {
  padding: 24px 20px 20px;
  border-radius: 14px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#adSlot-inbox .ym-sponsored-label {
  font-size: 10px; margin-bottom: 10px;
}
#adSlot-inbox .ym-sponsored-title {
  font-size: 17px; font-weight: 800; margin-bottom: 6px; line-height: 1.25;
}
#adSlot-inbox .ym-sponsored-sub {
  font-size: 13px; margin-bottom: 16px; line-height: 1.5;
}
#adSlot-inbox .ym-sponsored-cta {
  font-size: 13px; padding: 6px 16px; align-self: flex-start;
}

/* ─── Banner grande detail-pane override ─── */
#adSlot-inbox { margin-top: 0 !important; }
#adSlot-inbox .ym-sponsored-inner {
  min-height: 400px !important;
  padding: 28px 22px 24px !important;
}
#adSlot-inbox .ym-sponsored-title {
  font-size: 20px !important;
  margin-bottom: 10px !important;
}
#adSlot-inbox .ym-sponsored-sub {
  font-size: 14px !important;
  margin-bottom: 20px !important;
}
#adSlot-inbox .ym-sponsored-cta {
  font-size: 14px !important;
  padding: 8px 20px !important;
}

/* Banner ad — animazione sottile CTA */
@keyframes ym-pulse {
  0%,100%{transform:scale(1);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
  50%{transform:scale(1.04);box-shadow:0 4px 16px rgba(0,0,0,0.5)}
}
.ym-sponsored-inner .ym-ad-cta {
  animation: ym-pulse 3s ease-in-out infinite;
}

.msg-revoked { opacity: 0.45; filter: grayscale(0.6); }
.msg-revoked .sender { color: #9ca3af !important; }
.msg-revoked .subject-line { color: #9ca3af !important; }

/* Desktop App download button */
.youmel-download-btn{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;background:#ffffff;border:1px solid #ece8f7;border-radius:16px;text-decoration:none;transition:all .25s ease;box-shadow:0 1px 4px rgba(124,58,237,0.03);cursor:pointer;font-family:inherit}
.youmel-download-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(124,58,237,0.08);border-color:#d9ccff}
.youmel-download-btn img{width:30px;height:30px;border-radius:8px;display:block}
.youmel-download-btn span{font-size:14px;font-weight:600;color:#6d28d9;letter-spacing:-0.2px}

/* ── Activity Timeline ─────────────────────────── */
.timeline-card { padding-bottom: 8px; }
.timeline { position:relative; display:flex; flex-direction:column; gap:18px; margin-top:14px; }
.timeline-event { position:relative; display:flex; gap:12px; }
.timeline-event:not(:last-child)::before {
  content:""; position:absolute; left:6px; top:20px;
  width:1px; height:calc(100% + 8px); background:#e5e7eb;
}
.timeline-dot {
  width:14px; height:14px; border-radius:50%;
  margin-top:3px; flex-shrink:0;
}
.tl-green  { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.15); }
.tl-blue   { background:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.tl-violet { background:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.15); }
.tl-yellow { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.15); }
.tl-red    { background:#6d28d9; box-shadow:0 0 0 3px rgba(239,68,68,.15); }
.tl-pending .timeline-dot { opacity: 0.3; box-shadow:none; }
.tl-pending .timeline-label,
.tl-pending .timeline-time { color:#9ca3af; }
.tl-hidden { display:none; }
.timeline-content { flex:1; }
.timeline-label { font-size:12px; font-weight:600; color:#374151; margin-bottom:2px; }
.timeline-time, .timeline-files { font-size:11px; color:#6b7280; line-height:1.5; }
.timeline-reaction { font-size:20px; margin-top:2px; }

/* Timeline card scrollable */
.timeline-card {
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e5e7eb transparent;
}
.timeline-card::-webkit-scrollbar { width: 4px; }
.timeline-card::-webkit-scrollbar-track { background: transparent; }
.timeline-card::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }

/* Timeline active event animation */
.timeline-event.tl-active { animation: tlFadeIn .4s ease; }
@keyframes tlFadeIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

    /* Mobile actions bottom sheet */
    .mobile-actions-sheet {
      position:fixed; bottom:0; left:0; right:0; z-index:9001;
      background:#fff; border-radius:20px 20px 0 0;
      box-shadow:0 -4px 40px rgba(0,0,0,.15);
      transform:translateY(100%);
      transition:transform .28s cubic-bezier(.4,0,.2,1);
      padding:0 0 32px;
      max-height:85dvh; overflow-y:auto;
    }
    .mobile-actions-sheet.open { transform:translateY(0); }
    .mobile-actions-overlay {
      display:none; position:fixed; inset:0; z-index:9000;
      background:rgba(0,0,0,.35); backdrop-filter:blur(2px);
    }
    .mobile-actions-overlay.visible { display:block; }
    .mobile-sheet-handle {
      width:36px; height:4px; background:#e5e7eb; border-radius:2px;
      margin:12px auto 8px; display:block;
    }
    .mobile-sheet-item {
      display:flex; align-items:center; gap:14px;
      padding:14px 24px; font-size:15px; font-weight:500; color:#1f2937;
      cursor:pointer; border:none; background:none; width:100%;
      text-align:left; font-family:inherit;
      transition:background .1s;
    }
    .mobile-sheet-item:active { background:#f5f3ff; }
    .mobile-sheet-item.danger { color:#6d28d9; }
    .mobile-sheet-sep { height:1px; background:#f0f0f0; margin:4px 0; }

    @media(max-width:768px) {
      /* Plans modal mobile */
      .plans-modal { padding:20px 16px; border-radius:16px; max-width:100%; }
      .plans-modal-grid { grid-template-columns:1fr !important; gap:16px !important; }
      .plans-modal-card { width:100% !important; min-width:unset !important; }
      .plans-modal > div[style*="display:flex"],
      .plans-modal > div[style*="grid"] { 
        display:flex !important; flex-direction:column !important; gap:12px !important;
      }
      .plan-card, [class*="plan-card"],
      .plans-modal > div > div[style*="border-radius"] {
        width:100% !important; min-width:0 !important; max-width:100% !important;
      }
      /* Chiudi button Plans */
      .plans-modal button[onclick*="close"],
      .plans-modal button[onclick*="hide"] {
        position:sticky; top:0; z-index:10;
      }
    }

    /* Archive preview back button */
    #archivePreview.mobile-preview-open #_ymArchBackBtn { display:flex !important; }

/* ── i18n RTL support ── */
.rtl .sidebar { border-right: none; border-left: 1px solid #e5e7eb; }
.rtl .nav-item { flex-direction: row-reverse; text-align: right; }
.rtl .nav-item svg { margin-right: 0; margin-left: 6px; }
.rtl .nav-title { text-align: right; }
.rtl .account-wrap { flex-direction: row-reverse; }
.rtl .ym-tip-bubble { left: auto; right: 50%; transform: translateX(50%); }

/* Logo — mai invertire in RTL */
.rtl #navLogo { transform: none !important; direction: ltr; }
.rtl canvas#navLogo { transform: none !important; }

/* Topbar RTL */
.rtl .topbar { flex-direction: row-reverse; }
.rtl .search { text-align: right; }

/* Panel header RTL */
.rtl .panel-header { flex-direction: row-reverse; }
.rtl .panel-title { text-align: right; }
.rtl .panel-subtitle { text-align: right; }

/* Sidebar footer RTL */
.rtl .sidebar-footer { text-align: right; }
.rtl #langSelector select { direction: rtl; }

/* Message list RTL */
.rtl .list-pane { direction: rtl; }
.rtl .mail-row { text-align: right; }
.rtl .msg-meta-wrap { flex-direction: row-reverse; }
.rtl .msg-subject { text-align: right; }

/* Compose RTL */
.rtl .compose-body { direction: rtl; }
.rtl .field-row { flex-direction: row-reverse; }
.rtl .field-label { text-align: right; }
.rtl .actions { flex-direction: row-reverse; }

/* Detail pane RTL — limita larghezza */
.rtl .detail-pane { direction: rtl; }

/* Account menu RTL */
.rtl .account-menu { right: auto; left: 0; }
.rtl .account-meta { text-align: right; }

/* Mobile topbar RTL */
.rtl .mobile-topbar { flex-direction: row-reverse; }
.rtl .mobile-back-btn { flex-direction: row-reverse; }

/* Workspace RTL */
.rtl .workspace { flex-direction: row-reverse; }
.rtl .message-pane { direction: rtl; }

/* Toolbar RTL */
.rtl .msg-toolbar { flex-direction: row-reverse; }
.rtl .detail-card { text-align: right; }
.rtl .sender-actions-grid { direction: rtl; }

/* Ad slot — larghezza fissa in RTL */
.rtl .ad-slot { max-width: 200px; }
.rtl .detail-pane .ad-slot { width: 200px !important; }

/* ── Sidebar compatta — meno scroll ── */
.nav-group { margin-bottom: 2px !important; }
.nav-title {
  font-size: 10px !important;
  padding: 6px 12px 2px !important;
  letter-spacing: 0.05em;
}
.nav-item {
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  gap: 6px !important;
}
.nav-item svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}
.sidebar-footer {
  font-size: 11px !important;
  padding: 8px 12px !important;
  line-height: 1.5 !important;
}
.sidebar-logout {
  font-size: 12px !important;
  padding: 6px 12px !important;
}
#langSelector {
  padding: 4px 12px !important;
}
#langSelector select {
  font-size: 11px !important;
  padding: 3px 6px !important;
}
canvas#navLogo {
  margin: 4px auto 8px !important;
  display: block !important;
}
.primary-btn {
  padding: 9px 14px !important;
  font-size: 13px !important;
  margin: 0 10px 8px !important;
}

/* ── Piani modal — non invertire in RTL ── */
.rtl .plans-modal,
.rtl .plans-grid,
.rtl [class*="plan-card"],
.rtl [id*="plansModal"] {
  direction: ltr !important;
}
.rtl [id*="plansModal"] p,
.rtl [id*="plansModal"] h2,
.rtl [id*="plansModal"] span,
.rtl [id*="plansModal"] div {
  text-align: center;
}

/* ── Ad column: larghezza compatta e identica in LTR + RTL ── */
.workspace .detail-pane { width: 100% !important; max-width: none !important; box-sizing: border-box; }
.detail-pane .ad-slot { width: 200px !important; max-width: 200px !important; min-width: 0 !important; overflow: hidden; box-sizing: border-box; margin: 20px auto 0 !important; }
.ad-slot a, .ad-slot img, .ad-slot video, .ad-slot iframe { max-width: 100% !important; box-sizing: border-box; }

/* ── Mobile bottom navigation (Fase 1 restyling) ── */
.mobile-bottom-nav { display:none; }
.mbn-fab { display:none; }
@media(max-width:768px) {
  .mobile-bottom-nav {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:600;
    height:60px; background:#fff; border-top:1px solid #e5e7eb;
    align-items:center; justify-content:space-around;
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .mbn-item {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    background:none; border:none; cursor:pointer; color:#9ca3af; font-size:10px;
    padding:6px 0; font-family:inherit;
  }
  .mbn-item.active { color:#6d28d9; }
  .mbn-item span { font-size:10px; }
  .mbn-fab {
    display:flex !important;
    position:fixed; right:16px; bottom:74px; z-index:601;
    width:52px; height:52px; border-radius:50%;
    background:#6d28d9; color:#fff; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(109,40,217,.45);
  }
  /* spazio in fondo per non coprire i contenuti/lista */
  .main { margin-bottom:60px !important; }
  .message-pane { bottom:60px !important; }
  .sidebar { padding-bottom:70px; }
}

/* default: nascosti ovunque (mostrati solo su mobile in stato tools-open) */
#mobileToolsTitle, #mobileToolsClose { display:none !important; }

/* ── Mobile: pannello strumenti (Clean) a tutto schermo ── */
@media(max-width:768px) {
  body.mobile-tools-open .detail-pane {
    display:block !important; position:fixed !important;
    top:52px; left:0; right:0; bottom:60px; z-index:550;
    background:#f8fafc; overflow-y:auto; padding:14px 14px 30px;
    width:auto !important;
  }
  #mobileToolsClose { display:none; }
  body.mobile-tools-open #mobileToolsClose {
    display:flex !important; position:fixed; top:60px; right:14px; z-index:560;
    width:34px; height:34px; border-radius:50%; background:#6d28d9; color:#fff;
    border:none; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
  }
  body.mobile-tools-open #mobileToolsTitle {
    display:block !important; position:fixed; top:60px; left:14px; z-index:560;
    font-size:15px; font-weight:700; color:#1f1147; line-height:34px;
  }
}

/* ── Mobile polish (15 giu) ── */
@media(max-width:768px) {
  /* Header compatto: meno spazio sopra la ricerca, "Open app" solo icona */
  .topbar { padding:6px 10px !important; gap:8px !important; flex-wrap:nowrap !important; }
  .topbar .search { height:34px; flex:1; min-width:0; }
  #pwaHeaderBtn { margin-right:6px !important; padding:0 8px !important; height:34px !important; }
  #pwaHeaderBtn span { display:none !important; }
  /* Storage bar più piatta e discreta */
  #sidebarStorage { padding:7px 12px !important; margin:0 8px 4px !important; background:transparent !important; border:none !important; border-top:1px solid #ede9fe !important; border-radius:0 !important; }
  /* Pannello Clean & tools: il contenuto parte sotto la barra titolo (no overlap) */
  body.mobile-tools-open .detail-pane { padding-top:54px !important; }
}

/* ── Colonna ad onboarding (non usa .detail-pane per non sparire <1180px) ── */
.onboarding-ad-col { width:260px; flex-shrink:0; }
@media(max-width:900px) { .content-wrap { flex-direction:column; } .onboarding-ad-col { width:100% !important; } }

/* ── Viewer messaggio aperto su mobile: nascondi bottom nav, mostra barra azioni ── */
@media(max-width:768px) {
  body.mobile-viewer-open .mobile-bottom-nav,
  body.mobile-viewer-open .mbn-fab { display:none !important; }
  body.mobile-viewer-open .message-pane.mobile-open { bottom:0 !important; }
}

/* ── Sidebar: voci scrollano internamente, footer ancorato (no vuoto in basso) ── */
.sidebar { height:100dvh; overflow:hidden; }
.sidebar-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.sidebar-scroll::-webkit-scrollbar { width:6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background:#e5e7eb; border-radius:3px; }
@media(max-width:768px) {
  .sidebar { height:100dvh; overflow:hidden; }
  .sidebar-scroll { -webkit-overflow-scrolling:touch; }
}

/* === RTL (Arabic/Hebrew) === */
body.rtl, html[dir="rtl"] body { direction: rtl; }
body.rtl .plans-modal, html[dir="rtl"] .plans-modal { direction: rtl; text-align: right; }
body.rtl .plans-modal-card, html[dir="rtl"] .plans-modal-card { text-align: right; }
body.rtl .plans-modal-grid ul, html[dir="rtl"] .plans-modal-grid ul { padding: 0; }
body.rtl .plans-modal-grid li, html[dir="rtl"] .plans-modal-grid li { flex-direction: row-reverse; text-align: right; }
body.rtl .plans-modal-title, body.rtl .plans-modal-sub { text-align: right; }

/* === Plans modal avatar (region-matched) === */
.plans-avatar-wrap { position:absolute; bottom:150px; left:calc(50% - 550px); transform:translateX(-70%); width:300px; text-align:center; z-index:10001; pointer-events:none; }
.plans-avatar { width:100%; height:auto; max-height:64vh; object-fit:contain; display:block; }
.plans-avatar-btn { position:relative; margin-top:10px; display:inline-block; white-space:nowrap; pointer-events:auto; background:#6d28d9; color:#fff; text-decoration:none; font-size:13px; font-weight:700; padding:11px 20px; border-radius:999px; box-shadow:0 6px 18px rgba(109,40,217,.45); cursor:pointer; }
.plans-avatar-btn:hover { background:#5b21b6; }
body.rtl .plans-avatar-wrap, html[dir="rtl"] .plans-avatar-wrap { left:calc(50% - 550px); right:auto; transform:translateX(-70%); }
@media (max-width:1200px){ .plans-avatar-wrap{ display:none; } }

/* Fix mobile: il toggle billing non deve diventare full-width come le card */
@media(max-width:768px){
  #modalBillingToggle { width:44px !important; max-width:44px !important; min-width:44px !important; flex:0 0 auto !important; }
  #modalBillingKnob { width:20px !important; max-width:20px !important; }
}

/* Mobile account card (sopra la search) */
#mobileAccountCard{ display:none; align-items:center; gap:12px; margin:0 0 12px; padding:12px 14px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.04); }
@media(max-width:768px){ #mobileAccountCard.show{ display:flex; } }