/* Messages screen (0096). One shared conversation between Kyle and the shop iPads.
   Mine on the right, theirs on the left — "mine" depends on who is viewing. Touch targets
   are >= 64px on the shop side (staff tapping in a hurry). */
.msg-page { max-width: 760px; }

.msg-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.msg-empty { color: var(--text-secondary); font-size: 14px; }

.msg-row { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.msg-row.mine { align-items: flex-end; }
.msg-bubble {
  max-width: min(560px, 86%);
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  background: var(--surface-2);
  border: 0.5px solid var(--border);
  font-size: 17px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg-row.mine .msg-bubble {
  border-radius: 16px 16px 4px 16px;
  background: var(--accent-bg);
  border-color: transparent;
}
.msg-row.urgent .msg-bubble { border: 1.5px solid var(--status-red); }
.msg-meta { font-size: 12px; color: var(--text-muted); margin: 3px 6px 0; }
.msg-tag {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 0 6px; border-radius: 5px; margin-right: 4px; vertical-align: 1px;
}
.msg-tag.urgent { background: var(--danger-bg); color: var(--danger-text); }
.msg-tag.info { background: var(--surface-1); color: var(--text-secondary); }

.msg-receipts { list-style: none; margin: 4px 6px 0; padding: 0; font-size: 12.5px; color: var(--text-secondary); text-align: right; }
.msg-receipts li { margin: 1px 0; }
.msg-receipts .acked { color: var(--success-fill); }
.msg-receipts .shown { color: var(--warning-text); }

.msg-compose {
  /* Deliberately NOT sticky: on a phone, Kyle's composer (presets + options) is taller than
     half the screen and would cover the newest messages. */
  padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  border-top: 0.5px solid var(--border);
}
.msg-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .05em; }
.msg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.msg-chip {
  min-height: 64px; font-size: 16px; font-weight: 600; border-radius: 12px;
  border: 1.5px solid var(--border-strong); background: var(--surface-2);
}
.msg-chip.urgent { border-color: var(--status-red); }
.msg-chip small { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.msg-owner .msg-chip { min-height: 52px; }

.msg-opts { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 10px; }
.msg-opts select { min-height: 44px; font-size: 15px; }
.msg-seg { display: inline-flex; border: 0.5px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.msg-seg button { border: none; border-radius: 0; min-height: 44px; padding: 8px 14px; font-size: 15px; }
.msg-seg button + button { border-left: 0.5px solid var(--border-strong); }
.msg-seg button.active { background: var(--text-primary); color: #fff; }
.msg-seg button.active.urgent { background: var(--status-red); }
.msg-hint { font-size: 12px; color: var(--text-muted); margin: -4px 0 10px; }

.msg-write { display: flex; gap: 8px; align-items: stretch; }
.msg-write textarea { flex: 1; min-height: 64px; font-size: 17px; }
.msg-write button { min-width: 96px; min-height: 64px; font-size: 17px; font-weight: 600; }
.msg-status { font-size: 13px; color: var(--text-secondary); margin: 8px 0 0; min-height: 1.2em; }
.msg-status.err { color: var(--danger-text); }