/* Chalkmate — Inbox */
.ib { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; height: 100%; min-height: 0; }
.ib-col { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--panel); }
.ib-head { display: flex; align-items: center; gap: 8px; padding: 18px 16px 8px; }
.ib-head h2 { font-size: 20px; margin: 0; }
.ib-head p { margin: 2px 0 0; }
.ib-search { position: relative; padding: 4px 16px 8px; }
.ib-search span { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); color: var(--text-3, #94a3b8); display: flex; }
.ib-search span svg { width: 16px; height: 16px; }
.ib-search .input { padding-left: 36px; }
.ib-filters { padding: 0 16px 10px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); }
.ib-seg { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.ib-seg::-webkit-scrollbar { display: none; }
.ib-seg button { white-space: nowrap; }
.ib-n { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.ib-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ib-chips .chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.ib-chips .sq { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.ib-list { flex: 1; overflow-y: auto; padding: 6px 8px 24px; -webkit-overflow-scrolling: touch; }
.ib-empty { padding: 24px 8px; }

.ib-row { display: flex; gap: 10px; width: 100%; text-align: left; padding: 11px 10px 11px 6px; border: 0; background: none; border-radius: 12px; cursor: pointer; color: inherit; font: inherit; position: relative; }
.ib-row + .ib-row { margin-top: 2px; }
.ib-row:hover { background: var(--hover, rgba(15, 23, 42, .04)); }
.ib-row.sel { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.ib-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 15px; flex: none; background: transparent; }
.ib-row.unread .ib-dot { background: var(--brand); }
.ib-av { --c: #94a3b8; width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--c); }
.ib-av.lg { width: 42px; height: 42px; font-size: 14px; }
.ib-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ib-top { display: flex; align-items: baseline; gap: 8px; }
.ib-top b { flex: 1; min-width: 0; font-weight: 500; }
.ib-row.unread .ib-top b, .ib-row.unread .ib-subj { font-weight: 700; }
.ib-top em { font-style: normal; font-size: 12px; color: var(--text-2); flex: none; }
.ib-subj { font-size: 14px; display: flex; align-items: center; gap: 4px; }
.ib-subj svg { width: 13px; height: 13px; color: #f59e0b; fill: #f59e0b; flex: none; }
.ib-snip { font-size: 13px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.ib-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; align-items: center; }
.ib-tags:empty { display: none; }
.ib-att { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--text-2); }
.ib-att svg { width: 13px; height: 13px; }
.ib-cat { background: var(--chip, var(--hover)); color: var(--text-2); }
.ib-cat-action, .ib-cat-deadline { background: #fef3c7; color: #92400e; }
.ib-cat-meeting { background: #e0e7ff; color: #3730a3; }
.ib-cat-parent { background: #fce7f3; color: #9d174d; }
.ib-cat-admin { background: #e0f2fe; color: #075985; }
:root[data-theme="dark"] .ib-cat-action, :root[data-theme="dark"] .ib-cat-deadline { background: #422006; color: #fcd34d; }
:root[data-theme="dark"] .ib-cat-meeting { background: #1e1b4b; color: #c7d2fe; }
:root[data-theme="dark"] .ib-cat-parent { background: #500724; color: #fbcfe8; }
:root[data-theme="dark"] .ib-cat-admin { background: #082f49; color: #bae6fd; }
.ib-reply { display: inline-flex; align-items: center; gap: 3px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.ib-reply svg { width: 12px; height: 12px; }
.ib-due { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.ib-due svg { width: 12px; height: 12px; }
.ib-due.soon { color: #b45309; }
.ib-due.late { color: #dc2626; }

/* reading pane */
.ib-pane { overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.ib-placeholder { height: 100%; display: grid; place-items: center; padding: 40px; }
.ib-read { max-width: 820px; margin: 0 auto; padding: 22px 28px 60px; display: flex; flex-direction: column; gap: 14px; }
.ib-rhead { display: flex; align-items: flex-start; gap: 8px; }
.ib-rhead h2 { font-size: 21px; line-height: 1.3; margin: 0; word-break: break-word; }
.ib-from { display: flex; align-items: center; gap: 12px; }
.ib-fromtxt { min-width: 0; line-height: 1.35; }
.ib-fromtxt > span.small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-fromtxt .faint:not(.small) { word-break: break-all; }
.ib-school { cursor: pointer; border: 1px dashed var(--line); background: none; flex: none; display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; }
.ib-school svg { width: 13px; height: 13px; }
.ib-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ib-on svg { color: #f59e0b; fill: #f59e0b; }
.ib-note { white-space: pre-wrap; }
.ib-note .lbl, .ib-points .lbl, .ib-addr-card .lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--text-2); margin-bottom: 4px; white-space: normal; }
.ib-ai { display: flex; align-items: center; gap: 10px; }
.ib-ai > svg { width: 18px; height: 18px; flex: none; color: var(--ai); }
.ib-ai-card { border-color: color-mix(in srgb, var(--ai) 30%, var(--line)); }
.ib-ai-card .card-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ib-ai-card .card-h h3 { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; color: var(--ai); }
.ib-sum { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.ib-points ul { margin: 0 0 10px; padding-left: 20px; }
.ib-points li { margin: 2px 0; }
.ib-items { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ib-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ib-item + .ib-item { border-top: 1px solid var(--line); }
.ib-item .grow { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ib-item-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.ib-made { display: inline-flex; align-items: center; gap: 4px; background: #dcfce7; color: #166534; text-decoration: none; }
:root[data-theme="dark"] .ib-made { background: #052e16; color: #86efac; }
.ib-made svg { width: 12px; height: 12px; }
.ib-atts { display: flex; flex-direction: column; gap: 6px; }
.ib-attrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.ib-attrow a.grow { min-width: 0; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.ib-attrow a.grow b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ib-body { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; background: var(--panel); overflow-x: auto; }
.ib-body .prose { word-break: break-word; }
.ib-body .prose table { width: auto; max-width: 100%; }
.ib-body .prose img { max-width: 100%; height: auto; }
.ib-compose .card-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ib-compose .card-h h3 { display: flex; align-items: center; gap: 6px; }
.ib-ins { display: flex; gap: 8px; margin-bottom: 10px; }
.ib-ins .input { flex: 1; min-width: 0; }
.ib-ins .btn { flex: none; }
.ib-draft { width: 100%; font: inherit; line-height: 1.55; min-height: 200px; }
.ib-working { margin-bottom: 10px; }

/* drawer on mobile */
.modal.ib-drawer .modal-b { padding: 0; }
.modal.ib-drawer .modal-h { display: none; }
.modal.ib-drawer .ib-read { padding: 16px 16px 40px; }
.modal.ib-drawer .ib-rhead::after { content: ''; }

/* forwarding setup */
.ib-addr { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ib-addr code { flex: 1 1 260px; min-width: 0; font-size: 16px; padding: 12px 14px; border-radius: 10px; background: var(--chip, #eef2f1); word-break: break-all; user-select: all; }
.ib-tabs { overflow-x: auto; max-width: 100%; }
.ib-tabs button { white-space: nowrap; }
.ib-steps { margin: 0; padding-left: 22px; line-height: 1.55; }
.ib-steps li { margin: 6px 0; }
.note > svg { flex: none; }

@media (max-width: 760px) {
  .ib { display: block; height: auto; }
  .ib-col { border-right: 0; background: none; }
  .ib-pane { display: none; }
  .ib-head { padding: 14px 12px 6px; }
  .ib-search { padding: 4px 12px 8px; }
  .ib-search span { left: 24px; }
  .ib-filters { padding: 0 12px 10px; }
  .ib-list { overflow: visible; padding: 6px 4px calc(96px + env(safe-area-inset-bottom)); }
  .modal.ib-drawer { width: 100%; }
  .modal.ib-drawer .ib-read { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .ib-read { padding: 16px 14px 40px; }
  .ib-rhead h2 { font-size: 19px; }
  .ib-item { flex-wrap: wrap; }
  .ib-item-acts { width: 100%; justify-content: flex-start; padding-left: 42px; }
  .ib-ins { flex-direction: column; }
  .ib-body { padding: 14px; }
  .ib-bar .btn span { display: inline; }
}