/* ============================================================================
   Messages, Skin B. Linked from pages/messages.html only.
   The inbox is re-laid out by js/pages/messages-b.js (#msb, inside the
   classic sidebar); the chat keeps its classic renderer and is restyled
   here. Every rule is scoped to Skin B so classic view is untouched.
   ========================================================================= */

/* ------------------------------------------------------------------ inbox */
html[data-skin="b"] .msg-shell{border-top:0;}
html[data-skin="b"] .msg-sidebar{background:var(--sk-bg,var(--c-black));}
/* The classic inbox chrome stays in the DOM (the classic code renders into
   #conv-list and messages-b.js watches it), just out of sight. */
html[data-skin="b"] .msg-sidebar-header,
html[data-skin="b"] .msg-search-row,
html[data-skin="b"] .msg-filter-tabs,
html[data-skin="b"] #conv-list{display:none!important;}

html[data-skin="b"] .msb{flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px calc(env(safe-area-inset-bottom) + 96px);}
html[data-skin="b"] .msb .b-title{margin:0 2px 14px;}
html[data-skin="b"] .msb .b-title h1{font-size:28px;}
html[data-skin="b"] .msb-compose{background:var(--sk-yellow-fill,var(--c-yellow));border-color:transparent;color:var(--sk-on-yellow,#111214);}
html[data-skin="b"] .msb .b-search input{-webkit-appearance:none;appearance:none;}
html[data-skin="b"] .msb .b-chips{margin-bottom:12px;}

/* unread: the yellow block, compact */
html[data-skin="b"] .msb-now{padding:16px 16px 16px 18px;}
html[data-skin="b"] .msb-now .b-k{margin-bottom:10px;}
html[data-skin="b"] .msb-now-row{display:flex;align-items:center;gap:12px;}
html[data-skin="b"] .msb-now-row .b-main{flex:1;min-width:0;}
html[data-skin="b"] .msb-now-nm{font-family:var(--font-display);font-size:19px;font-weight:900;text-transform:uppercase;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html[data-skin="b"] .msb-now-pv{font-size:13px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
html[data-skin="b"] .msb-pill{padding-right:16px;min-height:44px;font-size:13px;flex-shrink:0;}
html[data-skin="b"] .msb-pill i{width:32px;height:32px;}
html[data-skin="b"] .msb-now .b-thumb{background-color:rgba(0,0,0,.12);}

/* thread rows */
html[data-skin="b"] .msb .b-row{gap:12px;padding:13px 16px;}
html[data-skin="b"] .msb .b-av{width:46px;height:46px;font-size:15px;}
html[data-skin="b"] .msb .b-thumb{width:46px;height:46px;}
html[data-skin="b"] .msb-sub{display:flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:12.5px;}
html[data-skin="b"] .msb-unread .b-nm{font-weight:800;}
html[data-skin="b"] .msb-unread .msb-sub{color:var(--c-text-secondary);}
html[data-skin="b"] .msb-tag{flex-shrink:0;max-width:52%;overflow:hidden;text-overflow:ellipsis;padding:1px 8px;border-radius:999px;background:var(--c-surface-3);color:var(--c-text-secondary);font-family:var(--font-mono);font-size:10px;letter-spacing:.4px;}
html[data-skin="b"] .msb-tag--ch{background:var(--sk-yellow-fill,var(--c-yellow));color:var(--sk-on-yellow,#111214);}
html[data-skin="b"] .msb-side{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex-shrink:0;min-width:34px;}
html[data-skin="b"] .msb-time{font-family:var(--font-mono);font-size:10.5px;color:var(--c-text-muted);}
html[data-skin="b"] .msb-unread .msb-time{color:var(--c-text-primary);}
html[data-skin="b"] .msb-n{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--sk-yellow-fill,var(--c-yellow));color:var(--sk-on-yellow,#111214);font:700 10.5px var(--font-mono);display:flex;align-items:center;justify-content:center;}
/* a group: two overlapping faces in the space of one */
html[data-skin="b"] .msb-who{width:46px;height:46px;position:relative;flex-shrink:0;}
html[data-skin="b"] .msb .msb-who .b-av{position:absolute;width:32px;height:32px;font-size:11px;margin:0;border:2px solid var(--c-surface-2);}
html[data-skin="b"] .msb .msb-who .b-av:first-child{top:0;left:0;}
html[data-skin="b"] .msb .msb-who .b-av:nth-child(2){right:0;bottom:0;}
html[data-skin="b"] .msb-gic{color:var(--c-text-secondary);}
html[data-skin="b"] .msb-gic svg{width:20px;height:20px;}

/* desktop: the empty pane beside the inbox */
html[data-skin="b"] .msg-thread,
html[data-skin="b"] .empty-thread{background:var(--sk-bg,var(--c-black));}
html[data-skin="b"] .empty-thread-icon{width:72px;height:72px;border-radius:50%;background:var(--c-surface-2);border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;opacity:1;color:var(--c-text-secondary);}
html[data-skin="b"] .empty-thread-title{font-weight:900;letter-spacing:.3px;}
@media (min-width:769px){
  html[data-skin="b"] .msg-sidebar{border-right:1px solid var(--c-border);}
}

/* ------------------------------------------------------------------- chat */
html[data-skin="b"] .thread-header{background:var(--sk-bg,var(--c-black));border-bottom:1px solid var(--c-border);padding:10px 12px;gap:10px;}
html[data-skin="b"] .thread-header .avatar--md{width:42px;height:42px;border-radius:50%;cursor:pointer;}
html[data-skin="b"] .thread-header-name{font-family:var(--font-display);font-size:19px;font-weight:900;text-transform:uppercase;letter-spacing:.3px;line-height:1.05;}
html[data-skin="b"] .thread-header-meta{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.4px;margin-top:2px;}
html[data-skin="b"] .thread-header-actions{gap:8px;}
html[data-skin="b"] .msg-back-btn,
html[data-skin="b"] .thread-icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--c-border)!important;background:var(--c-surface-2);color:var(--c-text-primary);}
html[data-skin="b"] .msg-back-btn svg,
html[data-skin="b"] .thread-icon-btn svg{width:19px;height:19px;}
html[data-skin="b"] .thread-icon-btn--accent{background:var(--sk-yellow-fill,var(--c-yellow));border-color:transparent!important;color:var(--sk-on-yellow,#111214);}
html[data-skin="b"] body.msg-thread-open .msg-back-btn{background:var(--c-surface-2);}
html[data-skin="b"] .thread-menu{border-radius:20px;background:var(--c-surface-2);border-color:var(--c-border);padding:8px;}
html[data-skin="b"] .thread-menu button,
html[data-skin="b"] .thread-menu a{border-radius:14px;min-height:44px;}

/* the listing a marketplace thread is about, as a card under the header */
html[data-skin="b"] .thread-header + a[href*="marketplace"]{margin:10px 12px 0;border:1px solid var(--c-border)!important;border-radius:22px;padding:10px 14px!important;background:var(--c-surface-2)!important;}
html[data-skin="b"] .thread-header + a[href*="marketplace"] > div:first-child{border-radius:14px!important;}

html[data-skin="b"] .thread-messages{background:var(--sk-bg,var(--c-black));padding:16px 14px 12px;}
html[data-skin="b"] .msg-bub{border-radius:20px;font-size:14.5px;line-height:1.5;padding:10px 15px;}
html[data-skin="b"] .msg-row--them .msg-bub{background:var(--c-surface-2);border:1px solid var(--c-border);color:var(--c-text-primary);border-bottom-left-radius:8px;}
html[data-skin="b"] .msg-row--them.msg-row--last .msg-bub{border-bottom-left-radius:6px;}
html[data-skin="b"] .msg-row--me .msg-bub{background:var(--sk-yellow-fill,var(--c-yellow));color:var(--sk-on-yellow,#111214);border-bottom-right-radius:8px;}
html[data-skin="b"] .msg-row--me.msg-row--last .msg-bub{border-bottom-right-radius:6px;}
html[data-skin="b"] .msg-bub--img{padding:4px;}
html[data-skin="b"] .msg-bub--img img{border-radius:16px;}
html[data-skin="b"] .msg-bub--story{max-width:290px;}
html[data-skin="b"] .msg-story-quote{border-radius:14px;}
html[data-skin="b"] .msg-sender{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.4px;margin-left:14px;}
html[data-skin="b"] .msg-time,
html[data-skin="b"] .msg-seen{font-family:var(--font-mono);font-size:10px;letter-spacing:.3px;}
html[data-skin="b"] .date-sep span{font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:999px;padding:4px 12px;color:var(--c-text-muted);}
html[data-skin="b"] .date-sep::before,
html[data-skin="b"] .date-sep::after{display:none;}
html[data-skin="b"] .typing-indicator{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:20px;border-bottom-left-radius:6px;}

/* first message of a conversation */
html[data-skin="b"] .thread-start .avatar--md{border-radius:50%;}
html[data-skin="b"] .thread-start-title{font-family:var(--font-display);font-size:24px;font-weight:900;text-transform:uppercase;letter-spacing:.3px;}
html[data-skin="b"] .thread-start-sub{font-size:13.5px;}

/* quick replies and openers */
html[data-skin="b"] .msg-quick-row{background:var(--sk-bg,var(--c-black));border-top:1px solid var(--c-border);padding:10px 12px 0;}
html[data-skin="b"] .quick-btn{border-radius:999px;min-height:38px;padding:8px 15px;background:var(--c-surface-2);border:1px solid var(--c-border);color:var(--c-text-secondary);font-weight:600;}
html[data-skin="b"] .quick-btn:active{background:var(--sk-yellow-fill,var(--c-yellow));border-color:transparent;color:var(--sk-on-yellow,#111214);}

/* composer: a pill field with a round yellow send button */
html[data-skin="b"] .thread-input-bar{background:var(--sk-bg,var(--c-black));border-top:1px solid var(--c-border);padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom,10px));gap:8px;align-items:flex-end;}
html[data-skin="b"] .msg-quick-row + .thread-input-bar{border-top:0;}
html[data-skin="b"] .msg-tool-btn{width:44px;height:44px;border-radius:50%;background:var(--c-surface-2);border:1px solid var(--c-border);color:var(--c-text-secondary);}
html[data-skin="b"] .msg-tool-btn svg{width:20px;height:20px;}
html[data-skin="b"] .msg-textarea{border-radius:24px;min-height:44px;padding:11px 18px;background:var(--c-surface-2);border:1px solid var(--c-border);font-size:15px;line-height:1.4;}
html[data-skin="b"] .msg-textarea:focus{border-color:var(--c-yellow);}
html[data-skin="b"] .msg-send-btn{width:44px;height:44px;border-radius:50%;background:var(--sk-yellow-fill,var(--c-yellow));color:var(--sk-on-yellow,#111214);box-shadow:none;}
html[data-skin="b"] .msg-send-btn:hover{transform:none;box-shadow:none;}
html[data-skin="b"] #emoji-picker{border-radius:22px!important;background:var(--c-surface-2)!important;border-color:var(--c-border)!important;}

/* swipe rows (js/messages-archive.js): the row covers its actions */
html[data-skin="b"] .msb .msw-row{background:var(--c-surface-2);}
html[data-skin="b"] .msb .msw{border-bottom-color:var(--c-border);}