/* Inbox — list on the left, conversation on the right. Shared by the brand and creator portals.
   Everything uses design-system tokens, so each portal keeps its own accent. */
.ib { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - 140px); min-height: 480px; background: var(--surface-raised, #fffcf8); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }

/* ── list ── */
.ib-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.ib-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 8px; }
.ib-list-head h2 { margin: 0; font: 600 var(--text-title-sm, 20px)/1.3 var(--font-heading); color: var(--fg); }
.ib-search { position: relative; padding: 4px 16px 8px; }
.ib-search svg { position: absolute; left: 28px; top: 50%; transform: translateY(-60%); width: 15px; height: 15px; color: var(--fg-subtle); pointer-events: none; }
.ib-search input { width: 100%; height: 34px; padding: 0 12px 0 34px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--fg); font: 400 var(--text-body-sm)/1 var(--font-body); }
.ib-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.ib-chips { display: flex; gap: 6px; padding: 0 16px 10px; flex-wrap: wrap; }
.ib-chip { border: 0; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--surface-2); color: var(--fg); font: 500 var(--text-small)/1 var(--font-body); cursor: pointer; }
.ib-chip:hover { background: var(--neutral-bg, var(--surface-2)); }
.ib-chip.on { background: var(--accent-soft); color: var(--accent); }
.ib-chip .n { margin-left: 4px; opacity: .7; }
.ib-rows { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--border-subtle); }
.ib-row { display: flex; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--border-subtle); background: none; text-align: left; cursor: pointer; color: inherit; text-decoration: none; }
.ib-row:hover { background: var(--surface-2); }
.ib-row.on { background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.ib-av { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--surface-dark, #1f1f1f); color: var(--fg-subtle); display: flex; align-items: center; justify-content: center; position: relative; }
.ib-av.is-org { border-radius: 10px; }
.ib-av img { width: 100%; height: 100%; object-fit: cover; }
.ib-av svg { width: 18px; height: 18px; }
.ib-main { flex: 1; min-width: 0; }
.ib-top { display: flex; align-items: center; gap: 6px; }
.ib-name { flex: 1; min-width: 0; font: 600 var(--text-body-sm)/1.3 var(--font-body); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.ib-row.unread .ib-name { font-weight: 700; }
.ib-time { flex: none; font-size: var(--text-caption); font-weight: 500; color: var(--fg-subtle); }
.ib-snip { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.ib-snip-t { flex: 1; min-width: 0; font-size: var(--text-small); font-weight: 500; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-row.unread .ib-snip-t { color: var(--fg); font-weight: 500; }
.ib-dot { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font: 600 11px/18px var(--font-body); text-align: center; }
.ib-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-top: 6px; border-radius: 999px; font: 600 11px/1 var(--font-body); background: var(--surface-2); color: var(--fg-muted); }
.ib-badge.pending { background: var(--warning-bg); color: var(--warning); }
.ib-badge.accepted { background: var(--success-bg); color: var(--success); }
.ib-badge.declined, .ib-badge.cancelled { background: var(--neutral-bg, var(--surface-2)); color: var(--fg-muted); }
.ib-badge.completed { background: var(--info-bg); color: var(--info); }
.ib-sub .ib-badge { margin-top: 0; }.ib-sect { padding: 12px 16px 6px; font: 600 var(--text-caption)/1 var(--font-body); color: var(--fg-subtle); }
.ib-foot { display: flex; justify-content: center; padding: 8px; border-top: 1px solid var(--border-subtle); }
.ib-link { border: 0; background: none; color: var(--fg-muted); font: 500 var(--text-small)/1 var(--font-body); cursor: pointer; }
.ib-link:hover { color: var(--accent); }
.ib-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 24px; text-align: center; color: var(--fg-muted); font-size: var(--text-body-sm); }
.ib-empty b { color: var(--fg); font-size: var(--text-body); }

/* ── conversation ── */
.ib-conv { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ib-none { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 24px; color: var(--fg-muted); font-size: var(--text-body-sm); }
.ib-none svg { width: 28px; height: 28px; color: var(--fg-subtle); }
.ib-none b { color: var(--fg); font-size: var(--text-body); }
.ib-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ib-back { display: none; border: 0; background: none; padding: 4px; color: var(--fg); cursor: pointer; }
.ib-head .ib-name { font-size: var(--text-body); }
.ib-sub { font-size: var(--text-small); color: var(--fg-muted); margin-top: 2px; display: flex; align-items: center; gap: 8px; }
.ib-menu-wrap { margin-left: auto; position: relative; }
.ib-kebab { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--fg-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ib-kebab:hover { background: var(--surface-2); color: var(--fg); }
.ib-menu { position: absolute; right: 0; top: 36px; z-index: 30; min-width: 190px; padding: 4px; background: var(--surface-raised, #fff); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md); }
.ib-menu[hidden] { display: none; }
.ib-menu button, .ib-menu a { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--fg); font: 500 var(--text-body-sm)/1.2 var(--font-body); text-align: left; text-decoration: none; cursor: pointer; }
.ib-menu button:hover, .ib-menu a:hover { background: var(--surface-2); }
.ib-menu svg { width: 15px; height: 15px; color: var(--fg-muted); }

.ib-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.ib-day { align-self: center; margin: 6px 0; font-size: var(--text-caption); color: var(--fg-subtle); }
.ib-msg { display: flex; flex-direction: column; max-width: min(520px, 78%); }
.ib-msg.me { align-self: flex-end; align-items: flex-end; }
.ib-msg.them { align-self: flex-start; }
.ib-bubble { padding: 9px 13px; border-radius: 14px; font-size: var(--text-body-sm); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.ib-msg.them .ib-bubble { background: var(--surface-2); color: var(--fg); border-bottom-left-radius: 4px; }
/* Own bubbles use the deep orange. Studio's dark theme lightens --accent-dark (for hovers and links), so Studio and Creator pin the deep orange directly; Brand keeps its accent-dark (mulberry). */
body.studio-portal, body.creator-portal { --bubble-me: var(--orange-600, #D14900); }
.ib-msg.me .ib-bubble { background: var(--bubble-me, var(--accent-dark)); color: #fff; border-bottom-right-radius: 4px; }
/* The time sits inside the bubble, bottom right: on the text's last line when it fits, else wrapped under it. */
.ib-bt { float: right; margin: 7px 0 -4px 10px; font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; user-select: none; }
.ib-msg.me .ib-bt { color: rgba(255,255,255,.78); }
.ib-gone .ib-bt, .ib-gone .ib-bn { color: var(--fg-subtle); font-style: normal; opacity: 1; }
.ib-msg:has(.ib-reacts) .ib-bubble { padding-bottom: 14px; }
.ib-msg.them .ib-bt { color: var(--fg-muted); opacity: 1; }
/* The sender's name sits on the bubble, top right. */
.ib-bn { display: block; margin: 0 0 3px; text-align: right; font-size: 11px; font-weight: 600; line-height: 1.2; opacity: .8; user-select: none; }
.ib-bt .ib-ticks { vertical-align: -1px; margin-left: 4px; color: inherit; }
.ib-bt .ib-ticks.is-two { color: #0CC675; }
.ib-msg.me .ib-bt .ib-ticks.is-two { color: #37B9FF; }
.ib-when { margin-top: 3px; font-size: var(--text-caption); font-weight: 500; color: var(--fg-subtle); }
.ib-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-top: 4px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-raised, #fff); color: var(--fg); font: 500 var(--text-small)/1.2 var(--font-body); text-decoration: none; }
.ib-file:hover { border-color: var(--border-strong); }
.ib-file svg { width: 15px; height: 15px; color: var(--fg-muted); flex: none; }
.ib-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-sys { align-self: center; max-width: 80%; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); color: var(--fg-muted); font-size: var(--text-small); text-align: center; }

/* the request card (first message of a conversation) */
.ib-req { align-self: center; width: 100%; max-width: 420px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: #FFFAF5; }
.ib-req-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font: 600 var(--text-body-sm)/1.3 var(--font-body); color: var(--fg); }
.ib-req-head .ib-badge { margin-top: 0; }
.ib-req-text { font-size: var(--text-body-sm); line-height: 1.55; color: var(--fg); white-space: pre-wrap; word-break: break-word; }
.ib-req-meta { margin-top: 8px; font-size: var(--text-small); color: var(--fg-muted); }
.ib-req-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* composer */
.ib-comp { padding: 10px 14px 12px; }
.ib-comp-row { display: flex; align-items: flex-end; gap: 8px; }
.ib-comp textarea { flex: 1; min-height: 38px; max-height: 140px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised, #fff); color: var(--fg); font: 400 var(--text-body-sm)/1.45 var(--font-body); resize: none; }
.ib-comp textarea:focus { outline: none; border-color: var(--fg); }
.ib-attach, .ib-send { flex: none; width: 38px; height: 38px; border: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ib-attach { background: var(--surface-2); color: var(--fg-muted); }
.ib-attach:hover { color: var(--fg); }
.ib-send { background: var(--accent); color: #fff; }
.ib-send:disabled { opacity: .45; cursor: default; }
/* The send button sits inside the input box, bottom right. */
.ib-field { position: relative; flex: 1; min-width: 0; display: flex; }
.ib-field textarea { padding-right: 50px; }
.ib-field .ib-send { position: absolute; right: 4px; bottom: 4px; width: 30px; height: 30px; border-radius: 9px; }
.ib-field .ib-send svg { width: 15px; height: 15px; }
.ib-send svg path { fill: currentColor; stroke-width: 1.6; }
/* Voice typing: the mic sits where the send button does (no background) until there is something to send. */
.ib-field .ib-mic { position: absolute; right: 4px; bottom: 4px; width: 30px; height: 30px; border: 0; padding: 0; background: none; color: var(--fg-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 9px; }
.ib-field .ib-mic:hover { color: var(--fg); background: none; }
.ib-field .ib-mic svg { width: 19px; height: 19px; }
.ib-field .ib-mic.is-rec { color: var(--danger, #e5484d); animation: ibMicPulse 1.1s ease-in-out infinite; }
.ib-field .ib-mic.is-busy { opacity: .55; cursor: default; animation: ibMicPulse 1.4s ease-in-out infinite; }
@keyframes ibMicPulse { 50% { transform: scale(1.18); } }
.ib-field:not(.has-input) .ib-send { display: none; }
.ib-field.has-input .ib-mic { display: none; }
/* While recording: a red dot, a timer and live bars that follow your voice fill the box. */
.ib-field .ib-mic.is-rec { background: var(--danger, #e5484d); color: #fff; animation: none; }
.ib-wave { position: absolute; left: 14px; right: 44px; top: 0; bottom: 0; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.ib-wave[hidden] { display: none; }
.ib-wave-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--danger, #e5484d); box-shadow: 0 0 0 0 rgba(229,72,77,.55); animation: ibRecDot 1.2s ease-out infinite; }
.ib-wave-t { flex: none; min-width: 30px; font: 600 12px/1 var(--font-body); color: var(--fg); font-variant-numeric: tabular-nums; }
.ib-wave-bars { flex: 1; min-width: 0; height: 26px; display: flex; align-items: center; justify-content: flex-end; gap: 3px; overflow: hidden; }
.ib-wave-bars i { flex: none; width: 3px; height: 3px; border-radius: 3px; background: var(--danger, #e5484d); opacity: .35; transition: height .08s linear, opacity .08s linear; }
@keyframes ibRecDot { 70% { box-shadow: 0 0 0 7px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } }
@media (prefers-reduced-motion: reduce) { .ib-wave-dot { animation: none; } .ib-wave-bars i { transition: none; } }
@media (prefers-reduced-motion: reduce) { .ib-field .ib-mic.is-rec, .ib-field .ib-mic.is-busy { animation: none; } }
.ib-send svg, .ib-attach svg { width: 17px; height: 17px; }
.ib-picked { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); font-size: var(--text-small); color: var(--fg); }
.ib-picked[hidden] { display: none; }
.ib-picked span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-picked button { border: 0; background: none; color: var(--fg-muted); cursor: pointer; display: inline-flex; }
.ib-err { margin: 0 0 8px; font-size: var(--text-small); color: var(--danger); }
.ib-closed { padding: 14px 16px; border-top: 1px solid var(--border); text-align: center; font-size: var(--text-small); color: var(--fg-muted); }

/* phones: one pane at a time */
@media (max-width: 860px) {
  .ib { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 120px); }
  .ib .ib-conv { display: none; }
  .ib.show-conv .ib-list { display: none; }
  .ib.show-conv .ib-conv { display: flex; }
  .ib-back { display: inline-flex; }
  .ib-msg { max-width: 88%; }
}

.ib-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ib-tags .ib-badge { margin-top: 0; }
.ib-badge.ib-kind { background: var(--info-bg); color: var(--info); }
.ib-who { margin-bottom: 2px; font-size: var(--text-caption); color: var(--fg-subtle); }
.ib-msg.me .ib-who { text-align: right; }

.ib-when-card { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
/* Order cards: the time and tick sit inside the card, bottom right (same place as before, just on the card instead of under it). */
.ib-msg.ib-order { position: relative; }
.ib-order > .ib-when-card { position: absolute; right: 16px; bottom: 12px; margin: 0; width: auto; }
.ib-order:has(.ib-neworder) > .ib-when-card { color: #fff; font-weight: 600; }
.ib-order:has(.ib-neworder) > .ib-when-card .ib-ticks:not(.is-two) { color: #fff; }
.ib-order:has(.ib-neworder) > .ib-when-card .ib-ticks svg { stroke-width: 2.1; }
.ib-ticks { display: inline-flex; color: var(--fg-subtle); }
.ib-ticks.is-done { color: var(--info); }
.ib-ticks.is-two, .ib-ticks.is-two.is-done { color: #37B9FF; }

/* v2: message tools, reactions, edit, typing, modals */
.ib-line { display: flex; align-items: center; gap: 6px; }
.ib-msg.me .ib-line { justify-content: flex-end; }
.ib-tools { display: inline-flex; gap: 2px; opacity: 0; transition: opacity var(--dur-fast, .15s); flex-shrink: 0; }
.ib-msg:hover .ib-tools, .ib-tools:focus-within { opacity: 1; }
.ib-tools button { width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--fg-subtle); font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ib-tools button:hover, .ib-tools button:focus-visible { background: none; color: var(--fg); }
.ib-tools svg { width: 15px; height: 15px; }
.ib-tools svg :is(path, circle) { stroke-width: 2.6; }
.ib-tools svg circle[fill] { stroke-width: 0; }
@media (hover: none) { .ib-tools { opacity: 1; } }
.ib-gone { font-style: italic; color: var(--fg-subtle); background: transparent; border: 1px dashed var(--border); }
/* Reactions sit on the bubble's bottom edge (half over it), near the corner, like WhatsApp. */
.ib-reacts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px; margin: -8px 6px 0; }
.ib-msg.me .ib-reacts { justify-content: flex-end; }
.ib-react { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 0; box-shadow: none; border-radius: 999px; background: var(--surface-raised, var(--surface)); font: 500 12px/1 var(--font-body); cursor: pointer; }
.ib-react.on { background: var(--surface-raised, var(--surface-2)); }
.ib-react span { color: var(--fg-muted); }
.ib-picker { position: fixed; z-index: 1000; display: flex; gap: 2px; padding: 4px; background: var(--surface-raised, #fff); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-lg); }
.ib-picker button { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 50%; font-size: 18px; cursor: pointer; }
.ib-picker button:hover { background: var(--surface-2); }
.ib-msg:has(.ib-edit) { width: min(680px, 92%); max-width: none; }
.ib-edit { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.ib-edit textarea { width: 100%; resize: vertical; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font: inherit; background: var(--surface-raised, #fff); }
.ib-edit-row { display: flex; justify-content: flex-end; gap: 6px; }
.ib-typing { padding: 0 16px 6px; font-size: var(--text-caption); color: var(--fg-subtle); }
.ib-modal-bg { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(31,31,31,.35); border-radius: inherit; }
.ib-modal { width: min(420px, calc(100% - 32px)); background: var(--surface-raised, #fff); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-xl); display: flex; flex-direction: column; gap: 12px; }
.ib-modal h3 { margin: 0; font: 600 20px/1.2 var(--font-heading); }
.ib-modal-body { display: flex; flex-direction: column; gap: 8px; }
.ib-modal-body select, .ib-modal-body textarea, .ib-nc-q { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font: inherit; background: var(--surface-raised, #fff); }
.ib-lbl { font: 600 12px/1 var(--font-body); color: var(--fg-muted); }
.ib-muted { font-size: var(--text-small); color: var(--fg-muted); }
.ib-modal-foot { display: flex; justify-content: flex-start; gap: 8px; }
.ib-nc-list { display: flex; flex-direction: column; max-height: 260px; overflow: auto; }
.ib-nc-row { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; background: transparent; border-radius: 10px; text-align: left; font: 500 14px/1.2 var(--font-body); cursor: pointer; }
.ib-nc-row:hover { background: var(--surface-2); }
.ib { position: relative; }
.ib-msg .ib-bubble.ib-gone, .ib-msg.me .ib-bubble.ib-gone { background: transparent; color: var(--fg-subtle); font-style: italic; border: 1px dashed var(--border); }

/* A request is always sent by the brand: left for the people who receive it, right for the brand itself. */
.ib-req.is-theirs { align-self: flex-start; }
.ib-req.is-mine { align-self: flex-end; }
.ib-req-ref { font: 500 var(--text-small)/1.3 var(--font-body); color: var(--fg-muted); }
.ib-req-ref { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--fg); font: 500 12px/1 var(--font-body); }

/* Status lines sit on the side of whoever did it: the other side on the left, you on the right. */
.ib-sys.is-theirs { align-self: flex-start; }
.ib-sys.is-mine { align-self: flex-end; }

/* Brief / terms document cards on an order card: icon left, details and one button right. */
.ib-doc { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised, #fff); }
.ib-doc-ic { height: 64px; border-radius: 10px; background: var(--surface-2); color: var(--fg-muted); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.ib-doc-chip { display: inline-flex; align-items: center; height: 18px; margin-left: 8px; padding: 0 7px; border-radius: 999px; background: var(--success-bg, var(--surface-2)); color: var(--success); font: 600 11px/1 var(--font-body); vertical-align: middle; }
.ib-doc-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.ib-doc-t { font: 600 var(--text-body-sm)/1.3 var(--font-body); }
.ib-doc-s { max-width: 100%; font-size: var(--text-small); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-doc-main .btn { margin-top: 6px; }
.ib-modal-wide { width: min(560px, calc(100% - 32px)); }
.ib-doc-text { white-space: pre-wrap; font-size: var(--text-body-sm); line-height: 1.55; }
.ib-terms-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--text-body-sm); }
.ib-terms-body { max-height: 320px; overflow: auto; white-space: pre-wrap; font-size: var(--text-small); line-height: 1.55; color: var(--fg-muted); padding: 12px; border-radius: 10px; background: var(--surface-2); }
.ib-approved { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-size: var(--text-small); }

/* Document pop-out: about the shape of an A4 sheet, as tall as the inbox allows. */
.ib-modal-doc { height: calc(100vh - 48px); aspect-ratio: 1 / 1.414; width: auto; max-width: calc(100vw - 32px); min-height: 0; }
.ib-modal-doc .ib-modal-body { flex: 1; min-height: 0; overflow: auto; }
.ib-modal-doc .ib-terms-body { max-height: none; flex: 1; }

/* An order is only its document card: no outer card. */
.ib-req.ib-order { background: transparent; border: 0; padding: 0; width: 100%; max-width: 420px; }
.ib-order .ib-doc { position: relative; margin-top: 0; padding-right: 12px; background: var(--surface-raised, #fffcf8); }
.ib-order .ib-doc-main { padding-right: 0; }
.ib-doc-top { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; }
.ib-doc-menu { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--fg-muted); cursor: pointer; padding: 0; }
.ib-doc-menu:hover { color: var(--fg); border-color: var(--border-strong, var(--border)); }
.ib-doc-menu svg { width: 14px; height: 14px; }
.ib-doc-pop { position: absolute; top: 30px; right: 0; z-index: 5; min-width: 150px; padding: 4px; background: var(--surface-raised, #fff); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); }
.ib-doc-pop a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--fg); text-decoration: none; font-size: var(--text-small); }
.ib-doc-pop a:hover { background: var(--surface-2); }
.ib-doc-top .ib-req-ref { height: 20px; font-size: 11px; }

.ib-doc-actions { position: relative; display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.ib-doc-actions .btn { margin-top: 0; }
.ib-doc-actions .ib-doc-pop { top: 32px; left: 0; right: auto; }
.ib-doc-menu { width: 28px; height: 28px; }
body:not(#kit):is(.brand-portal, .studio-portal, .creator-portal) .ib-doc .btn.btn-outline { background: transparent; }

/* New Order card: the first card of an order, in Mulberry. */
.ib-neworder { background: #C60C5C; color: #fff; border-radius: 14px; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; position: relative; }
.ib-no-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ib-no-title { display: inline-flex; align-items: center; gap: 8px; font: 600 17px/1.2 var(--font-heading); }
.ib-no-text { font-size: var(--text-body-sm); line-height: 1.5; color: rgba(255,255,255,.95); overflow-wrap: anywhere; }
.ib-no-file { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 10px; background: rgba(0,0,0,.14); color: #fff; margin-top: 2px; }
.ib-no-file > div { min-width: 0; }
.ib-no-ft { font: 600 15px/1.3 var(--font-body); }
.ib-no-fs { font-size: 12px; color: rgba(255,255,255,.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ib-no-btn { margin-top: 4px; height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: #fff; color: #1f1f1f; font: 600 12px/1 var(--font-body); cursor: pointer; }
.ib-no-btn:hover { background: #f4ece3; }
.ib-no-menu { margin: 0; }
.ib-neworder .ib-doc-menu { border-color: rgba(255,255,255,.45); color: #fff; width: 26px; height: 26px; }
.ib-neworder .ib-doc-menu:hover { border-color: #fff; }
/* The ⋯ button fades in only while the card is hovered (always on touch screens, and while its menu is open). */
.ib-neworder .ib-doc-menu { opacity: 0; transform: scale(.9); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), border-color .15s; }
.ib-neworder:hover .ib-doc-menu, .ib-neworder:focus-within .ib-doc-menu, .ib-neworder:has(.ib-doc-pop:not([hidden])) .ib-doc-menu { opacity: 1; transform: none; }
@media (hover: none) { .ib-neworder .ib-doc-menu { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ib-neworder .ib-doc-menu { transition: none; } }
.ib-neworder .ib-doc-pop { right: 0; left: auto; top: 32px; }
.ib-neworder .ib-doc-pop a { color: var(--fg); }

.ib-no-ic { width: 28px; height: 28px; flex-shrink: 0; background-color: currentColor; -webkit-mask: url('/images/new-order-icon.png') center / contain no-repeat; mask: url('/images/new-order-icon.png') center / contain no-repeat; }

.ib-no-ref { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(255,255,255,.2); color: #fff; font: 500 11px/1 var(--font-body); }
.ib-no-actions { margin-top: 4px; }
.ib-no-actions .ib-no-btn { margin-top: 0; }
.ib-neworder .ib-doc-actions .ib-doc-pop { left: 0; right: auto; top: 34px; }

button.ib-no-file { border: 0; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-fast, .15s); }
button.ib-no-file:hover { background: rgba(0,0,0,.22); }
button.ib-no-file:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The brief file, shown inside the pop-out. */
.ib-viewer { flex: 1; min-height: 280px; width: 100%; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.ib-viewer-img { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); display: flex; justify-content: center; }
.ib-viewer-img img { max-width: 100%; height: auto; align-self: flex-start; }

/* Emoji button in the message box, and the picker it opens. */
.ib-emoji-btn { width: 36px; height: 36px; flex-shrink: 0; border: 0; border-radius: 10px; background: transparent; color: var(--fg-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ib-emoji-btn:hover { background: var(--surface-2); color: var(--fg); }
.ib-picker-grid { display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; padding: 8px; border-radius: 14px; }

/* Close (X) in the top right of every pop-out. */
.ib-modal { position: relative; }
.ib-modal > h3 { padding-right: 40px; }
.ib-modal-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(0,0,0,.06); color: var(--fg-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; padding: 0; z-index: 1; }
.ib-modal-x:hover { background: rgba(0,0,0,.1); color: var(--fg); }

/* Download icon on the right of an attached-file card. */
.ib-file .ib-file-dl { margin-left: auto; padding-left: 8px; color: var(--fg-muted); flex: none; }
.ib-file:hover .ib-file-dl { color: var(--fg); }
.ib-modal .ib-file { display: flex; width: 100%; }

/* Document pop-out polish: bigger download icon (same bar height), darker 1.5px viewer border, X on the viewer's right edge. */
.ib-file .ib-file-dl { width: 21px; height: 21px; margin-block: -3px; padding-left: 0; }
.ib-viewer { border: 1.5px solid #B9A596; }
.ib-modal-x { right: 20px; }

.ib-file .ib-file-dl { width: 17px; height: 17px; margin-block: -1px; }

.ib-org-ic { display: inline-flex; vertical-align: -1px; margin-left: 6px; color: var(--fg-muted); }
.ib-org-ic svg { width: 13px; height: 13px; }

/* Full emoji picker (emoji-picker-element). */
.ib-picker-full { display: block; width: 340px; height: 400px; padding: 0; border-radius: 14px; overflow: hidden; }
.ib-picker-load { height: 100%; display: flex; align-items: center; justify-content: center; font-size: var(--text-small); color: var(--fg-muted); }
.ib-picker-full emoji-picker { width: 100%; height: 100%; --background: var(--surface-raised, #fff); --border-color: var(--border); --input-border-color: var(--border); --input-font-color: var(--fg); --input-placeholder-color: var(--fg-subtle); --category-font-color: var(--fg-muted); --button-hover-background: var(--surface-2); --button-active-background: var(--surface-2); --indicator-color: var(--accent); --outline-color: var(--fg); --num-columns: 8; --emoji-size: 1.4rem; --input-font-size: var(--text-body-sm); --input-font-family: var(--font-body); font-family: var(--font-body); }
.ib-picker .ib-picker-more { font-size: 18px; font-weight: 600; color: var(--fg-muted); }