/* タスク表の右上の 求人通知・ネット予約通知（hlnotice.js。2026-09-30 利用者「… 求人通知 ネット予約通知 と同じ機能を タスク表右上に
   配置して 通知は表示する 通知は展開されるが 閉じる事もできるように …」）。行の見た目は業務管理ツールの通知の箱（dashboard.html の
   .rc-*）を写して、名前を hn- に替えた（リモコンの rc- とぶつけない）。色は自社マインド＋の変数に寄せ、LINE の緑・メールの青は
   業務管理ツールと同じ色のまま */
.hn {
  --hn-green: #1f8a5b; --hn-green-dark: #146b46; --hn-green-soft: #e3f4ea; --hn-green-border: #9fd4b6;
  --hn-blue: #1f4d6e; --hn-blue-soft: #e2eef8; --hn-blue-border: #b9d4e9;
  --hn-pink: var(--vermil, #d6336c);
  position: relative; display: flex; align-items: center;
}
/* 右上の札（求人・ネット予約）。押すと窓を開け閉めする */
.hn-chips { display: flex; gap: 6px; }
.hn-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.hn-chip:hover { border-color: var(--faint); }
.hn-chip.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.hn-chip-count { font-size: 11px; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
.hn-chip.has-new .hn-chip-count {
  color: #fff; background: var(--hn-pink); border-radius: 999px; padding: 0 7px; line-height: 17px;
}
.hn-chip.is-off { color: var(--faint); }
.hn-chip.is-off .hn-chip-count { color: var(--faint); }
/* 開いた窓。札の下に右寄せで重ねる。高さの上限は hlnotice.js が右下のリモコンの丸に掛からないよう決める（下は予備） */
.hn-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  width: 520px; max-width: calc(100vw - 24px); max-height: calc(100vh - 180px); overflow-y: auto;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .18); padding: 10px 14px 12px;
}
.hn-panel[hidden] { display: none; }
.hn-panel-head { display: flex; align-items: center; gap: 10px; }
.hn-panel-title { font-size: 14px; font-weight: 700; }
.hn-badge { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.hn-close {
  margin-left: auto; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line);
  color: var(--dim); font-size: 16px; line-height: 1;
  /* ボタンの初めの左右の余白（6px ずつ）で「×」が枠の右へはみ出していた（hnclose-2026-10-06 利用者「✖がずれてる」）。余白を消して真ん中に */
  padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.hn-close:hover { color: var(--text); border-color: var(--faint); }
.hn-box[hidden] { display: none; }

/* ここから下は業務管理ツールの .rc-* と同じ形（名前だけ hn-） */
.hn-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; padding-bottom: 8px;
            border-bottom: 1px solid var(--line); color: var(--dim); font-size: 12px; font-weight: 700; }
.hn-tool { border: 1px solid var(--line); border-radius: 999px; background: var(--panel3); color: var(--dim);
           padding: 3px 10px; font-size: 12px; font-weight: 700; line-height: 1.2; cursor: pointer; }
.hn-tool[aria-pressed="true"] { border-color: var(--hn-green-border); background: var(--hn-green-soft); color: var(--hn-green-dark); }
.hn-tool-label { display: inline-flex; align-items: center; gap: 4px; }
.hn-select { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); padding: 2px 6px;
             font-size: 12px; font-weight: 600; }
.hn-codes { margin-top: 8px; }
.hn-codes[hidden] { display: none; }
.hn-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; border: 1px solid #ecd5b0;
           border-radius: 12px; background: #fcefdf; padding: 12px 14px; color: #7a4b0f; font-size: 13px; font-weight: 700; }
.hn-code b { font-size: 30px; font-weight: 800; letter-spacing: .18em; font-variant-numeric: tabular-nums; line-height: 1; }
.hn-code-left { color: #8a6a3a; font-size: 12px; font-variant-numeric: tabular-nums; }
.hn-copy { border: 1px solid #ecd5b0; border-radius: 999px; background: #fff; color: #7a4b0f; padding: 4px 12px;
           font-size: 12px; font-weight: 800; cursor: pointer; }
.hn-list { margin-top: 8px; }
.hn-empty { margin: 10px 0; color: var(--dim); font-size: 12px; }
.hn-row { border-top: 1px solid var(--line); padding: 8px 0 14px; }
.hn-row:first-child { border-top: 0; }
.hn-head { display: flex; flex-direction: column; gap: 6px; }
.hn-line { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; }
.hn-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.hn-dot.is-unread { background: var(--hn-pink); }
.hn-kind { flex: 0 0 auto; display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: 999px;
           padding: 3px 9px; font-size: 12px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.hn-kind.is-line { border-color: var(--hn-green-border); background: var(--hn-green-soft); color: var(--hn-green-dark); }
.hn-kind.is-mail { border-color: var(--hn-blue-border); background: var(--hn-blue-soft); color: var(--hn-blue); }
.hn-shop { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 12px;
           font-weight: 700; line-height: 1.2; white-space: nowrap; }
.hn-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text);
           font-size: 14px; font-weight: 700; }
.hn-name.is-pending { color: var(--dim); font-weight: 600; }
.hn-status { flex: 0 0 auto; display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: 999px;
             padding: 2px 8px; font-size: 11px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.hn-status.is-progress { border-color: var(--hn-blue-border); background: var(--hn-blue-soft); color: var(--hn-blue); }
.hn-status.is-done { background: var(--panel3); color: var(--dim); border-color: var(--line); }
/* 自社の通知（hvnotice-2026-10-12）：時間の表から消えた予約・自動で対応済みにした訳 */
.hn-status.is-gone { border-color: var(--hn-pink); color: var(--hn-pink); }
.hn-status.is-auto { background: var(--panel3); color: var(--dim); border-color: var(--line); }
.hn-unread { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; background: var(--hn-pink);
             color: #fff; padding: 0 6px; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hn-time { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.hn-elapsed-label { color: var(--text); font-size: 12px; font-weight: 700; }
.hn-elapsed { color: var(--text); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hn-elapsed.is-waiting { font-weight: 800; }
.hn-when { color: var(--text); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hn-subject { margin: 5px 0 0; color: var(--dim); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.hn-more { width: 100%; margin: 8px 0 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
           color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; }
.hn-more:hover { background: var(--panel3); }
.hn-person { margin: 4px 0 0; }
.hn-booking { margin: 4px 0 0; padding: 6px 8px; border-radius: 8px; background: var(--panel3); }
.hn-booking + .hn-person { margin-top: 5px; }
.hn-fact { display: block; color: var(--text); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.hn-fact b { color: var(--dim); font-weight: 700; margin-right: 7px; }
.hn-booking .hn-fact { font-weight: 700; }
/* ネット予約は値の開始位置を 1 列に揃える（業務管理ツールと同じ。見出しは全角 4 文字ぶん） */
.hn-box.is-reserve .hn-fact { display: grid; grid-template-columns: 4.4em 1fr; column-gap: 10px; align-items: baseline; }
.hn-box.is-reserve .hn-fact b { margin-right: 0; }
.hn-box.is-reserve .hn-person { padding: 0 8px; }
.hn-unanswered { margin: 3px 0 0; color: var(--hn-pink); font-size: 12px; font-weight: 800; line-height: 1.5; }
.hn-msg { margin: 3px 0 0; color: var(--text); font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
          display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.hn-acts { display: flex; flex-wrap: wrap; gap: 6px; }
/* 予約が 2 つ以上の札は、予約ごとに［開く］［読み込み］で 1 行・［チャット］［対応済み］は最後の行（hvactline-2026-10-14 利用者「この表記の場合は 開く 読み込み で1行使う」） */
.hn-actline { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 0 100%; }
.hn-btn { min-height: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); padding: 0 10px;
          font-size: 12px; font-weight: 700; cursor: pointer; }
.hn-btn.is-primary { border-color: var(--hn-green-border); background: var(--hn-green); color: #fff; }
.hn-btn:disabled { opacity: .55; cursor: default; }
/* スタッフ権限の確認中（html.viewing。見るだけ・2026-10-06）は、業務管理ツールの記録を変える行の釦を薄く（押すと行に一言。hlnotice.js の viewingNow） */
html.viewing .hn-btn { opacity: .45; cursor: not-allowed; }
.hn-note { margin: 6px 0 0; color: var(--hn-pink); font-size: 12px; font-weight: 700; }
.hn-note.is-progress { color: var(--dim); font-weight: 600; }
.hn-foot { margin: 8px 0 0; color: var(--dim); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.hn-foot b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.hn-foot .is-down { color: var(--hn-pink); font-weight: 700; }
/* ヘブンのチャット（chatreply-2026-10-12）：ネット予約通知の窓の中。相手の候補・履歴（古い順。店は右・客は左）・入力と送信 */
.hn-chat { margin: 8px 0 4px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.hn-chat[hidden] { display: none; }
.hn-chat-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.hn-chat-head .hn-close { margin-left: auto; }
.hn-chat-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.hn-chat-pick-label { font-size: 12px; color: var(--dim); }
.hn-chat-more { margin: 6px 0 0; }
.hn-chat-log { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; margin: 6px 0; padding: 4px 2px; }
.hn-chat-day { align-self: center; font-size: 11px; color: var(--dim); }
.hn-chat-msg { max-width: 86%; padding: 6px 9px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.hn-chat-msg.is-guest { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); }
.hn-chat-msg.is-shop { align-self: flex-end; background: var(--hn-green-soft); border: 1px solid var(--hn-green-border); }
.hn-chat-msg.is-system { align-self: center; max-width: 100%; padding: 4px 9px; border-radius: 4px; background: var(--panel); color: var(--dim); font-size: 11.5px; text-align: center; }
.hn-chat-msg.is-system .hn-chat-meta { text-align: center; }
.hn-chat-meta { display: block; margin-top: 2px; font-size: 10.5px; color: var(--dim); text-align: right; white-space: nowrap; }
/* 送信中の吹き出し（ヘブンで確かめる前）と、ほかの人の送れなかった返信の一言（chatlive-2026-10-19） */
.hn-chat-msg.is-sending { opacity: .62; border-style: dashed; }
.hn-chat-failed { align-self: flex-end; margin: 0; font-size: 11.5px; color: var(--dim); }
.hn-chat-form { display: flex; gap: 6px; align-items: flex-end; }
.hn-chat-text { flex: 1 1 auto; min-height: 44px; max-height: 160px; resize: vertical; font: inherit; font-size: 12.5px; line-height: 1.5;
                padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); }
.hn-chat-tools { display: flex; gap: 6px; margin: 6px 0 0; }
.hn-chat-tools .hn-chat-ai { min-height: 26px; padding: 0 9px; font-size: 12px; }
.hn-chat-note { margin: 4px 0 0; min-height: 1.2em; font-size: 12px; font-weight: 700; color: var(--hn-pink); }
.hn-chat-note.is-ok { color: var(--hn-green-dark); }
/* 会員ごとの札（hvcard-2026-10-13）：見た目は前の 1 行と同じ。予約の箱は行ごと（2 つ以上なら釦は箱の右）、チャットは予約の箱と同じ灰色の箱、
   未読の数は［チャット］の釦の右上の赤い丸（利用者「…の部分と同じような背景でチャットも表示 チャットのチップ右上に①をだせばよい」） */
.hn-card.is-done { opacity: .75; }
.hn-cardrsv { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0; }
.hn-cardrsv + .hn-cardrsv { margin-top: 10px; }
.hn-cardrsv .hn-booking { margin: 0; }
.hn-cardrsv .hn-person { margin-top: 4px; }
.hn-cardrsv .hn-msg { padding: 0 8px; }
.hn-cardrsv.is-gone .hn-booking { background: #fff1f2; }
.hn-cardrsv.is-done { opacity: .6; }
.hn-cardrsv-body { flex: 1 1 auto; min-width: 0; }
.hn-cardrsv .hn-acts { flex: 0 0 auto; }
.hn-cardrsv-notes { margin: 2px 0 0; padding: 0 8px; color: var(--dim); font-size: 12px; line-height: 1.5; }
/* 読み込み中（対応中）の予約の一言（hvsync-2026-10-18。タスク表か通知の窓で伝票の窓を開いた・まだ保存していない） */
.hn-cardrsv-notes.is-reading { color: var(--hn-blue); font-weight: 600; }
/* 読み込んだ時点で対応済み・伝票は未保存（readdone-2026-10-19 利用者の答え「分ける」）：入れ忘れに気づけるよう、保存してつないだ「読み込み済み」より強く */
.hn-cardrsv-notes.is-read { color: var(--hn-blue); font-weight: 600; }
.hn-cardchat { margin: 6px 0 0; cursor: pointer; }
.hn-cardchat .hn-booking { margin: 0; }
.hn-cardchat .hn-chatfacts .hn-fact { font-weight: 700; }
.hn-cardchat .hn-status { margin: 4px 0 0 8px; }
.hn-cardchat.is-done { opacity: .6; cursor: default; }
.hn-chatbtn { position: relative; }
.hn-btn-badge { position: absolute; top: -8px; right: -8px; display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
                border-radius: 999px; background: var(--hn-pink); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
                box-shadow: 0 0 0 2px var(--panel); }
/* マウスで押したときの焦点の枠は出さない（mousefocus-2026-10-12 利用者「マウスフォーカスの表示は不要」）。キーボードで動かすとき（focus-visible）だけ出す */
.hn button:focus:not(:focus-visible), .hn select:focus:not(:focus-visible), .hn textarea:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* Content-sized windows share a width and an ordered column below the reservation chip. */
#own-notice-stack { position: fixed; z-index: 50; display: flex; flex-direction: column; align-items: stretch;
  gap: 8px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  filter: drop-shadow(0 8px 12px rgba(16,24,40,.16)); }
#own-notice-stack[hidden] { display: none; }
#own-notice-stack > .hn-panel, #own-notice-stack > .mc-panel {
  position: relative; inset: auto; z-index: auto; box-sizing: border-box; width: 100%; max-width: none;
  height: auto; min-height: 0; max-height: var(--notice-card-max-height, calc(100vh - 120px)); flex: 0 1 auto;
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--text); box-shadow: none; margin: 0; padding: 0;
}
#own-notice-stack > [hidden] { display: none; }
#own-notice-stack .hn-panel-head { flex: 0 0 auto; min-height: 26px; padding: 10px 14px 2px; }
#own-notice-stack .hn-panel > .hn-box { flex: 1 1 auto; min-height: 40px; padding: 0 14px 12px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#own-notice-stack .hn-tools { position: static; flex: 0 0 auto; margin: 0 14px; padding-bottom: 8px; background: var(--panel); }
#own-notice-stack .hn-msg { display: block; -webkit-line-clamp: unset; overflow: visible; }