/* 請求書の shared/intake.css と invoice/invoice.css のメール・原本表示と同じ部品。
   注文確認欄への影響を避け、受信トレイと原本の窓だけに適用する。 */
.order-inbox{margin:20px 0 24px}
.fetch>.section-title h2{font-size:23px}
.order-inbox .inbox-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px;background:#f1f3f5;border:1px solid var(--line);border-radius:8px}
.order-inbox .mail{border-bottom:1px solid var(--line);padding:0}
.order-inbox .mail summary{cursor:pointer;font-weight:600;overflow-wrap:anywhere}
.order-inbox .mail>summary{display:flex;align-items:center;gap:14px;padding:15px 8px;list-style:revert}
.order-inbox .mail>summary::before{content:'▸';flex:none}
.order-inbox .mail[open]>summary::before{content:'▾'}
.order-inbox .mail[open]>summary{background:#f1f5f3}
.order-inbox .mail-time{font-size:12px;flex:0 0 88px;white-space:nowrap}
.order-inbox .mail-heading{flex:1;min-width:0}
.order-inbox .mail-heading small{display:block;font-size:11px;font-weight:400;margin-top:6px}
.order-inbox .mail-badge{flex:none;font-size:12px;border:1px solid #bac5bf;border-radius:5px;padding:3px 7px}
.order-inbox .mail-imported{background:#e0efe5;color:#165136}
.order-inbox .mail-content{padding:8px 18px 18px}
.order-inbox .mail pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:13px;margin:12px 0}
.order-inbox .attachments{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 6px}
.order-inbox .attachment{margin:0;width:220px}
.order-inbox .attachment img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
.order-inbox .attachment figcaption{font-size:12px;margin-top:6px;overflow-wrap:anywhere}
.order-inbox .attachment .paper-button{padding:0;border:0;background:transparent;font-size:12px;text-align:left}
.order-inbox .paper{display:block;position:relative}
.order-inbox .attachment-error:empty{display:none}
.order-inbox .attachment-error{font-size:12px;color:#8f3520}
.viewer{width:min(96vw,1400px);height:94dvh;max-width:none;max-height:none;padding:0;border:0;border-radius:10px;box-shadow:0 10px 40px #0006;overflow:hidden}
.viewer[open]{display:flex;flex-direction:column}.viewer::backdrop{background:#0b1f1999}
.viewer-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line);background:#fff}
.viewer-bar h2{flex:1;min-width:0;margin:0;font-size:15px;overflow-wrap:anywhere}
.viewer-bar button,.viewer-bar a{font-size:13px;padding:6px 10px}
.viewer-body{flex:1;min-height:0;overflow:auto;background:#eef2f0;display:flex;align-items:center;justify-content:center;padding:10px}
.viewer-body img{display:block;max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;background:#fff;box-shadow:0 2px 10px #0002}
.viewer-body img:not([src]){display:none}
.viewer.is-actual .viewer-body{display:block}.viewer.is-actual .viewer-body img{max-width:none;max-height:none;cursor:zoom-out;margin:auto}
.viewer-note{margin:0;padding:6px 14px;font-size:12px;color:#5b6b64;background:#fff;border-top:1px solid var(--line)}
.viewer #viewer-status:empty{display:none}
@media(max-width:600px){
  .fetch>.section-title h2{font-size:20px}
  .order-inbox .mail>summary{flex-wrap:wrap;gap:8px;padding:12px 4px}.order-inbox .mail-heading{flex-basis:calc(100% - 126px)}
  .order-inbox #mailbox{max-height:330px;overflow:auto;overscroll-behavior:contain;border-bottom:1px solid var(--line)}
  .order-inbox .mail-badge{margin-left:24px}.order-inbox .mail-content{padding:8px}.order-inbox .inbox-toolbar{padding:12px}
  .order-inbox .attachment{width:calc(50% - 7px)}
  .viewer{width:100vw;height:100dvh;border-radius:0}.viewer-bar{padding:8px 10px}.viewer-bar h2{flex-basis:100%;font-size:13px}
}