/* ════════════════════════════════════════════════════════════════════════════
   message-board.css  —  Message Board page specific styles
   ════════════════════════════════════════════════════════════════════════════ */

/* ── View bar ── */
.view-bar{display:flex;align-items:center;gap:0.65rem;margin-bottom:1.1rem;flex-wrap:wrap;}
.view-toggle{display:flex;background:rgba(0,0,0,0.3);border:1px solid var(--border);border-radius:var(--radius-xs);padding:3px;gap:2px;flex-shrink:0;}
.vt-btn{padding:0.32rem 0.85rem;border-radius:5px;font-size:0.76rem;font-weight:600;color:var(--text-muted);border:none;background:transparent;cursor:pointer;font-family:'DM Sans',inherit;transition:all 0.15s;display:flex;align-items:center;gap:0.3rem;}
.vt-btn.active{background:rgba(124,92,252,0.2);color:var(--accent2);}
.vt-btn:not(.active):hover{color:var(--text-dim);background:rgba(255,255,255,0.04);}
.view-bar-spacer{flex:1;}
/* live / presence */
.live-indicator{display:flex;align-items:center;gap:0.35rem;font-size:0.65rem;color:var(--green);font-weight:600;}
.live-indicator::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(52,211,153,0.7);animation:livepulse 1.8s ease infinite;}
@keyframes livepulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.85)}}
.presence-bar{display:flex;align-items:center;gap:0.4rem;}
.presence-label{font-size:0.65rem;color:var(--text-muted);}
.presence-avatars{display:flex;align-items:center;}
.presence-av{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--bg);display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:700;font-family:'DM Mono',monospace;margin-left:-5px;}
.presence-av:first-child{margin-left:0;}
.presence-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 5px rgba(52,211,153,0.6);margin-left:0.3rem;}

/* ════════════════════════════════════════════════════════════════════════════
   CARDS VIEW
   ════════════════════════════════════════════════════════════════════════════ */
.cards-toolbar{display:flex;align-items:center;gap:0.5rem;margin-bottom:1.1rem;flex-wrap:wrap;}
.filter-row{display:flex;gap:0.25rem;background:rgba(0,0,0,0.25);border-radius:6px;padding:2px;}
.filter-btn{padding:0.26rem 0.7rem;border-radius:4px;font-size:0.72rem;font-weight:600;color:var(--text-muted);border:none;background:transparent;cursor:pointer;font-family:'DM Sans',inherit;transition:all 0.12s;}
.filter-btn.active{background:rgba(255,255,255,0.07);color:var(--text-dim);}
.notes-section-hdr{display:flex;align-items:center;gap:0.5rem;font-size:0.6rem;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;margin-bottom:0.75rem;color:rgba(150,150,180,0.55);}
.notes-section-hdr::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(150,150,180,0.12),transparent);}
.notes-masonry{columns:3;column-gap:0.85rem;margin-bottom:1rem;}
@media(max-width:860px){.notes-masonry{columns:2;}}
@media(max-width:500px){.notes-masonry{columns:1;}}

.note-card{break-inside:avoid;margin-bottom:0.85rem;background:rgba(255,255,255,0.035);border:1px solid var(--border);border-radius:12px;padding:0.9rem 1rem;position:relative;overflow:hidden;transition:border-color 0.18s,transform 0.18s,box-shadow 0.18s;cursor:grab;}
.note-card:hover{border-color:var(--border-hi);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,0.4);}
.note-card:active{cursor:grabbing;}
.note-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.07),transparent);}
.note-card.pinned{border-color:rgba(124,92,252,0.22);box-shadow:0 0 0 1px rgba(124,92,252,0.08),inset 0 0 20px rgba(124,92,252,0.03);}
.note-card.dragging{opacity:0.4;transform:scale(0.97);border-color:var(--accent-border);}
.note-card.drag-over{border-color:var(--accent);box-shadow:0 0 0 2px rgba(124,92,252,0.3);}
/* new-note flash animation */
.note-card.new-flash{animation:newflash 0.6s ease;}
@keyframes newflash{0%{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,92,252,0.3)}100%{border-color:var(--border);box-shadow:none}}

.note-strip{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:12px 0 0 12px;}
.note-top{display:flex;align-items:center;gap:0.45rem;margin-bottom:0.5rem;}
.note-avatar{width:20px;height:20px;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.58rem;font-weight:700;font-family:'DM Mono',monospace;}
.note-author{font-size:0.7rem;font-weight:600;color:var(--text-dim);}
.note-pin-icon{margin-left:auto;font-size:0.7rem;color:var(--accent2);opacity:0.7;}
.note-text{font-size:0.85rem;color:var(--text);line-height:1.58;word-break:break-word;}
.note-footer{display:flex;align-items:center;gap:0.45rem;margin-top:0.7rem;flex-wrap:wrap;}
.note-tag{font-size:0.58rem;font-weight:700;letter-spacing:0.7px;text-transform:uppercase;padding:2px 7px;border-radius:20px;border:1px solid;}
.note-ts{font-size:0.6rem;color:var(--text-muted);margin-left:auto;font-family:'DM Mono',monospace;}
.note-actions{display:none;position:absolute;top:0.5rem;right:0.5rem;gap:0.2rem;z-index:5;background:rgba(7,7,15,0.7);border-radius:6px;padding:1px;backdrop-filter:blur(4px);}
.note-card:hover .note-actions{display:flex !important;}
.note-act{width:22px;height:22px;border-radius:5px;background:rgba(255,255,255,0.06);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.65rem;transition:background 0.12s;color:var(--text-dim);}
.note-act:hover{background:rgba(255,255,255,0.12);color:var(--text);}
.note-act.del-act:hover{color:var(--red);background:rgba(248,113,113,0.1);}
.note-act.pin-act:hover{color:var(--accent2);}

/* ════════════════════════════════════════════════════════════════════════════
   WHITEBOARD VIEW
   ════════════════════════════════════════════════════════════════════════════ */
.wb-container{display:flex;flex-direction:column;}
.wb-toolbar{display:flex;align-items:center;gap:0.5rem;padding:0.7rem 0.9rem;background:rgba(0,0,0,0.25);border:1px solid var(--border);border-radius:var(--radius-sm) var(--radius-sm) 0 0;border-bottom:none;flex-wrap:wrap;}
.wb-tool-group{display:flex;align-items:center;gap:0.25rem;}
.wb-tool-sep{width:1px;height:20px;background:var(--border);margin:0 0.2rem;flex-shrink:0;}
.wb-color{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform 0.12s,border-color 0.12s;flex-shrink:0;}
.wb-color:hover{transform:scale(1.15);}
.wb-color.active{border-color:rgba(255,255,255,0.6);transform:scale(1.1);}
.wb-size-btn{width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,0.04);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.12s;color:var(--text-dim);}
.wb-size-btn.active{background:rgba(124,92,252,0.18);border-color:rgba(124,92,252,0.4);color:var(--accent2);}
.wb-size-btn:hover:not(.active){background:rgba(255,255,255,0.07);color:var(--text);}
.wb-size-dot{border-radius:50%;background:currentColor;flex-shrink:0;}
.wb-tool-btn{padding:0.28rem 0.7rem;border-radius:6px;font-size:0.74rem;font-weight:600;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-family:'DM Sans',inherit;transition:all 0.12s;display:flex;align-items:center;gap:0.3rem;}
.wb-tool-btn.active{background:rgba(124,92,252,0.18);border-color:rgba(124,92,252,0.4);color:var(--accent2);}
.wb-tool-btn:hover:not(.active){background:rgba(255,255,255,0.07);color:var(--text);}
.wb-tool-btn.danger:hover{background:rgba(248,113,113,0.1);border-color:rgba(248,113,113,0.3);color:var(--red);}
.wb-save-btn{margin-left:auto;padding:0.3rem 0.85rem;border-radius:6px;font-size:0.74rem;font-weight:600;background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.3);color:var(--green);cursor:pointer;font-family:'DM Sans',inherit;transition:all 0.15s;display:flex;align-items:center;gap:0.3rem;}
.wb-save-btn:hover{background:rgba(52,211,153,0.18);}
.wb-canvas-wrap{background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:0 0 var(--radius-sm) var(--radius-sm);overflow:hidden;position:relative;}
#wb-canvas{display:block;width:100%;touch-action:none;}
#wb-canvas.eraser-mode{cursor:cell;}
.wb-status{position:absolute;bottom:0.5rem;right:0.75rem;font-size:0.62rem;color:var(--text-muted);font-family:'DM Mono',monospace;pointer-events:none;}
.wb-save-status{font-size:0.65rem;color:var(--text-muted);margin-left:0.25rem;}
.wb-empty-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.wb-empty-hint-inner{text-align:center;color:var(--text-muted);font-size:0.82rem;}
.wb-empty-hint-inner .wbh-icon{font-size:2rem;margin-bottom:0.5rem;}

/* ════════════════════════════════════════════════════════════════════════════
   CORK BOARD VIEW
   ════════════════════════════════════════════════════════════════════════════ */
.cork-board{min-height:560px;border-radius:var(--radius-sm);overflow:hidden;position:relative;
  background:
    repeating-linear-gradient(92deg,transparent 0px,transparent 18px,rgba(0,0,0,0.04) 18px,rgba(0,0,0,0.04) 19px,transparent 19px,transparent 38px,rgba(255,255,255,0.02) 38px,rgba(255,255,255,0.02) 39px),
    repeating-linear-gradient(88deg,transparent 0px,transparent 55px,rgba(0,0,0,0.05) 55px,rgba(0,0,0,0.05) 57px),
    linear-gradient(160deg,#7a5c2e 0%,#9a7240 25%,#8a6535 50%,#a07848 75%,#7a5c2e 100%);
  border:3px solid #3a2810;
  box-shadow:inset 0 0 60px rgba(0,0,0,0.35),inset 0 0 12px rgba(0,0,0,0.2);
  user-select:none;}
.cork-board::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:10;box-shadow:inset 0 0 30px rgba(0,0,0,0.4),inset 0 2px 6px rgba(0,0,0,0.3);border-radius:var(--radius-sm);}
.cork-toolbar{position:relative;z-index:20;display:flex;align-items:center;gap:0.5rem;padding:0.6rem 0.9rem;background:rgba(15,10,5,0.72);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,0.06);flex-wrap:wrap;}
.cork-toolbar-title{font-size:0.7rem;font-weight:700;color:rgba(212,168,85,0.7);letter-spacing:1.8px;text-transform:uppercase;}
.cork-add-btn{margin-left:auto;padding:0.3rem 0.85rem;border-radius:6px;font-size:0.74rem;font-weight:700;cursor:pointer;background:rgba(180,130,60,0.18);border:1px solid rgba(180,130,60,0.35);color:#d4a855;font-family:'DM Sans',inherit;transition:all 0.15s;display:flex;align-items:center;gap:0.3rem;}
.cork-add-btn:hover{background:rgba(180,130,60,0.28);border-color:rgba(180,130,60,0.55);}
.cork-color-row{display:flex;align-items:center;gap:0.35rem;}
.cork-color-label{font-size:0.62rem;color:rgba(212,168,85,0.5);letter-spacing:0.8px;}
.cork-cswatch{width:16px;height:16px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform 0.12s,border-color 0.12s;flex-shrink:0;}
.cork-cswatch:hover,.cork-cswatch.active{transform:scale(1.22);border-color:rgba(255,255,255,0.55);}
.cork-drop-zone{position:relative;min-height:500px;overflow:hidden;}
.cork-note{position:absolute;width:178px;min-height:150px;padding:1rem 1rem 1.1rem;border-radius:2px;cursor:grab;box-shadow:3px 5px 18px rgba(0,0,0,0.45),1px 2px 4px rgba(0,0,0,0.25);transition:box-shadow 0.15s;display:flex;flex-direction:column;padding-bottom:48px;margin-bottom:-36px;}
.cork-note:hover{box-shadow:5px 8px 28px rgba(0,0,0,0.6);z-index:50 !important;}
.cork-note:active{cursor:grabbing;}
.cork-note.dragging-note{box-shadow:8px 14px 40px rgba(0,0,0,0.7);transform:scale(1.05) !important;z-index:200 !important;opacity:0.92;}
.cork-note::after{content:'';position:absolute;bottom:0;right:0;width:0;height:0;border-style:solid;border-width:0 0 16px 16px;opacity:0.22;}
.cn-yellow{background:#f5e530;}.cn-yellow::after{border-color:transparent transparent #b8a800 transparent;}
.cn-blue{background:#7ec8f8;}.cn-blue::after{border-color:transparent transparent #3a7ab5 transparent;}
.cn-green{background:#7de88a;}.cn-green::after{border-color:transparent transparent #2a8a45 transparent;}
.cn-pink{background:#f8a0bc;}.cn-pink::after{border-color:transparent transparent #c54070 transparent;}
.cn-orange{background:#ffb84d;}.cn-orange::after{border-color:transparent transparent #c07020 transparent;}
.cn-purple{background:#d4aaff;}.cn-purple::after{border-color:transparent transparent #7040b0 transparent;}
.cork-tape{position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:48px;height:14px;border-radius:2px;background:rgba(255,255,255,0.45);border:1px solid rgba(255,255,255,0.25);pointer-events:none;}
.cork-pin{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;cursor:pointer;z-index:5;box-shadow:0 3px 8px rgba(0,0,0,0.55),inset 0 1px 2px rgba(255,255,255,0.3);transition:transform 0.12s;}
.cork-pin:hover{transform:translateX(-50%) scale(1.15);}
.cork-pin::after{content:'';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:3px;height:8px;background:rgba(0,0,0,0.35);border-radius:0 0 2px 2px;}
.cp-red{background:radial-gradient(circle at 35% 32%,#ff6b6b,#c00);}.cp-gold{background:radial-gradient(circle at 35% 32%,#ffe066,#b8860b);}.cp-silver{background:radial-gradient(circle at 35% 32%,#e8e8e8,#888);}.cp-blue{background:radial-gradient(circle at 35% 32%,#80c8ff,#1a6abf);}.cp-green{background:radial-gradient(circle at 35% 32%,#7de88a,#1a8a2a);}
.cork-note-author{font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:rgba(0,0,0,0.4);margin-bottom:0.4rem;flex-shrink:0;}
.cork-note-text{font-family:'Caveat',cursive;font-size:1.05rem;font-weight:600;color:rgba(0,0,0,0.82);line-height:1.4;flex:1;word-break:break-word;}
.cork-note-footer{display:flex;align-items:center;justify-content:space-between;margin-top:0.5rem;flex-shrink:0;}
.cork-note-ts{font-size:0.58rem;color:rgba(0,0,0,0.35);font-family:'DM Mono',monospace;}
.cork-note-del{width:18px;height:18px;border-radius:4px;background:rgba(0,0,0,0.1);border:none;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:0.6rem;color:rgba(0,0,0,0.5);transition:background 0.12s;font-family:inherit;}
.cork-note:hover .cork-note-del{display:flex;}
.cork-note-del:hover{background:rgba(200,0,0,0.18);color:#900;}
.cork-pinned-ribbon{position:absolute;top:6px;right:-4px;background:#c00;color:#fff;font-size:0.5rem;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px 2px 5px;border-radius:2px 0 0 2px;box-shadow:1px 1px 3px rgba(0,0,0,0.3);}
.cork-rotate-handle{position:absolute;bottom:-38px;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;cursor:grab;background:rgba(0,0,0,0.28);border:2px solid rgba(0,0,0,0.35);display:none;align-items:center;justify-content:center;font-size:1rem;color:rgba(0,0,0,0.7);transition:background 0.12s,transform 0.12s;z-index:10;user-select:none;box-shadow:0 2px 8px rgba(0,0,0,0.3);}
.cork-rotate-handle::before{content:'';position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:2px;height:14px;background:rgba(0,0,0,0.25);border-radius:1px;}
.cork-note:hover .cork-rotate-handle,.cork-rotate-handle:hover{display:flex;}
.cork-rotate-handle:hover{background:rgba(0,0,0,0.42);transform:translateX(-50%) scale(1.12);}
.cork-rotate-handle:active{cursor:grabbing;}

/* cork compose overlay */
.cork-compose-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;}
.cork-compose-overlay.open{display:flex;}
.cork-compose-note{border-radius:2px;padding:1.5rem;width:280px;box-shadow:6px 10px 36px rgba(0,0,0,0.65);display:flex;flex-direction:column;gap:0.65rem;position:relative;}
.cork-compose-note textarea{background:transparent;border:none;outline:none;resize:none;font-family:'Caveat',cursive;font-size:1.1rem;font-weight:600;color:rgba(0,0,0,0.82);min-height:100px;padding:0;line-height:1.45;width:100%;}
.cork-compose-note textarea::placeholder{color:rgba(0,0,0,0.3);}
.cork-compose-color-row{display:flex;gap:0.4rem;align-items:center;}
.cc-swatch{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform 0.12s;}
.cc-swatch:hover,.cc-swatch.active{transform:scale(1.2);border-color:rgba(0,0,0,0.4);}
.cork-compose-actions{display:flex;gap:0.5rem;justify-content:flex-end;}
.cork-compose-cancel{padding:0.38rem 0.9rem;border-radius:6px;font-size:0.78rem;font-weight:600;background:rgba(0,0,0,0.12);border:none;color:rgba(0,0,0,0.6);cursor:pointer;font-family:'DM Sans',inherit;}
.cork-compose-cancel:hover{background:rgba(0,0,0,0.2);}
.cork-compose-post{padding:0.38rem 0.9rem;border-radius:6px;font-size:0.78rem;font-weight:700;background:rgba(0,0,0,0.18);border:none;color:rgba(0,0,0,0.75);cursor:pointer;font-family:'DM Sans',inherit;}
.cork-compose-post:hover{background:rgba(0,0,0,0.28);}

/* compose modal tag opts */
.tag-grid{display:flex;flex-wrap:wrap;gap:0.35rem;}
.tag-opt{padding:0.28rem 0.75rem;border-radius:20px;font-size:0.72rem;font-weight:700;cursor:pointer;border:1px solid;font-family:'DM Sans',inherit;transition:all 0.15s;background:transparent;}
.tag-opt.selected{box-shadow:0 0 0 2px rgba(255,255,255,0.5);opacity:1;transform:scale(1.06);}