/* LARU OS × LARUbot 問い合わせの続き — 共通の見た目（2026-10-16 第二版）
 *
 * ⚠️ すべて .los の内側に限る。管理画面の .btn / .card / .row などには一切触れない。
 *    ウィジェット・お客様の会話画面・スタッフの画面・企業の設定が、同じ規則を共有する。
 *
 * 方針: 落ち着いていて、親しみがあり、業務でも信頼できるメッセージ画面。
 *   ・会話面は白。一覧・補助情報は一段だけ沈んだ面（canvas）で分ける。
 *   ・ブランド色（LARUbot の藍）は、主操作・選択状態・必要な強調だけ。
 *     待ち・警告・社内メモは、それぞれ別の弱い色で、ブランド色と同じ強さにしない。
 *   ・優先順位は、枠ではなく 余白・文字の大きさ・太さ でつくる。
 */
.los{
  --los-surface:#ffffff;      /* 会話面 */
  --los-canvas:#f3f4f8;       /* 一覧・補助情報・画面の地 */
  --los-raise:#fbfbfd;        /* 面の中の小さな区切り */
  --los-ink:#1a1e29;          /* 本文 */
  --los-ink-2:#454c5e;        /* 補足 */
  --los-ink-3:#646b7d;        /* 時刻・ラベル（白地で 4.9:1） */
  --los-line:#e2e5ee;
  --los-line-strong:#cfd4e0;
  --los-brand:#4f46e5;        /* LARUbot の藍（既存のブランド色） */
  --los-brand-strong:#4038c9;
  --los-brand-soft:#eef0ff;
  --los-brand-ink:#ffffff;
  --los-wait:#7a5200;  --los-wait-soft:#fff4dc;     /* 待っている */
  --los-ok:#1d6b40;    --los-ok-soft:#e6f5ec;       /* 済んだ・確認済み */
  --los-bad:#a8261b;   --los-bad-soft:#fdeceb;      /* 失敗・期限切れ */
  --los-memo:#5f4700;  --los-memo-soft:#fff8d6; --los-memo-line:#d9bd55;  /* 社内メモ */
  --los-staff-soft:#f4f2ff;   /* 担当者の吹き出し */
  --los-r-ctl:10px; --los-r-panel:14px; --los-r-bubble:18px;
  --los-shadow-sheet:0 -10px 40px rgba(20,24,40,.18);
  --los-shadow-pop:0 8px 30px rgba(20,24,40,.14);
  --los-font:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP",system-ui,-apple-system,sans-serif;
  --los-fs-xs:12px; --los-fs-s:13px; --los-fs-m:15px; --los-fs-b:16px; --los-fs-l:18px; --los-fs-xl:20px;
  font-family:var(--los-font);
  color:var(--los-ink);
  line-height:1.65;
  -webkit-text-size-adjust:100%;
}
.los *,.los *::before,.los *::after{box-sizing:border-box}
.los [hidden]{display:none!important}
.los button,.los input,.los textarea,.los select{font:inherit;color:inherit}
.los :focus-visible{outline:3px solid color-mix(in srgb,var(--los-brand) 55%,transparent);outline-offset:2px;border-radius:6px}
.los .los-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── ボタン ───────────────────────────── */
.los .los-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;
  border-radius:var(--los-r-ctl);border:1px solid var(--los-line-strong);background:var(--los-surface);color:var(--los-ink);
  font-size:var(--los-fs-m);font-weight:600;line-height:1.3;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,transform .05s}
.los .los-btn:hover{border-color:var(--los-ink-3)}
.los .los-btn:active{transform:translateY(1px)}
.los .los-btn--primary{background:var(--los-brand);border-color:var(--los-brand);color:var(--los-brand-ink)}
.los .los-btn--primary:hover{background:var(--los-brand-strong);border-color:var(--los-brand-strong)}
.los .los-btn--quiet{border-color:transparent;background:transparent;color:var(--los-ink-2);padding-inline:10px}
.los .los-btn--quiet:hover{background:var(--los-canvas);border-color:transparent}
.los .los-btn--line{background:#06c755;border-color:#06c755;color:#fff}
.los .los-btn--memo{background:#806300;border-color:#806300;color:#fff}
.los .los-btn--danger{background:var(--los-bad);border-color:var(--los-bad);color:#fff}
.los .los-btn--block{width:100%}
.los .los-btn--sm{min-height:36px;padding:6px 12px;font-size:var(--los-fs-s)}
.los .los-btn:disabled,.los .los-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.los .los-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:0;
  background:transparent;color:var(--los-ink-2);cursor:pointer;flex:none}
.los .los-iconbtn:hover{background:var(--los-canvas)}

/* ── 入力 ───────────────────────────── */
.los .los-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.los .los-label{font-size:var(--los-fs-s);font-weight:700;color:var(--los-ink-2)}
.los .los-hint{font-size:var(--los-fs-s);color:var(--los-ink-3)}
.los .los-input,.los .los-select,.los .los-textarea{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--los-line-strong);
  border-radius:var(--los-r-ctl);background:var(--los-surface);font-size:16px;min-width:0}
.los .los-input:focus,.los .los-select:focus,.los .los-textarea:focus{outline:none;border-color:var(--los-brand);box-shadow:0 0 0 3px var(--los-brand-soft)}
.los .los-input[aria-invalid="true"]{border-color:var(--los-bad)}
/* 入力欄＋ボタン。狭い幅では縦に並べる（ボタンの縦書き・入力欄の縮みを起こさない） */
.los .los-inline{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.los .los-inline > .los-input{flex:1 1 220px}
.los .los-inline > .los-btn{flex:0 0 auto}
@media (max-width:420px){.los .los-inline > .los-btn{flex:1 1 100%}}

/* ── 状態の表示（色だけに頼らない: いつもアイコン＋文字） ─────── */
.los .los-pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:var(--los-fs-xs);
  font-weight:700;line-height:1.7;white-space:nowrap;background:var(--los-canvas);color:var(--los-ink-2)}
.los .los-pill--wait{background:var(--los-wait-soft);color:var(--los-wait)}
.los .los-pill--brand{background:var(--los-brand-soft);color:var(--los-brand-strong)}
.los .los-pill--ok{background:var(--los-ok-soft);color:var(--los-ok)}
.los .los-pill--bad{background:var(--los-bad-soft);color:var(--los-bad)}
.los .los-pill i{font-size:11px}
.los .los-note{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--los-r-ctl);font-size:var(--los-fs-s);
  background:var(--los-canvas);color:var(--los-ink-2)}
.los .los-note--wait{background:var(--los-wait-soft);color:var(--los-wait)}
.los .los-note--bad{background:var(--los-bad-soft);color:var(--los-bad)}
.los .los-note--ok{background:var(--los-ok-soft);color:var(--los-ok)}
.los .los-note i{margin-top:3px}

/* ── 吹き出し ───────────────────────────── */
.los .los-msgs{display:flex;flex-direction:column;gap:14px}
.los .los-msg{display:flex;flex-direction:column;max-width:min(560px,86%);min-width:0}
.los .los-msg__meta{font-size:var(--los-fs-xs);color:var(--los-ink-3);margin:0 4px 3px;display:flex;gap:6px;flex-wrap:wrap}
.los .los-msg__body{padding:10px 14px;border-radius:var(--los-r-bubble);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
  font-size:var(--los-fs-b);line-height:1.7}
.los .los-msg--customer{align-self:flex-end;align-items:flex-end}
.los .los-msg--customer .los-msg__body{background:var(--los-brand);color:#fff;border-bottom-right-radius:6px}
.los .los-msg--ai .los-msg__body{background:var(--los-canvas);color:var(--los-ink);border-bottom-left-radius:6px}
.los .los-msg--staff .los-msg__body{background:var(--los-staff-soft);color:var(--los-ink);border:1px solid #dcd8fb;border-bottom-left-radius:6px}
.los .los-msg--memo{align-self:stretch;max-width:100%}
.los .los-msg--memo .los-msg__body{background:var(--los-memo-soft);color:var(--los-memo);border:1px dashed var(--los-memo-line);border-radius:12px;font-size:var(--los-fs-m)}
.los .los-msg--pending .los-msg__body{opacity:.65}
.los .los-msg--failed .los-msg__body{outline:2px solid var(--los-bad);outline-offset:2px}
.los .los-event{align-self:center;display:flex;align-items:center;gap:8px;font-size:var(--los-fs-s);color:var(--los-ink-2);
  background:var(--los-raise);border:1px solid var(--los-line);padding:6px 12px;border-radius:999px;max-width:100%;text-align:center}
.los .los-event--ok{color:var(--los-ok);background:var(--los-ok-soft);border-color:transparent}
.los .los-daysep{align-self:center;font-size:var(--los-fs-xs);color:var(--los-ink-3);padding:2px 10px}
.los .los-anchor{scroll-margin-top:120px}
.los .los-flash .los-msg__body{box-shadow:0 0 0 3px #fbbf24}

/* ── シート（スマホは下から、PC は右の小窓） ─────────────── */
.los .los-backdrop{position:fixed;inset:0;background:rgba(18,22,36,.38);z-index:60}
.los .los-sheet{position:fixed;z-index:61;background:var(--los-surface);display:flex;flex-direction:column;max-height:88dvh;
  left:0;right:0;bottom:0;border-radius:18px 18px 0 0;box-shadow:var(--los-shadow-sheet);
  padding:6px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.los .los-sheet__grip{width:40px;height:4px;border-radius:4px;background:var(--los-line-strong);margin:6px auto 4px}
.los .los-sheet__head{display:flex;align-items:center;gap:8px;padding:6px 0 10px}
.los .los-sheet__head h2{font-size:var(--los-fs-l);margin:0;flex:1;min-width:0}
.los .los-sheet__body{overflow:auto;display:flex;flex-direction:column;gap:18px;padding-bottom:4px}
@media (min-width:760px){
  .los .los-sheet{left:auto;right:24px;bottom:24px;top:auto;width:420px;border-radius:var(--los-r-panel);box-shadow:var(--los-shadow-pop);max-height:80vh}
  .los .los-sheet__grip{display:none}
}
.los .los-sec{display:flex;flex-direction:column;gap:10px}
.los .los-sec + .los-sec{border-top:1px solid var(--los-line);padding-top:16px}
.los .los-sec__title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--los-fs-b)}
.los .los-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.los .los-steps li{display:flex;gap:10px;align-items:flex-start;font-size:var(--los-fs-m)}
.los .los-steps .los-dot{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;border:1px solid var(--los-line-strong);color:var(--los-ink-3);margin-top:2px}
.los .los-steps .is-done .los-dot{background:var(--los-ok);border-color:var(--los-ok);color:#fff}
.los .los-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.los .los-switch input{width:44px;height:26px;accent-color:var(--los-brand)}

/* ── 方法を選ぶ・状態の行（2026-10-21 受け取り方の仕上げ） ───────────── */
.los .los-choice{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:12px 14px;border:1px solid var(--los-line-strong);
  border-radius:var(--los-r-panel);background:var(--los-surface);text-align:left;cursor:pointer;color:var(--los-ink)}
.los .los-choice:hover{border-color:var(--los-brand);background:var(--los-raise)}
.los .los-choice__icon{flex:none;width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--los-canvas);font-size:18px}
.los .los-choice__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.los .los-choice__title{font-weight:700;font-size:var(--los-fs-b)}
.los .los-choice__hint{font-size:var(--los-fs-s);color:var(--los-ink-3)}
.los .los-choice > .fa-chevron-right{color:var(--los-ink-3);flex:none}
.los .los-state{display:flex;align-items:center;gap:10px;min-height:48px;flex-wrap:wrap}
.los .los-state__label{flex:1;min-width:0;display:flex;flex-direction:column}
.los .los-state__label b{font-weight:700}
.los .los-state__label span{font-size:var(--los-fs-s);color:var(--los-ink-3);overflow-wrap:anywhere}
.los .los-step{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:var(--los-r-panel);background:var(--los-raise);border:1px solid var(--los-line)}
.los .los-step__k{font-size:var(--los-fs-xs);font-weight:700;color:var(--los-ink-3);letter-spacing:.02em}
.los .los-step__t{font-weight:700;font-size:var(--los-fs-b);margin:0}
.los .los-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.los .los-saving{font-size:var(--los-fs-s);color:var(--los-ink-3)}
.los .los-err{font-size:var(--los-fs-s);color:var(--los-bad)}
.los .los-more > summary{list-style:none;cursor:pointer;color:var(--los-brand-strong);font-size:var(--los-fs-s);font-weight:700;min-height:40px;display:flex;align-items:center;gap:6px}
.los .los-more > summary::-webkit-details-marker{display:none}
.los .los-msg__body a{color:inherit;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}

/* ── トースト・接続の帯 ───────────────────── */
.los .los-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:70;
  background:#1f2433;color:#fff;padding:10px 16px;border-radius:12px;font-size:var(--los-fs-s);max-width:calc(100% - 32px);box-shadow:var(--los-shadow-pop)}
.los .los-netbar{position:sticky;top:0;z-index:40;background:var(--los-bad-soft);color:var(--los-bad);font-size:var(--los-fs-s);
  padding:8px 16px;display:flex;gap:8px;align-items:center;justify-content:center}

/* ── メニュー（「その他」） ───────────────────── */
.los .los-menu{position:relative}
.los .los-menu__list{position:absolute;right:0;top:calc(100% + 6px);z-index:50;min-width:220px;background:var(--los-surface);
  border:1px solid var(--los-line);border-radius:12px;box-shadow:var(--los-shadow-pop);padding:6px;display:flex;flex-direction:column}
.los .los-menu__list button,.los .los-menu__list a{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:0;background:none;
  border-radius:8px;text-align:left;font-size:var(--los-fs-m);color:var(--los-ink);text-decoration:none;cursor:pointer}
.los .los-menu__list button:hover,.los .los-menu__list a:hover{background:var(--los-canvas)}
.los .los-menu__list .is-danger{color:var(--los-bad)}

@media (prefers-reduced-motion:reduce){.los *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@keyframes los-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.los .los-anim-in{animation:los-in .18s ease-out}