/* osir.co.uk: Secure Chat */

.sch-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}
.sch-pad { padding: 24px; }
.sch-k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sch-muted { color: var(--muted); }
.sch-small { font-size: 13px; }
.sch-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sch-danger { color: #b91c1c; }
.sch-danger:hover { border-color: #b91c1c !important; }
:root[data-theme="dark"] .sch-danger { color: #f87171; }
.sch-bad { color: #991b1b; }
:root[data-theme="dark"] .sch-bad { color: #fca5a5; }
#sch-root .btn-xs { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; gap: 6px; }
.sch-actions-c { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.sch-actions-r { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.sch-form-err { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: #991b1b; background: color-mix(in srgb, #dc2626 10%, transparent); }
:root[data-theme="dark"] .sch-form-err { color: #fecaca; }

/* ---------- Gate, notices, invitation ---------- */
.sch-gate, .sch-notice, .sch-invite-card { max-width: 540px; margin: 8px auto 0; padding: 36px 30px; text-align: center; }
.sch-gate-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; color: #fff; background: var(--grad); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--brand-1) 80%, transparent); }
.sch-gate h2, .sch-notice h2, .sch-invite-card h2 { margin-top: 18px; font-size: 24px; font-weight: 800; }
.sch-gate > p, .sch-notice > p, .sch-invite-card > p { margin-top: 8px; color: var(--muted); }
.sch-human {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 24px; padding: 14px 22px 14px 16px;
  border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface-solid);
  font: inherit; font-weight: 650; font-size: 17px; color: var(--text); cursor: pointer;
}
.sch-human:hover { border-color: var(--brand-1); }
.sch-human-box { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--border-strong); }
.sch-human-box svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .35s ease .05s; }
.sch-spin { position: absolute; inset: -2px; border-radius: 8px; border: 2px solid transparent; border-top-color: var(--brand-1); opacity: 0; }
.sch-human.is-busy .sch-spin { opacity: 1; animation: schspin .8s linear infinite; }
.sch-human.is-done .sch-human-box { background: #16a34a; border-color: #16a34a; }
.sch-human.is-done .sch-human-box svg { stroke-dashoffset: 0; }
.sch-human.is-done .sch-spin { display: none; }
@keyframes schspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sch-human.is-busy .sch-spin { animation-duration: 2.4s; } }
.sch-gate-status { margin-top: 14px; font-size: 14px; color: var(--muted); min-height: 1.6em; }
.sch-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sch-invite-card { text-align: left; }
.sch-invite-card .sch-gate-icon, .sch-invite-card h2 { display: grid; margin-left: auto; margin-right: auto; text-align: center; }
.sch-invite-card > p { text-align: center; }
.sch-fp-box { display: grid; gap: 4px; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); text-align: center; }
.sch-fp { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.sch-fp-sm { font-family: var(--mono); font-size: 14px; }

/* ---------- Fields ---------- */
.sch-field { display: grid; gap: 6px; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--text-2); border: 0; padding: 0; min-width: 0; }
.sch-field legend { padding: 0; margin-bottom: 6px; }
.sch-field input[type="text"], .sch-field input[type="email"], .sch-field textarea, .sch-copy-row input {
  width: 100%; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border-strong);
  background: var(--bg); color: var(--text); font: inherit; font-weight: 400; font-size: 15px; outline: none;
}
.sch-field textarea { height: auto; padding: 10px 14px; resize: vertical; }
.sch-field input:focus, .sch-field textarea:focus, .sch-copy-row input:focus, #sch-text:focus {
  border-color: var(--brand-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 22%, transparent);
}
.sch-ttl { display: flex; flex-wrap: wrap; gap: 8px; }
.sch-ttl legend { width: 100%; }
.sch-ttl label, .sch-reasons label {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--surface-solid); font-weight: 600; cursor: pointer;
}
.sch-ttl label:has(input:checked), .sch-reasons label:has(input:checked) { border-color: var(--brand-1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-1) 25%, transparent); }
.sch-ttl input, .sch-reasons input, .sch-check input { accent-color: var(--brand-1); width: 16px; height: 16px; }
.sch-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; color: var(--text-2); }
.sch-check input { flex: none; margin-top: 2px; }

/* ---------- Start ---------- */
.sch-start-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.sch-start-grid h2 { font-size: 22px; font-weight: 800; }
.sch-start-grid p.sch-muted { margin-top: 6px; }
.sch-start-grid .btn { margin-top: 20px; }
.sch-recent { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.sch-recent h3 { font-size: 15px; font-weight: 700; }
.sch-recent ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.sch-recent li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.sch-recent-info { display: grid; flex: 1 1 180px; min-width: 0; }
.sch-recent .btn { margin-top: 0; }

/* ---------- Room bar ---------- */
.sch-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; padding: 18px 22px; }
.sch-bar-main { display: grid; gap: 4px; min-width: 0; }
.sch-bar-stats { display: flex; gap: 22px; text-align: right; }
.sch-bar-stats strong { display: block; font-size: 17px; }
#sch-countdown.is-low { color: #b91c1c; }
:root[data-theme="dark"] #sch-countdown.is-low { color: #f87171; }
.sch-bar-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.sch-live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.sch-live i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.sch-live.is-off i { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .2); }

.sch-invite { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--border); display: grid; gap: 12px; }
.sch-warn-line { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.sch-warn-line .icon { flex: none; margin-top: 2px; color: var(--link); }
.sch-copy-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sch-copy-row input { flex: 1 1 260px; font-family: var(--mono); font-size: 13px; height: 38px; }
.sch-qr { display: grid; justify-items: start; gap: 6px; }
.sch-qr svg { border-radius: 10px; border: 1px solid var(--border); max-width: 100%; height: auto; }
.sch-short { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); }
.sch-short > div:first-child { display: grid; gap: 4px; }
.sch-short-code { font-size: 28px; letter-spacing: .08em; color: var(--text); }
.sch-short-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.sch-short-note { flex-basis: 100%; }

.sch-banner { margin-top: 14px; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; color: #854d0e; background: color-mix(in srgb, #f59e0b 16%, transparent); border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent); }
:root[data-theme="dark"] .sch-banner { color: #fde68a; }
.sch-banner-info { color: var(--text-2); background: var(--surface-2); border-color: var(--border-strong); }

/* ---------- Messages ---------- */
/* The room fills the window below the site header: the bar on top, messages scrolling in the middle,
   the composer always at the bottom. On phones it becomes a full-screen app view (html.sch-fs). */
.sch-room:not([hidden]) {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--header-h) - 28px); height: calc(100dvh - var(--header-h) - 28px);
  min-height: 460px;
}
.sch-room > .sch-bar { flex: none; max-height: 52%; overflow-y: auto; overscroll-behavior: contain; }
.sch-room > .sch-banner { flex: none; }
.sch-chat { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 12px; display: flex; flex-direction: column; overflow: hidden; }
.sch-scroll-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sch-menu-btn, .sch-fs-btn { display: none !important; }
.sch-menu-btn { width: 40px; padding: 0 !important; font-size: 22px !important; line-height: 1; }
.sch-room.is-over .sch-chat { border-color: var(--brand-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 25%, transparent); }
.sch-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px; outline: none; background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.sch-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-1); }
.sch-empty { margin: 40px auto; max-width: 340px; text-align: center; color: var(--muted); }
.sch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sch-msg { align-self: flex-start; max-width: min(78%, 680px); padding: 10px 14px 8px; border-radius: 16px 16px 16px 6px; background: var(--surface-solid); border: 1px solid var(--border); }
.sch-msg.is-me { align-self: flex-end; border-radius: 16px 16px 6px 16px; background: color-mix(in srgb, var(--brand-1) 10%, var(--surface-solid)); border-color: color-mix(in srgb, var(--brand-1) 25%, transparent); }
.sch-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; }
.sch-name { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.sch-no { font-family: var(--mono); font-size: 12px; padding: 0 6px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.sch-time { color: var(--muted); font-size: 12px; }
.sch-text { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; font-size: 15px; line-height: 1.5; color: var(--text); }
.sch-quote { margin-top: 6px; padding: 4px 10px; border-left: 3px solid var(--brand-1); border-radius: 4px; font-size: 13px; color: var(--text-2); background: var(--surface-2); overflow-wrap: anywhere; }
.sch-msg-actions { display: flex; gap: 6px; margin-top: 6px; opacity: .85; }
.sch-msg-actions .btn-xs { height: 26px !important; padding: 0 8px !important; font-size: 12px !important; }
.sch-sys { align-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 13px; color: var(--muted); text-align: center; }
.sch-jump { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 8px 16px; border-radius: 99px; border: 0; background: var(--grad); color: #fff; font: inherit; font-weight: 650; font-size: 14px; cursor: pointer; box-shadow: var(--shadow-lg); }

.sch-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.sch-file-ext { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 4px; border-radius: 10px; background: var(--grad); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.sch-file-info { display: grid; min-width: 0; }
.sch-file-name { overflow-wrap: anywhere; font-size: 14px; }
.sch-file progress, .sch-file > .sch-small:not(.sch-file-note), .sch-file-warn, .sch-file-note { grid-column: 1 / -1; }
.sch-file progress { width: 100%; height: 8px; accent-color: var(--brand-1); }
.sch-file-note { margin: 0; }
.sch-file-warn { padding: 8px 12px; border-radius: 10px; font-size: 13px; color: #991b1b; background: color-mix(in srgb, #dc2626 10%, transparent); }
.sch-file-warn ul { margin: 4px 0; padding-left: 18px; font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
:root[data-theme="dark"] .sch-file-warn { color: #fecaca; }

/* ---------- Transfers & composer ---------- */
.sch-transfers { flex: none; max-height: 30%; overflow-y: auto; list-style: none; margin: 0; padding: 0 18px; display: grid; gap: 6px; }
.sch-transfers:not(:empty) { padding-top: 10px; padding-bottom: 6px; border-top: 1px solid var(--border); }
.sch-q { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.sch-q-name { font-weight: 600; overflow-wrap: anywhere; flex: 1 1 160px; min-width: 0; }
.sch-q-size, .sch-q-state { color: var(--muted); }
.sch-q progress { flex: 1 1 120px; height: 8px; accent-color: var(--brand-1); }
.sch-q-err { flex-basis: 100%; color: #991b1b; }
:root[data-theme="dark"] .sch-q-err { color: #fca5a5; }
.sch-q-ok .sch-q-state { color: #166534; }
:root[data-theme="dark"] .sch-q-ok .sch-q-state { color: #86efac; }

.sch-compose { flex: none; padding: 12px 14px 10px; border-top: 1px solid var(--border); background: var(--surface); }
.sch-reply { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding: 6px 10px; border-left: 3px solid var(--brand-1); border-radius: 6px; background: var(--surface-2); overflow-wrap: anywhere; }
.sch-x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.sch-x:hover { color: var(--text); background: var(--surface-solid); }
.sch-compose-row { display: flex; align-items: flex-end; gap: 8px; }
#sch-text {
  flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 220px; padding: 11px 14px; resize: none;
  border-radius: 12px; border: 1px solid var(--border-strong); background: var(--bg); color: var(--text);
  font: inherit; font-size: 15px; line-height: 1.4; outline: none;
}
.sch-compose-row .btn { height: 44px; }
.sch-attach { width: 44px; padding: 0 !important; }
.sch-attach .icon { transform: rotate(180deg); }
.sch-compose-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--muted); }
#sch-count.is-over { color: #b91c1c; font-weight: 700; }

/* ---------- Dialog & toasts ---------- */
.sch-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 24px; border-radius: 20px; border: 1px solid var(--border-strong); background: var(--surface-solid); color: var(--text); box-shadow: var(--shadow-lg); }
.sch-dialog::backdrop { background: rgba(8, 10, 20, .55); }
.sch-dialog h2 { font-size: 22px; font-weight: 800; }
.sch-dialog > form > p.sch-muted { margin-top: 6px; }
.sch-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.sch-reasons legend { width: 100%; }
.sch-reasons label { font-weight: 500; font-size: 14px; }
.sch-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.sch-toast { padding: 12px 16px; border-radius: 12px; background: var(--surface-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); font-size: 14px; color: var(--text); transition: opacity .3s, transform .3s; }
.sch-toast.ok { border-left: 4px solid #16a34a; }
.sch-toast.bad { border-left: 4px solid #dc2626; }
.sch-toast.out { opacity: 0; transform: translateY(6px); }

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  .sch-start-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .sch-pad, .sch-gate, .sch-notice, .sch-invite-card { padding: 22px 16px; }
  .sch-bar { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .sch-bar-stats { text-align: left; }
  .sch-bar-actions .btn { flex: 1 1 auto; }
  .sch-scroll { padding: 12px; }
  .sch-msg { max-width: 92%; }
  .sch-compose { padding: 10px; }
  .sch-compose-meta .sch-hint { display: none; }
  .sch-file { grid-template-columns: auto minmax(0, 1fr); }
  .sch-file-dl { grid-column: 1 / -1; }
  .sch-short-code { font-size: 24px; }
}

/* ---------- Phones: menu instead of the button row, full-screen chat ---------- */
@media (max-width: 720px), (max-height: 520px) and (pointer: coarse) {
  .sch-room:not([hidden]) { min-height: 380px; }
  .sch-bar { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 12px; padding: 10px 12px; }
  .sch-bar-main .sch-k { display: none; }
  .sch-bar-stats .sch-k { font-size: 10px; }
  .sch-bar-main .sch-fp { font-size: 14px; }
  .sch-bar-stats { gap: 12px; text-align: right; }
  .sch-bar-stats strong { font-size: 14px; }
  .sch-menu-btn, .sch-fs-btn { display: inline-flex !important; }
  .sch-bar:not(.is-menu) .sch-bar-actions { display: none; }
  .sch-bar-actions .btn { flex: 1 1 40%; }
  .sch-invite { padding-top: 12px; }
  #sch-text, .sch-field input, .sch-field textarea, .sch-copy-row input { font-size: 16px; }
  #sch-text { max-height: 132px; }
}
html.sch-fs, html.sch-fs body { overflow: hidden; overscroll-behavior: none; }
html.sch-fs .sch-room:not([hidden]) {
  position: fixed; left: 0; right: 0; top: var(--sch-vt, 0px); z-index: 55;
  height: var(--sch-vh, 100vh); min-height: 0; margin: 0; background: var(--bg);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
}
html.sch-fs .sch-room > .sch-bar { max-height: 62%; border-radius: 0; border-width: 0 0 1px; box-shadow: none; }
html.sch-fs .sch-room > .sch-banner { margin: 0; border-radius: 0; border-width: 0 0 1px; padding: 8px 12px; font-size: 13px; }
html.sch-fs .sch-chat { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
html.sch-fs .sch-compose { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
html.sch-fs .sch-compose-meta { margin-top: 4px; }