/*
 * 直近スケジュール（横スクロールタイムライン）＆ 「予定の種類について」ボトムシート
 * ※ 占い師詳細ページのみ適用（色例外）
 */

.teller-schedule-short { background:#fff; padding:20px 0; display:flex; flex-direction:column; gap:20px; }
.teller-schedule-short__legend-trigger { padding:0 16px; display:flex; align-items:center; gap:4px; font-size:13px; font-weight:500; color:#1976d2; cursor:pointer; }
.teller-schedule-short__chips { display:flex; gap:8px; padding:0 16px; background:#fff; z-index:50; overflow-x:auto; }
.teller-schedule-short__chips::-webkit-scrollbar { display:none; }
.teller-schedule-short__chips .chip-active   { display:flex; align-items:center; padding:4px 10px; border-radius:100px; border:1px solid #bdbdbd; background:rgba(0,0,0,0.12); font-size:13px; font-weight:500; color:rgba(0,0,0,0.87); cursor:pointer; white-space:nowrap; }
.teller-schedule-short__chips .chip-normal   { display:flex; align-items:center; padding:4px 10px; border-radius:100px; border:1px solid #bdbdbd; background:#fff; font-size:13px; color:rgba(0,0,0,0.87); cursor:pointer; white-space:nowrap; }
.teller-schedule-short__chips .chip-disabled { display:flex; align-items:center; padding:4px 10px; border-radius:100px; border:1px solid #e0e0e0; background:#f5f5f5; font-size:13px; color:rgba(0,0,0,0.3); cursor:default; white-space:nowrap; }

.teller-schedule-short__wrapper { overflow-x:auto; padding-left:16px; }
.teller-schedule-short__wrapper::-webkit-scrollbar { display:none; }
.teller-schedule-short__cells { display:flex; align-items:stretch; }

/* Grid: 縦線は cell-col、横線は cell-time と各セル */
.cell-col { display:flex; flex-direction:column; width:60px; flex-shrink:0; border-right:1px solid rgba(0,0,0,0.08); }
.cell-col:first-child { border-left:1px solid rgba(0,0,0,0.08); }

.cell-time { height:36px; display:flex; align-items:center; justify-content:center; flex-direction:column; font-size:12px; font-weight:500; color:#616161; white-space:nowrap; line-height:1; flex-shrink:0; border-top:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1); }
.cell-time .sub { font-size:12px; color:#9e9e9e; line-height:1.2; }

/* 共通セル高 */
.cell-imasugu, .cell-cont-imasugu,
.cell-sokuji,  .cell-cont-sokuji,
.cell-request, .cell-cont-request,
.cell-machimachi, .cell-cont-machi,
.cell-reserved,
.cell-unavail { height:56px; flex-shrink:0; border-bottom:1px solid rgba(0,0,0,0.1); }

/* シフト外: 無地の空セル（バーも文字も出さない） */
.cell-unavail { display:flex; align-items:center; justify-content:center; }
/* 予約済み: 過去セルと同じグレー塗り + 薄文字「予約済み」。クリック不可。 */
.cell-reserved { display:flex; align-items:center; justify-content:center; background:#e0e0e0; font-size:12px; color:rgba(0,0,0,0.12); cursor:default; }

.cell-imasugu, .cell-cont-imasugu,
.cell-sokuji,  .cell-cont-sokuji,
.cell-request, .cell-cont-request,
.cell-machimachi, .cell-cont-machi { cursor:pointer; }

/* 今すぐ (green) */
.cell-imasugu, .cell-cont-imasugu { display:flex; flex-direction:column; }
.cell-imasugu .cb, .cell-cont-imasugu .cb { background:#2fb605; height:16px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:#fff; flex-shrink:0; }
.cell-imasugu .cc, .cell-cont-imasugu .cc { flex:1; background:#d0ffcf; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:#2fb605; }
.cell-cont-imasugu .cc { justify-content:flex-start; }

/* 即時 (blue) */
.cell-sokuji, .cell-cont-sokuji { display:flex; flex-direction:column; }
.cell-sokuji .cb, .cell-cont-sokuji .cb { background:#1976d2; height:16px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:#fff; flex-shrink:0; }
.cell-sokuji .cc, .cell-cont-sokuji .cc { flex:1; background:#e3f2fd; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:#1976d2; }

/* リク (dark blue) */
.cell-request, .cell-cont-request { display:flex; flex-direction:column; }
.cell-request .cb, .cell-cont-request .cb { background:#1d61a5; height:16px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:#fff; flex-shrink:0; }
.cell-request .cc, .cell-cont-request .cc { flex:1; background:#e3f2fd; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:#1976d2; }

/* 順番待ち (purple) */
.cell-machimachi, .cell-cont-machi { display:flex; flex-direction:column; }
.cell-machimachi .cb, .cell-cont-machi .cb { background:#9c27b0; height:16px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:#fff; flex-shrink:0; }
.cell-machimachi .cc, .cell-cont-machi .cc { flex:1; background:#ede7f6; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:#9c27b0; line-height:1.3; }

/* 待機予定 (dashed) */
.cell-taiki       { height:56px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:#994E7C; border-bottom:1px solid rgba(0,0,0,0.1); position:relative; background:rgba(219,191,208,0.4); }
.cell-taiki::before { content:''; position:absolute; inset:4px 3px; border:1px dashed rgba(0,0,0,0.18); border-radius:3px; }
.cell-taiki.start::before { right:0; border-right:none; border-radius:3px 0 0 3px; }
.cell-cont-taiki  { height:56px; flex-shrink:0; border-bottom:1px solid rgba(0,0,0,0.1); position:relative; background:rgba(219,191,208,0.4); }
.cell-cont-taiki::before { content:''; position:absolute; top:4px; bottom:4px; left:0; right:0; border-top:1px dashed rgba(0,0,0,0.18); border-bottom:1px dashed rgba(0,0,0,0.18); }
.cell-cont-taiki.end::before { right:3px; border-right:1px dashed rgba(0,0,0,0.18); border-radius:0 3px 3px 0; }

/* 「直近2週間のスケジュールを見る」ボタン */
.teller-schedule-short__btn { margin:0 16px; padding:11px 22px; border:1px solid rgba(0,0,0,0.5); border-radius:4px; background:#fff; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; text-decoration:none; color:inherit; }
.teller-schedule-short__btn span { font-size:15px; font-weight:500; color:rgba(0,0,0,0.87); letter-spacing:0.46px; }

/* 吹き出しメッセージ */
.teller-schedule-short__message { display:flex; gap:8px; padding:0 16px; align-items:flex-start; }
.teller-schedule-short__message .message-bubble { flex:1; background:#f5f5f5; border-radius:0 8px 8px 8px; padding:12px; }
.teller-schedule-short__message .message-bubble p { font-size:14px; color:#333; line-height:1.7; margin:0; }

/* ── 予定の種類について ボトムシート ── */
.bs-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:300; }
.bs-overlay.is-open { display:block; }
.bs-sheet { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); width:calc(100% - 32px); max-width:400px; max-height:70vh; background:#fff; border-radius:16px; z-index:301; display:none; flex-direction:column; overflow:hidden; }
.bs-sheet.is-open { display:flex; animation:bs-pop-in 0.2s ease-out; }
@keyframes bs-pop-in { from { opacity:0; transform:translate(-50%, -50%) scale(0.95); } to { opacity:1; transform:translate(-50%, -50%) scale(1); } }
.bs-header { display:flex; align-items:center; padding:16px 20px 12px; position:relative; }
.bs-close  { position:absolute; left:20px; top:50%; transform:translateY(-50%); background:none; border:none; padding:0; cursor:pointer; display:flex; align-items:center; }
.bs-title  { flex:1; text-align:center; font-size:16px; font-weight:500; }
.bs-body   { padding:0 20px 24px; overflow-y:auto; display:flex; flex-direction:column; gap:16px; }
.bs-item   { display:flex; gap:12px; align-items:flex-start; }
.bs-item-sample { width:44px; height:36px; border-radius:4px; flex-shrink:0; display:flex; flex-direction:column; overflow:hidden; }
.bs-item-sample .bs-bar { height:10px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:#fff; }
.bs-item-sample .bs-body-color { flex:1; }
.bs-item-sample.dashed { border:1px dashed rgba(0,0,0,0.18); border-radius:4px; background:#fff; }
.bs-item-sample.reserved { background:#f0f0f0; display:flex; align-items:center; justify-content:center; font-size:12px; color:rgba(0,0,0,0.3); }
.bs-item-info  { flex:1; }
.bs-item-name  { font-size:14px; font-weight:500; color:rgba(0,0,0,0.87); margin-bottom:2px; }
.bs-item-desc  { font-size:12px; color:rgba(0,0,0,0.6); line-height:1.5; }