/* 合格図の下部酒場。会話ログは複数行見える高さを確保する。 */
.tavern.card { display:grid; grid-template-columns:80px minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:6px 20px; height:100%; min-height:0; margin:0; padding:12px 22px; background:#192029; border:0; border-radius:0; box-shadow:none; }
.tavern .tavern-head { grid-column:1; grid-row:1/3; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:4px; margin:0; }
.tavern .tavern-head .fac-ico { display:none; }
.tavern .tavern-head .name { font:16px/1.5 serif; color:#dcc495; }
.tavern .tavern-head .meta { font-size:14px; }
.tavern .chat-list { grid-column:2; grid-row:1; min-height:0; max-height:none; overflow-y:auto; margin:0; gap:0; }
.tavern .chat-msg { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:baseline; gap:6px; padding:1px 0; min-height:19px; border:0; border-radius:0; background:none; }
.tavern .chat-name { max-width:8em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:#dcc495; }
.tavern .chat-time { font-size:14px; color:#969b9e; }
.tavern .chat-body { font-size:14px; line-height:1.4; color:#c3c2bb; margin:0; min-width:0; overflow-wrap:anywhere; }
.tavern .chat-empty { font-size:14px; margin:0; padding:4px 0; }
.tavern .chat-form { grid-column:2; grid-row:2; display:flex; gap:8px; align-items:end; padding:0; margin:0; border:0; }
.tavern .chat-input { flex:1; min-width:0; width:100%; height:32px; min-height:32px; max-height:60px; padding:6px 10px; border:1px solid #555b5d; background:#121a23; border-radius:0; font-size:14px; resize:vertical; }
.tavern .chat-form-actions { display:flex; align-items:center; gap:6px; }
.tavern .chat-count { display:none; }
.tavern .chat-send { padding:5px 12px; min-height:32px; font-size:14px; border-radius:0; }
@media(max-width:700px) { .tavern.card { padding:9px 12px; grid-template-columns:40px minmax(0,1fr); gap:6px 10px; } .tavern .tavern-head .name { font-size:14px; } .tavern .tavern-head .meta { display:none; } .tavern .chat-name { max-width:5em; font-size:14px; } .tavern .chat-msg { gap:4px; } }
/* 酒場の上端そのものを開閉操作にする。入力中の文章はDOMごと保持。 */
.side { flex-direction:column; }
.side.is-collapsed { flex-basis:30px; height:30px; }
.tavern-toggle { flex:0 0 26px; width:100%; min-height:26px; padding:0; border:0; border-radius:0; background:#26303b; color:#d7bd85; line-height:26px; font-size:18px; box-shadow:none; cursor:ns-resize; touch-action:none; user-select:none; }
.tavern-toggle:hover { background:#344150; }
.side.is-collapsed .tavern-toggle { flex-basis:28px; line-height:28px; }
.tavern .chat-msg { grid-template-columns:auto auto minmax(0,1fr); flex-shrink:0; }
.tavern.card { height:auto; }
.chat-report-choice { display:grid; grid-template-columns:1fr auto; gap:5px 12px; width:100%; text-align:left; padding:12px; margin:8px 0; }
.chat-report-choice span { grid-column:1/-1; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-report-choice small { color:var(--text-dim); }
.side:not(.is-collapsed) { flex-basis:min(var(--tavern-height), max(150px, calc(100dvh - 280px))); height:min(var(--tavern-height), max(150px, calc(100dvh - 280px))); }
.tavern .chat-body,.tavern .chat-input,.tavern .chat-send { font-size:16px; }
.tavern .chat-input,.tavern .chat-send { min-height:40px; }
.tavern .chat-msg { min-height:26px; }
@media(max-width:700px) {
 .tavern.card { grid-template-columns:minmax(0,1fr); }
 .tavern .tavern-head { display:none; }
 .tavern .chat-list { grid-column:1; grid-row:1; }
 .tavern .chat-form { grid-column:1; grid-row:2; }
 .tavern .chat-msg { grid-template-columns:auto 1fr; }
 .tavern .chat-body { grid-column:1/-1; }
}

/* 行ごとに列幅を変えず、名前・時刻・本文の開始位置をそろえる。 */
.tavern .chat-msg { grid-template-columns:9em 6em minmax(0,1fr); align-items:center; gap:10px; min-height:30px; }
.tavern .chat-name { max-width:none; min-width:0; }
.tavern .chat-time { white-space:nowrap; }
.tavern button.chat-body { display:block; grid-column:auto; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal; height:30px; min-height:30px; padding:2px 4px; border:0; border-radius:2px; background:transparent; box-shadow:none; font-weight:400; }
.tavern button.chat-body:hover { color:#fff1d4; background:#ffffff09; }
.tavern button.chat-body:focus-visible { outline:2px solid #d9b86f; outline-offset:-2px; }
.chat-full-message { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
@media(max-width:700px) {
 .tavern .chat-msg { grid-template-columns:5em 5em minmax(0,1fr); gap:6px; }
 .tavern .chat-time { font-size:12px; }
}

/* 9/22: 下部の広さを保ち、話題ごとのタブと任意の共有を置く。 */
.tavern.card { grid-template-rows:auto minmax(0,1fr) auto; }
.tavern .tavern-head { grid-row:1/4; }
.tavern .chat-tabs { grid-column:2; grid-row:1; display:flex; gap:6px; overflow-x:auto; border-bottom:1px solid #58605d; }
.chat-tabs button { white-space:nowrap; flex-shrink:0; border:0; border-radius:0; background:transparent; color:#afb9c1; padding:5px 12px; min-height:36px; }
.chat-tabs button.is-active { color:#f0d095; border-bottom:2px solid #dbb979; background:#dbb97912; }
.tavern .chat-list { grid-row:2; }
.tavern .chat-form { grid-row:3; }
.tavern .chat-content { min-width:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tavern .chat-content .chat-body { flex:0 1 auto; max-width:100%; }
.tavern .chat-share-chip { flex:0 1 auto; max-width:100%; border:1px solid #a3824c; color:#efd099; background:#a3824c15; border-radius:4px; padding:3px 9px; min-height:28px; font-size:14px; text-align:left; overflow-wrap:anywhere; }
.chat-share-details { max-height:45dvh; overflow:auto; margin:10px 0; }
.chat-shared-item { padding:12px; margin:8px 0; }
.chat-shared-item .tag { margin-left:8px; }
.chat-share-action { white-space:nowrap; }
.bounty-bag-label { background:#622b28; color:#f1c1a2; border:1px solid #b37c61; padding:8px 10px; font-size:14px; }
.expedition-bag.has-bounty-loot { border-color:#b37c61; box-shadow:inset 0 0 24px #ad4c251a; }
@media(max-width:700px) {
 .tavern .chat-tabs { grid-column:1; }
 .tavern .chat-msg { grid-template-columns:4em 4em minmax(0,1fr); }
 .chat-tabs button { padding:5px 10px; }
 .tavern .chat-content { gap:3px; }
}

/* 発言の右端。反応なしの行には小さい追加ボタンだけを置く。 */
.tavern .chat-msg { grid-template-columns:9em 6em minmax(0,1fr) auto; }
.tavern .chat-content { flex-wrap:nowrap; overflow:hidden; }
.tavern .chat-share-chip { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-reactions { display:flex; align-items:center; justify-content:flex-end; gap:4px; white-space:nowrap; }
.chat-reaction, .chat-reaction-add { display:inline-flex; align-items:center; justify-content:center; gap:3px; min-height:28px; height:28px; min-width:28px; padding:1px 5px; border:1px solid #53514a; border-radius:4px; background:#242a2e; color:#c6c2b4; font-family:inherit; font-size:13px; line-height:1.2; box-shadow:none; }
.chat-reaction-add { border-color:transparent; background:transparent; color:#a49e8e; font-size:20px; }
.chat-reaction:hover, .chat-reaction-add:hover { background:#353a3c; border-color:#9d8c69; }
.chat-reaction[aria-pressed="true"] { background:#494133; border-color:#b69d6c; color:#eddbb9; }
.chat-reaction:focus-visible, .chat-reaction-add:focus-visible { outline:2px solid #dac18d; outline-offset:2px; }
.chat-reaction:disabled { opacity:.6; cursor:wait; }
.chat-reaction-icon, .chat-reaction-icon svg { display:block; width:24px; height:24px; flex:none; }
.chat-reaction-count { font-size:12px; font-variant-numeric:tabular-nums; }
.chat-reaction-more { display:none; }
@media(max-width:700px) {
  .tavern .chat-msg { grid-template-columns:3.5em 3em minmax(0,1fr) auto; gap:3px; }
  .tavern .chat-time { font-size:11px; }
  .chat-reactions { gap:2px; }
  .chat-reactions > .chat-reaction:not(:first-child) { display:none; }
  .chat-reaction-more { display:inline; font-size:10px; }
  .chat-reactions .chat-reaction { padding:1px 3px; }
}

/* 短い名前の後ろに固定幅の空白を残さない。 */
.tavern .chat-msg { grid-template-columns:fit-content(8em) max-content minmax(0,1fr) auto; column-gap:8px; }
.tavern button.chat-name { max-width:8em; min-width:0; padding:0; min-height:30px; text-align:left; background:transparent; border:0; box-shadow:none; font-weight:400; font-family:inherit; border-radius:0; }
.tavern button.chat-name:hover { color:#fff0cd; text-decoration:underline; }
.player-profile-member { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #ffffff18; }
.player-profile-member .player-profile-info { min-width:0; overflow-wrap:anywhere; }
.player-profile-stats { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:14px; margin-top:5px; }
@media(max-width:700px) { .tavern .chat-msg { grid-template-columns:fit-content(4em) max-content minmax(0,1fr) auto; column-gap:4px; } .tavern button.chat-name { max-width:4em; } }


/* 9/26 承認図: 遠征者の集いと専用エモート。 */
.tavern.card { grid-template-columns:minmax(0,1fr); }
.tavern .tavern-head { grid-column:1; grid-row:1; flex-direction:row; align-items:center; gap:16px; }
.tavern .tavern-head .name { flex:none; white-space:nowrap; }
.tavern .chat-tabs { flex:1; min-width:0; margin:0; }
.tavern .chat-list { grid-column:1; grid-row:2; }
.tavern .chat-form { grid-column:1; grid-row:3; }
.chat-reaction-add { font-size:19px; letter-spacing:-3px; padding-right:7px; color:#b6b1a4; }
.chat-reaction-add[aria-disabled="true"] { opacity:.6; cursor:wait; }
.chat-emote { --emote-size:24px; width:var(--emote-size); height:var(--emote-size); background-image:url('img/chat-emotes.png'); background-repeat:no-repeat; image-rendering:pixelated; }
.chat-reaction-picker[popover] { display:grid; position:fixed; inset:auto; margin:0; width:200px; max-width:calc(100vw - 16px); padding:8px; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; background:#303945; color:#d6d5ca; border:1px solid #82765d; border-radius:8px; box-shadow:0 8px 24px #0008; }
.chat-reaction-picker[popover]:not(:popover-open) { display:none; }
.chat-reaction-picker .chat-reaction { display:grid; place-items:center; width:100%; height:40px; min-height:40px; padding:0; border:1px solid transparent; border-radius:5px; background:transparent; }
.chat-reaction-picker .chat-reaction:hover { background:#ffffff18; }
.chat-reaction-picker .chat-reaction[aria-pressed="true"] { background:#5b5039; border-color:#dac18d; }
.chat-reaction-picker .chat-reaction-icon { --emote-size:32px; width:32px; height:32px; }
@media(max-width:700px) {
  .tavern .tavern-head { display:flex; flex-wrap:wrap; gap:3px; }
  .tavern .tavern-head .name { flex-basis:100%; }
  .tavern .chat-tabs { flex-basis:100%; }
}

/* 9/26 追加合意: 投稿者の顔と名前、控えめな時刻。 */
.tavern .chat-msg { grid-template-columns:36px minmax(0,1fr); grid-template-rows:auto auto; gap:0 8px; padding:5px 0; align-items:center; }
.tavern .chat-avatar { grid-column:1; grid-row:1/3; width:36px; height:36px; min-height:36px; padding:0; border:0; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:#303944; color:#dcc495; box-shadow:none; }
.tavern .chat-avatar .tachie-face { display:block; }
.tavern .chat-avatar.chat-operator-avatar {
  background-image:url('/assets/img/operator-misuman.png');
  background-repeat:no-repeat;
  background-size:190% auto;
  background-position:53% 61%;
}
.tavern .chat-avatar:focus-visible { outline:2px solid #dac18d; outline-offset:2px; }
.tavern .chat-name, .tavern button.chat-name { flex:0 1 auto; min-height:20px; max-width:100%; font-size:13px; }
.tavern .chat-time { flex:none; font-size:10px; color:#8f999e; line-height:20px; }
.tavern .chat-message-head { grid-column:2; grid-row:1; display:flex; align-items:baseline; gap:8px; min-width:0; }
.tavern .chat-message-line { grid-column:2; grid-row:2; display:flex; align-items:center; gap:6px; min-width:0; }
.tavern .chat-message-line .chat-content { flex:0 1 auto; }
.tavern button.chat-body { height:auto; min-height:22px; padding:0; }
.tavern .chat-message-line .chat-reactions { flex:none; justify-content:flex-start; }
.chat-reaction-add { font-size:18px; letter-spacing:normal; padding:1px 5px; color:#8f999e; }
