/* chat-room-refactor.css
   room.php/style.cssを壊しにくくするための差分整理レイヤー。
   既存style.cssは残し、スマホ入力欄・モーダル・お知らせ周りをここで上書きします。 */
:root{
  --chat-send-box-height: 132px;
  --chat-safe-bottom: env(safe-area-inset-bottom, 0px);
  --chat-jump-bottom: calc(var(--chat-send-box-height) + var(--chat-safe-bottom) + 14px);
  --chat-sheet-radius: 22px;
}

.chat-motion-layer{
  position:fixed;
  inset:0;
  z-index:10020;
  overflow:hidden;
  pointer-events:none;
}
.voice-call-icon{
  width:22px;
  height:22px;
  display:block;
  color:currentColor;
}
.chat-motion-spark,
.chat-motion-confetti,
.chat-motion-heart,
.chat-motion-emoji,
.chat-motion-bubble{
  position:absolute;
  display:block;
  pointer-events:none;
  will-change:transform,opacity;
}
.chat-motion-spark{
  left:var(--x);
  top:var(--y);
  width:6px;
  height:6px;
  border-radius:999px;
  background:hsl(var(--hue) 92% 58%);
  box-shadow:0 0 12px hsl(var(--hue) 92% 62%);
  animation:chatFirework 980ms cubic-bezier(.16,.85,.34,1) forwards;
  animation-delay:var(--delay);
}
.chat-motion-confetti{
  left:var(--x);
  top:-18px;
  width:8px;
  height:13px;
  border-radius:2px;
  background:hsl(var(--hue) 88% 58%);
  animation:chatConfetti var(--duration) cubic-bezier(.18,.72,.26,1) forwards;
  animation-delay:var(--delay);
}
.chat-motion-heart{
  left:var(--x);
  bottom:8vh;
  color:#fb3f7f;
  font-size:24px;
  line-height:1;
  text-shadow:0 4px 18px rgba(244,63,94,.28);
  animation:chatHeart var(--duration) ease-out forwards;
  animation-delay:var(--delay);
}
.chat-motion-emoji{
  left:var(--x);
  top:var(--y);
  font-size:24px;
  line-height:1;
  transform-origin:center;
  animation:chatEmojiRise var(--duration) ease-out forwards;
  animation-delay:var(--delay);
  filter:drop-shadow(0 5px 12px rgba(15,23,42,.16));
}
.chat-motion-snow.is-falling{
  top:-9vh;
  animation-name:chatSnowFall;
  animation-timing-function:linear;
}
.chat-motion-star{color:#f59e0b;}
.chat-motion-snow{color:#7dd3fc;}
.chat-motion-sparkle{color:#facc15;}
.chat-motion-cheer{font-size:26px;}
.chat-motion-bubble{
  left:var(--x);
  bottom:-40px;
  width:var(--size);
  height:var(--size);
  border:2px solid rgba(56,189,248,.55);
  border-radius:999px;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0 18%,rgba(125,211,252,.24) 42%,rgba(14,165,233,.08) 100%);
  box-shadow:inset -3px -5px 10px rgba(14,165,233,.14),0 6px 18px rgba(14,165,233,.12);
  animation:chatBubble var(--duration) ease-out forwards;
  animation-delay:var(--delay);
}
@keyframes chatFirework{
  0%{transform:translate(-50%,-50%) scale(.45);opacity:0}
  12%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.12);opacity:0}
}
@keyframes chatConfetti{
  0%{transform:translate3d(0,-20px,0) rotate(0deg);opacity:0}
  8%{opacity:1}
  100%{transform:translate3d(var(--dx),110vh,0) rotate(var(--rot));opacity:0}
}
@keyframes chatHeart{
  0%{transform:translate3d(0,0,0) scale(.4);opacity:0}
  12%{opacity:1}
  100%{transform:translate3d(var(--dx),-54vh,0) scale(var(--scale));opacity:0}
}
@keyframes chatEmojiRise{
  0%{transform:translate3d(0,18px,0) rotate(0deg) scale(.5);opacity:0}
  12%{opacity:1}
  100%{transform:translate3d(var(--dx),-58vh,0) rotate(var(--rot)) scale(var(--scale));opacity:0}
}
@keyframes chatSnowFall{
  0%{transform:translate3d(0,-12vh,0) rotate(0deg) scale(var(--scale));opacity:0}
  10%{opacity:.95}
  88%{opacity:.95}
  100%{transform:translate3d(var(--dx),112vh,0) rotate(var(--rot)) scale(var(--scale));opacity:0}
}
@keyframes chatBubble{
  0%{transform:translate3d(0,0,0) scale(.55);opacity:0}
  14%{opacity:.88}
  100%{transform:translate3d(var(--dx),-92vh,0) scale(1.15);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .chat-motion-layer{display:none!important;}
}

/* ===== 2026-05-22: page-wide attachment paste/drop ===== */
.attachment-drop-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(2px);
  pointer-events:none;
}
.attachment-drop-overlay.is-visible{
  display:flex;
}
.attachment-drop-overlay-inner{
  width:min(480px,calc(100vw - 34px));
  min-height:190px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  border:2px dashed #be123c;
  border-radius:18px;
  background:rgba(255,255,255,.96);
  color:#0f172a;
  box-shadow:0 18px 48px rgba(15,23,42,.24);
  text-align:center;
}
.attachment-drop-overlay-inner b{
  font-size:20px;
  font-weight:1000;
  color:#be123c;
}
.attachment-drop-overlay-inner span{
  color:#64748b;
  font-size:13px;
  font-weight:900;
}
.attachment-drop-overlay.is-error .attachment-drop-overlay-inner{
  border-color:#ef4444;
}
.attachment-drop-overlay.is-error .attachment-drop-overlay-inner b{
  color:#dc2626;
}
.site-boards .attachment-drop-overlay-inner{
  border-color:#2563b8;
}
.site-boards .attachment-drop-overlay-inner b{
  color:#2563b8;
}
@media(max-width:720px){
  .attachment-drop-overlay{
    padding:14px;
  }
  .attachment-drop-overlay-inner{
    min-height:150px;
    border-radius:14px;
  }
  .attachment-drop-overlay-inner b{
    font-size:17px;
  }
}
html.is-modal-open, body.is-modal-open{overflow:hidden; touch-action:none;}
.room-title-line{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;}
.room-title-line h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.room-title-counts{flex:0 0 auto;font-size:.82rem;color:#64748b;}
.participant-box-v2.is-collapsible .participant-toggle{width:100%;border:0;background:transparent;display:flex;gap:8px;align-items:center;justify-content:space-between;text-align:left;padding:0;cursor:pointer;color:inherit;}
.participant-box-v2.is-collapsible .participant-toggle small{font-weight:400;color:#94a3b8;}
.participant-box-v2.is-collapsible:not(.is-open) .participant-chips{display:none!important;}
.participant-box-v2.is-collapsible.is-open .participant-chips{display:flex!important;}
.participant-toggle:after{content:'開く';font-size:12px;color:#94a3b8;border:1px solid #e2e8f0;border-radius:999px;padding:3px 9px;background:#fff;white-space:nowrap;}
.participant-box-v2.is-open .participant-toggle:after{content:'閉じる';}
.sticky-send-box{padding-bottom:calc(10px + var(--chat-safe-bottom));transform:translateZ(0);will-change:transform;}
.sticky-send-box.is-collapsed{padding:6px 12px calc(6px + var(--chat-safe-bottom));}
.sticky-send-box.is-collapsed form{display:none!important;}
.sticky-send-box .send-box-collapse-toggle{touch-action:manipulation;}
.compose-tool-buttons{display:flex;gap:8px;align-items:center;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 1px 4px;}
.compose-tool-buttons::-webkit-scrollbar{display:none;}
.tool-toggle-button,.command-insert-btn,.command-more-link,.option-action-button{font:inherit;box-sizing:border-box;}
.tool-toggle-button{flex:0 0 auto;white-space:nowrap;min-height:38px;border:1px solid #e3e9f2;background:#fff;border-radius:999px;color:#334155;font-weight:800;padding:8px 14px;line-height:1;box-shadow:0 1px 2px rgba(15,23,42,.04);}
.tool-toggle-button.is-open{background:#fff1f5;border-color:#d58aa1;color:#a11246;}
.tool-more-button{display:none;}
.command-compose-panel .command-quick-bar{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
.command-insert-btn,.command-more-link{flex:0 0 auto;border:1px solid #e3e9f2;background:#fff;border-radius:14px;min-height:40px;padding:8px 12px;color:#334155;text-decoration:none;font-weight:800;display:inline-flex;align-items:center;gap:6px;}
.command-insert-btn span{font-size:.78rem;color:#64748b;font-weight:700;}
.send-row.message-input-row{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(88px,112px);gap:8px;align-items:stretch;}
.send-row.message-input-row textarea{max-height:34vh;min-height:54px;resize:none;line-height:1.55;overflow:auto;}
.send-button{min-height:54px;font-weight:900;border-radius:12px;}
.attach-clip-button{min-width:48px;min-height:54px;display:grid;place-items:center;}
.attachment-preview-list{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:5px 2px 8px;}
.attachment-preview-item{position:relative;flex:0 0 94px;width:94px;max-width:94px;min-height:76px;border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:5px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;font-size:11px;color:#475569;overflow:hidden;}
.attachment-preview-thumb{width:100%;height:48px;border-radius:7px;object-fit:cover;background:#f1f5f9;display:grid;place-items:center;font-weight:900;color:#64748b;font-size:11px;line-height:1;}
.attachment-preview-item.is-image .attachment-preview-thumb{height:66px;}
.attachment-preview-meta{display:block;width:100%;margin-top:4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:10px;line-height:1.2;color:#64748b;font-weight:800;}
.attachment-preview-item.is-image .attachment-preview-meta{position:absolute;left:5px;right:5px;bottom:5px;width:auto;margin:0;padding:3px 4px;border-radius:0 0 7px 7px;background:rgba(15,23,42,.66);color:#fff;font-size:10px;}
.attachment-preview-remove{position:absolute;right:3px;top:3px;border:1px solid #fecdd3;background:rgba(255,255,255,.94);color:#be123c;border-radius:999px;width:24px;height:24px;line-height:20px;font-weight:900;box-shadow:0 2px 8px rgba(15,23,42,.14);cursor:pointer;}
.attachment-preview-remove:hover{background:#fff1f2;}
.dm-toast.is-dismissible{cursor:pointer;border:1px solid rgba(254,202,202,.65);background:#7f1d1d!important;border-radius:14px;max-width:min(420px,calc(100vw - 24px));white-space:normal;line-height:1.45;}
.dm-toast.is-dismissible:after{content:'タップで閉じる';display:block;margin-top:3px;font-size:10px;font-weight:800;opacity:.72;}
.jump-new-button{position:fixed!important;right:14px!important;bottom:var(--chat-jump-bottom)!important;z-index:40;max-width:calc(100vw - 28px);box-shadow:0 10px 25px rgba(15,23,42,.18);transition:bottom .18s ease, transform .18s ease, opacity .18s ease;}
body.chat-send-collapsed .jump-new-button{bottom:calc(56px + var(--chat-safe-bottom))!important;}
body.chat-send-collapsed .jump-new-button[data-force-closed="1"]{display:inline-flex!important;}
.modal-close{min-width:44px;min-height:44px;border-radius:999px;font-size:24px;line-height:1;}
@media(min-width:721px){
  .room-page:has(.sticky-send-box){
    padding-bottom:calc(var(--chat-compact-composer-height, 118px) + var(--chat-safe-bottom) + 16px)!important;
  }
  .room-page .room-wrap{
    padding-bottom:calc(var(--chat-compact-composer-height, 118px) + var(--chat-safe-bottom) + 18px)!important;
  }
  .room-page .sticky-send-box{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(var(--chat-safe-bottom) + 10px)!important;
    width:min(1120px,calc(100vw - 24px))!important;
    max-width:1120px!important;
    margin:0!important;
    transform:translateX(-50%)!important;
    z-index:80!important;
    border-radius:8px!important;
    box-shadow:0 -8px 26px rgba(15,23,42,.14)!important;
  }
  .room-page .sticky-send-box.is-collapsed{
    width:min(720px,calc(100vw - 24px))!important;
  }
  .room-page .jump-new-button{
    bottom:calc(var(--chat-compact-composer-height, 118px) + var(--chat-safe-bottom) + 22px)!important;
  }
  body.chat-send-collapsed.room-page .jump-new-button{
    bottom:72px!important;
  }
}
@media(max-width:720px){
  .site-header .bar{min-width:0;}
  .top-links{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}
  .sticky-send-box{left:0;right:0;border-radius:18px 18px 0 0;max-width:100vw;}
  .compose-tools-area{min-width:0;}
  .compose-tool-buttons{margin-inline:-2px;padding-inline:2px;}
  .tool-toggle-button{padding:9px 13px;min-width:max-content;}
  .send-row.message-input-row{grid-template-columns:48px minmax(0,1fr) 96px;}
  .send-button{font-size:16px;}
  .modal-backdrop{align-items:flex-end!important;padding:0!important;background:rgba(15,23,42,.34)!important;}
  .modal-backdrop .modal-card{width:100%!important;max-width:100%!important;max-height:min(86vh,720px)!important;border-radius:var(--chat-sheet-radius) var(--chat-sheet-radius) 0 0!important;margin:0!important;overflow:auto;animation:chatSheetUp .16s ease-out;}
  .modal-backdrop.is-active-message-menu .modal-card{border-radius:22px 22px 0 0!important;}
  .modal-head{position:sticky;top:0;background:inherit;z-index:3;}
  .room-title-box{padding:10px 12px;}
  .room-title-line{gap:5px;}
  .room-title-line h1{font-size:16px;}
  .room-title-main p{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}
@keyframes chatSheetUp{from{transform:translateY(24px);opacity:.7}to{transform:translateY(0);opacity:1}}
.message{position:relative;}

/* 2026-05-23: quieter compact reactions */
.message-reactions{
  margin-top:2px!important;
  gap:3px!important;
  align-items:center!important;
  opacity:.72!important;
}
.message:hover .message-reactions,
.message.show-reactions .message-reactions,
.message-reactions:focus-within{
  opacity:1!important;
}
.reaction-picker-toggle,
.reaction-count,
.reaction-picker .reaction-choice{
  min-width:18px!important;
  min-height:18px!important;
  height:18px!important;
  padding:0 5px!important;
  border-radius:999px!important;
  border:1px solid #e6edf5!important;
  background:transparent!important;
  color:#64748b!important;
  box-shadow:none!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:700!important;
  transform:none!important;
}
.reaction-picker-toggle{
  width:20px!important;
  padding:0!important;
  color:#94a3b8!important;
}
.reaction-picker-toggle.has-reactions{
  border-style:solid!important;
  background:#f8fafc!important;
}
.reaction-count{
  gap:2px!important;
}
.reaction-count span{
  color:#94a3b8!important;
  font-size:9px!important;
  font-weight:700!important;
}
.reaction-count.is-reacted{
  background:#fff7f9!important;
  border-color:#f7cbd5!important;
  color:#a11246!important;
  box-shadow:none!important;
}
.site-boards .reaction-count.is-reacted{
  background:#f7fbff!important;
  border-color:#cfe2ff!important;
  color:#1d4ed8!important;
  box-shadow:none!important;
}
.reaction-picker:not([hidden]){
  display:inline-flex!important;
  gap:2px!important;
  padding:2px!important;
  border-radius:999px!important;
  border:1px solid #e6edf5!important;
  background:#fff!important;
  box-shadow:0 4px 14px rgba(15,23,42,.08)!important;
}
.reaction-picker-toggle:hover,
.reaction-count:hover,
.reaction-picker .reaction-choice:hover{
  background:#f8fafc!important;
  border-color:#dbe3ee!important;
  transform:none!important;
}
@media(max-width:720px){
  .message-reactions{margin-top:1px!important;gap:2px!important;}
  .reaction-picker-toggle,
  .reaction-count,
  .reaction-picker .reaction-choice{
    min-height:17px!important;
    height:17px!important;
    font-size:10px!important;
    padding:0 4px!important;
  }
  .reaction-picker-toggle{width:19px!important;padding:0!important;}
}

.message.is-highlight-target{animation:announceTargetPulse 2.8s ease-out 1;box-shadow:0 0 0 3px rgba(176,18,70,.22),0 16px 34px rgba(176,18,70,.16)!important;border-color:#b01246!important;background:#fff7fb!important;}
.message.is-highlight-target:before{content:'📌 アナウンスの投稿';position:absolute;right:12px;top:-12px;background:#b01246;color:#fff;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900;z-index:2;}
@keyframes announceTargetPulse{0%,100%{transform:translateY(0)}15%{transform:translateY(-2px)}30%{transform:translateY(1px)}}
.room-notice-item{border-left:4px solid var(--notice-accent,#d9a0b0);}
.room-notice-item.is-notice-important{--notice-accent:#b01246;background:#fff7fb;}
.room-notice-item.is-notice-urgent{--notice-accent:#dc2626;background:#fff1f2;}
.room-notice-item.is-notice-memo{--notice-accent:#64748b;background:#f8fafc;}
.room-notice-custom-icon{font-style:normal;margin-right:3px;}
.notice-advanced-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0;}
.notice-advanced-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#64748b;}
.notice-advanced-grid input,.notice-advanced-grid select{border:1px solid #dbe3ef;border-radius:10px;padding:8px;background:#fff;}
.notice-live-preview{border:1px dashed #d6e0ec;background:#f8fafc;border-radius:12px;padding:10px;margin-top:8px;color:#475569;white-space:pre-wrap;}
.notice-manager-actions{display:flex;gap:5px;align-items:center;flex:0 0 auto;}
.notice-manager-actions form{display:inline;}
.notice-mini-button,.notice-manager-actions button{border:1px solid #dbe3ef;background:#fff;border-radius:999px;padding:5px 8px;font-size:12px;font-weight:800;color:#475569;}
.is-touch-sorting .sortable-drop-line{height:3px;background:#b01246;border-radius:999px;margin:3px 0;box-shadow:0 0 0 3px rgba(176,18,70,.12);}
.drag-handle{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;}
.is-dragging{opacity:.72;transform:scale(.995);}
@media(max-width:560px){
  .notice-advanced-grid{grid-template-columns:1fr;}
  .notice-manager-item{align-items:flex-start;}
  .notice-manager-actions{flex-direction:column;align-items:stretch;}
}
.admin-dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.admin-dash-card{border:1px solid #e2e8f0;background:#fff;border-radius:16px;padding:14px;}
.admin-dash-card h3{margin:0 0 8px;color:#a11246;}
.admin-dash-card p{margin:0;color:#64748b;font-size:13px;line-height:1.6;}
.admin-mini-table{display:grid;gap:6px;max-height:220px;overflow:auto;margin-top:10px;}
.admin-mini-table div{border:1px solid #eef2f7;border-radius:10px;padding:8px;background:#f8fafc;}
.admin-mini-table small{display:block;color:#94a3b8;word-break:break-all;}
@media(max-width:720px){.admin-dashboard-grid{grid-template-columns:1fr;}.admin-dashboard-modal{max-height:88vh!important;}}

/* ===== 2026-05-20: 添付ボタン・本文入力欄の重なり修正 =====
   既存 style.css に .message-input-row{...!important} と .clip-button{width:36px;height:36px} が残っているため、
   差分CSS側で入力行を強めに再定義します。 */
.send-box .send-row.message-input-row{
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr) minmax(88px,112px)!important;
  gap:8px!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
}
.send-box .send-row.message-input-row > .attach-clip-button{
  position:relative!important;
  width:52px!important;
  min-width:52px!important;
  max-width:52px!important;
  height:auto!important;
  min-height:56px!important;
  align-self:stretch!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border-radius:12px!important;
  overflow:hidden!important;
  z-index:1!important;
}
.send-box .send-row.message-input-row > .attach-clip-button input[type="file"]{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  padding:0!important;
  border:0!important;
}
.send-box .send-row.message-input-row > textarea#messageBody{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  margin:0!important;
  min-height:56px!important;
  max-height:30dvh!important;
  resize:none!important;
  overflow:auto!important;
  border-radius:12px!important;
  position:relative!important;
  z-index:1!important;
}
.send-box .send-row.message-input-row > .send-button{
  width:100%!important;
  min-width:88px!important;
  min-height:56px!important;
  margin:0!important;
  border-radius:12px!important;
  position:relative!important;
  z-index:1!important;
}
@media(max-width:720px){
  .send-box .send-row.message-input-row{
    grid-template-columns:52px minmax(0,1fr) 96px!important;
    gap:8px!important;
  }
  .send-box .send-row.message-input-row > .send-button{
    min-width:96px!important;
    font-size:16px!important;
  }
}
@media(max-width:380px){
  .send-box .send-row.message-input-row{
    grid-template-columns:48px minmax(0,1fr) 86px!important;
    gap:6px!important;
  }
  .send-box .send-row.message-input-row > .attach-clip-button{
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
  }
  .send-box .send-row.message-input-row > .send-button{
    min-width:86px!important;
    padding-inline:8px!important;
  }
}

/* ===== 2026-05-20 minimal composer row ===== */
.send-box .send-row.message-input-row.input-minimal-row{
  display:grid!important;
  grid-template-columns:56px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:stretch!important;
}
.send-box .send-row.message-input-row.input-minimal-row > .minimal-attach-button{
  width:56px!important;
  min-width:56px!important;
  max-width:56px!important;
  min-height:56px!important;
  height:auto!important;
  align-self:stretch!important;
  border:1px solid #dbe3ef!important;
  background:#fff!important;
  border-radius:18px!important;
  box-shadow:0 1px 2px rgba(15,23,42,.04)!important;
  color:#334155!important;
  font-size:30px!important;
  font-weight:300!important;
}
.send-box .send-row.message-input-row.input-minimal-row > .minimal-attach-button span{
  line-height:1!important;
  transform:translateY(-1px);
}
.send-box .send-row.message-input-row.input-minimal-row > textarea#messageBody{
  min-height:56px!important;
  height:auto!important;
  align-self:stretch!important;
  padding:16px 18px!important;
  border:1px solid #dbe3ef!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 1px 2px rgba(15,23,42,.04)!important;
  line-height:1.45!important;
}
.send-box .send-row.message-input-row.input-minimal-row > textarea#messageBody::placeholder{
  color:#94a3b8!important;
}
.send-box .send-row.message-input-row.input-minimal-row > .visually-hidden-send-button{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  opacity:0!important;
  pointer-events:none!important;
}
.send-box .send-row.message-input-row.input-minimal-row > textarea#messageBody:focus,
.send-box .send-row.message-input-row.input-minimal-row > .minimal-attach-button:focus-within{
  border-color:#cbd5e1!important;
  box-shadow:0 0 0 3px rgba(59,130,246,.10)!important;
}
@media(max-width:720px){
  .send-box .send-row.message-input-row.input-minimal-row{
    grid-template-columns:54px minmax(0,1fr)!important;
    gap:8px!important;
  }
  .send-box .send-row.message-input-row.input-minimal-row > .minimal-attach-button{
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    min-height:54px!important;
    height:auto!important;
    border-radius:17px!important;
    font-size:28px!important;
  }
  .send-box .send-row.message-input-row.input-minimal-row > textarea#messageBody{
    min-height:54px!important;
    height:auto!important;
    border-radius:17px!important;
    padding:15px 16px!important;
  }
}
@media(max-width:380px){
  .send-box .send-row.message-input-row.input-minimal-row{
    grid-template-columns:50px minmax(0,1fr)!important;
    gap:7px!important;
  }
  .send-box .send-row.message-input-row.input-minimal-row > .minimal-attach-button{
    width:50px!important;
    min-width:50px!important;
    max-width:50px!important;
    min-height:50px!important;
    height:auto!important;
    font-size:26px!important;
    border-radius:16px!important;
  }
  .send-box .send-row.message-input-row.input-minimal-row > textarea#messageBody{
    min-height:50px!important;
    height:auto!important;
    border-radius:16px!important;
    padding:13px 14px!important;
  }
}

/* ===== 2026-05-20 fix: attach button + textarea exact alignment ===== */
.send-box .send-row.message-input-row.input-minimal-row{
  position:relative!important;
  display:grid!important;
  grid-template-columns:56px minmax(0,1fr)!important;
  grid-auto-rows:auto!important;
  gap:10px!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
}
.send-box .send-row.message-input-row.input-minimal-row > button.minimal-attach-button{
  appearance:none!important;
  -webkit-appearance:none!important;
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
  width:56px!important;
  min-width:56px!important;
  max-width:56px!important;
  height:56px!important;
  min-height:56px!important;
  max-height:56px!important;
  align-self:stretch!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #dbe3ef!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#334155!important;
  font-size:30px!important;
  font-weight:300!important;
  line-height:1!important;
  box-shadow:none!important;
  cursor:pointer!important;
  z-index:2!important;
}
.send-box .send-row.message-input-row.input-minimal-row > button.minimal-attach-button span{
  display:block!important;
  line-height:1!important;
  transform:translateY(-1px)!important;
  pointer-events:none!important;
}
.send-box .send-row.message-input-row.input-minimal-row > textarea#messageBody{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:56px!important;
  min-height:56px!important;
  max-height:30dvh!important;
  margin:0!important;
  padding:15px 16px!important;
  border:1px solid #dbe3ef!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#334155!important;
  font-size:16px!important;
  line-height:24px!important;
  resize:none!important;
  overflow:auto!important;
  box-shadow:none!important;
  align-self:stretch!important;
  z-index:1!important;
}
.send-box .send-row.message-input-row.input-minimal-row > .hidden-attachment-input{
  position:absolute!important;
  left:-9999px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}
.send-box .send-row.message-input-row.input-minimal-row > .visually-hidden-send-button,
.send-box .send-row.message-input-row.input-minimal-row > button#sendButton.visually-hidden-send-button{
  position:absolute!important;
  left:-9999px!important;
  top:auto!important;
  display:block!important;
  width:1px!important;
  height:1px!important;
  min-width:1px!important;
  min-height:1px!important;
  max-width:1px!important;
  max-height:1px!important;
  margin:-1px!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  opacity:0!important;
  pointer-events:none!important;
}
.send-box .send-row.message-input-row.input-minimal-row > button.minimal-attach-button:focus-visible,
.send-box .send-row.message-input-row.input-minimal-row > textarea#messageBody:focus{
  outline:none!important;
  border-color:#cbd5e1!important;
  box-shadow:0 0 0 3px rgba(59,130,246,.10)!important;
}
@media(max-width:720px){
  .send-box .send-row.message-input-row.input-minimal-row{
    grid-template-columns:54px minmax(0,1fr)!important;
    gap:8px!important;
  }
  .send-box .send-row.message-input-row.input-minimal-row > button.minimal-attach-button,
  .send-box .send-row.message-input-row.input-minimal-row > textarea#messageBody{
    height:54px!important;
    min-height:54px!important;
    border-radius:13px!important;
  }
  .send-box .send-row.message-input-row.input-minimal-row > button.minimal-attach-button{
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    max-height:54px!important;
    font-size:28px!important;
  }
  .send-box .send-row.message-input-row.input-minimal-row > textarea#messageBody{
    padding:14px 15px!important;
  }
}
@media(max-width:380px){
  .send-box .send-row.message-input-row.input-minimal-row{
    grid-template-columns:50px minmax(0,1fr)!important;
    gap:7px!important;
  }
  .send-box .send-row.message-input-row.input-minimal-row > button.minimal-attach-button,
  .send-box .send-row.message-input-row.input-minimal-row > textarea#messageBody{
    height:50px!important;
    min-height:50px!important;
  }
  .send-box .send-row.message-input-row.input-minimal-row > button.minimal-attach-button{
    width:50px!important;
    min-width:50px!important;
    max-width:50px!important;
    max-height:50px!important;
    font-size:26px!important;
  }
  .send-box .send-row.message-input-row.input-minimal-row > textarea#messageBody{
    padding:13px 14px!important;
  }
}

/* ===== 2026-05-20 inputfix4: 添付 + 本文 + 送信アイコンを同じ高さで固定 ===== */
.send-box .send-row.message-input-row.input-icon-row{
  display:grid!important;
  grid-template-columns:56px minmax(0,1fr) 56px!important;
  gap:8px!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
}
.send-box .send-row.message-input-row.input-icon-row > .icon-attach-button,
.send-box .send-row.message-input-row.input-icon-row > .send-icon-button{
  box-sizing:border-box!important;
  width:56px!important;
  min-width:56px!important;
  max-width:56px!important;
  min-height:56px!important;
  height:auto!important;
  align-self:stretch!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #dbe3ef!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#334155!important;
  font:inherit!important;
  line-height:1!important;
  box-shadow:none!important;
  position:relative!important;
  overflow:hidden!important;
  z-index:2!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
}
.send-box .send-row.message-input-row.input-icon-row > .icon-attach-button span{
  font-size:30px!important;
  font-weight:300!important;
  line-height:1!important;
  transform:translateY(-1px);
  pointer-events:none!important;
}
.send-box .send-row.message-input-row.input-icon-row > .send-icon-button span{
  font-size:22px!important;
  font-weight:900!important;
  line-height:1!important;
  transform:translateX(1px);
  pointer-events:none!important;
}
.send-box .send-row.message-input-row.input-icon-row > .send-icon-button:disabled{
  opacity:.48!important;
  cursor:not-allowed!important;
  filter:grayscale(.15)!important;
}
.send-box .send-row.message-input-row.input-icon-row > .send-icon-button.is-ready{
  opacity:1!important;
  color:#fff!important;
  background:#be123c!important;
  border-color:#be123c!important;
}
.send-box .send-row.message-input-row.input-icon-row > textarea#messageBody{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:56px!important;
  height:auto!important;
  max-height:30dvh!important;
  align-self:stretch!important;
  margin:0!important;
  padding:15px 16px!important;
  border:1px solid #dbe3ef!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#334155!important;
  font-size:16px!important;
  line-height:24px!important;
  resize:none!important;
  overflow:auto!important;
  box-shadow:none!important;
  position:relative!important;
  z-index:1!important;
}
.send-box .send-row.message-input-row.input-icon-row > textarea#messageBody::placeholder{
  color:#94a3b8!important;
}
.send-box .send-row.message-input-row.input-icon-row > .icon-attach-button > .native-attachment-input{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  z-index:3!important;
  font-size:100px!important;
}
.send-box .send-row.message-input-row.input-icon-row > .icon-attach-button:focus-within,
.send-box .send-row.message-input-row.input-icon-row > .send-icon-button:focus-visible,
.send-box .send-row.message-input-row.input-icon-row > textarea#messageBody:focus{
  outline:none!important;
  border-color:#cbd5e1!important;
  box-shadow:0 0 0 3px rgba(59,130,246,.10)!important;
}
@media(max-width:720px){
  .send-box .send-row.message-input-row.input-icon-row{
    grid-template-columns:52px minmax(0,1fr) 52px!important;
    gap:7px!important;
  }
  .send-box .send-row.message-input-row.input-icon-row > .icon-attach-button,
  .send-box .send-row.message-input-row.input-icon-row > .send-icon-button{
    width:52px!important;
    min-width:52px!important;
    max-width:52px!important;
    min-height:52px!important;
    border-radius:13px!important;
  }
  .send-box .send-row.message-input-row.input-icon-row > textarea#messageBody{
    min-height:52px!important;
    padding:14px 15px!important;
    border-radius:13px!important;
  }
  .send-box .send-row.message-input-row.input-icon-row > .icon-attach-button span{font-size:28px!important;}
  .send-box .send-row.message-input-row.input-icon-row > .send-icon-button span{font-size:21px!important;}
}
@media(max-width:380px){
  .send-box .send-row.message-input-row.input-icon-row{
    grid-template-columns:48px minmax(0,1fr) 48px!important;
    gap:6px!important;
  }
  .send-box .send-row.message-input-row.input-icon-row > .icon-attach-button,
  .send-box .send-row.message-input-row.input-icon-row > .send-icon-button{
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    min-height:48px!important;
  }
  .send-box .send-row.message-input-row.input-icon-row > textarea#messageBody{
    min-height:48px!important;
    padding:12px 13px!important;
  }
}


/* 2026-05-20: 画面内の保存通知と、チャットルームをシンプルに見せる調整 */
.inline-form-status{
  margin:0 0 10px;
  padding:9px 11px;
  border-radius:12px;
  border:1px solid #bbf7d0;
  background:#f0fdf4;
  color:#047857;
  font-weight:800;
  line-height:1.45;
}
.inline-form-status.is-error{border-color:#fecaca;background:#fff1f2;color:#be123c;}
.inline-form-status[hidden]{display:none!important;}
.room-page .site-header{box-shadow:none;}
.room-page .room-title-box.compact-room-title{
  border-left-width:0!important;
  border-radius:12px!important;
  padding:8px 10px!important;
  margin-bottom:6px!important;
}
.room-page .room-title-line h1{font-size:16px!important;font-weight:900;}
.room-page .room-title-main>p,
.room-page .room-tags,
.room-page #presenceSummary .presence-detail,
.room-page .admin-mini,
.room-page .created-notice{display:none!important;}
.room-page .joined-line,
.room-page .admin-login-box,
.room-page .participant-box-v2{
  border-radius:12px!important;
  box-shadow:none!important;
}
.room-page .participant-box-v2{
  padding:6px 8px!important;
  margin:5px 0!important;
  border-color:#edf1f6!important;
}
.room-page .message-list{border-radius:12px!important;border-color:#e7ecf3!important;}
.room-page .message{padding:6px 8px!important;}
.room-page .message.system{font-size:11px!important;background:#fafafa!important;color:#94a3b8!important;}
.room-page .compose-panel{
  border-radius:14px!important;
  border-color:#edf1f6!important;
  background:#fbfcfe!important;
}
.room-page .option-action-button span,
.room-page .command-insert-btn span{display:none!important;}
.room-page .tool-toggle-button{box-shadow:none!important;border-color:#e8edf4!important;background:#fff!important;}
.room-page .tool-toggle-button.is-open{background:#fff7fb!important;}
@media(max-width:720px){
  .room-page .top-links a[href*="commands"],
  .room-page .top-links a[href="/"]{display:none!important;}
  .room-page .room-title-box.compact-room-title{top:28px!important;}
  .room-page .participant-box-v2{max-height:none!important;overflow:visible!important;}
  .room-page .participant-box-head small{display:none!important;}
  .room-page .message-list{min-height:calc(100dvh - 160px)!important;}
  .room-page .compose-tool-buttons{gap:6px!important;}
  .room-page .tool-toggle-button{min-height:34px!important;padding:7px 10px!important;font-size:12px!important;}
}


/* 2026-05-20: 保存完了/失敗をモーダルを閉じずに画面内オーバーレイ表示 */
.save-overlay-message{
  position:fixed;
  left:50%;
  top:calc(env(safe-area-inset-top, 0px) + 18px);
  z-index:1400;
  display:flex;
  align-items:center;
  gap:9px;
  max-width:min(92vw, 420px);
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.34);
  background:rgba(240,253,244,.98);
  color:#047857;
  font-weight:900;
  line-height:1.35;
  box-shadow:0 16px 48px rgba(15,23,42,.22);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, -12px) scale(.98);
  transition:opacity .18s ease, transform .18s ease;
}
.save-overlay-message.is-visible{opacity:1;transform:translate(-50%, 0) scale(1);}
.save-overlay-message.is-error{border-color:rgba(239,68,68,.34);background:rgba(255,241,242,.98);color:#be123c;}
.save-overlay-icon{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:50%;
  background:currentColor;
  color:#fff;
  font-size:14px;
  font-weight:1000;
}
.save-overlay-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:720px){
  .save-overlay-message{top:calc(env(safe-area-inset-top, 0px) + 10px);border-radius:16px;max-width:calc(100vw - 22px);}
  .save-overlay-text{white-space:normal;}
}


/* ===== 2026-05-20 bottom space/footer/title dock fix ===== */
:root{--chat-compact-composer-height:118px;}
.room-page .site-header{position:sticky!important;top:0!important;z-index:90!important;}
.room-page .room-wrap{margin-top:0!important;padding-top:0!important;}
.room-page .participant-status-bar{
  position:sticky!important;
  top:var(--chat-header-height, 42px)!important;
  z-index:70!important;
  width:100vw!important;
  max-width:100vw!important;
  box-sizing:border-box!important;
  margin:0 calc(50% - 50vw) 6px!important;
  border-radius:0!important;
  border-top:0!important;
  border-left:0!important;
  border-right:0!important;
  background:rgba(255,255,255,.98)!important;
  backdrop-filter:saturate(180%) blur(10px);
}
.room-page .room-title-toggle{min-height:28px!important;}
.room-page .room-title-text{flex:1 1 auto!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.room-page .room-title-count{flex:0 0 auto!important;}
.room-page .room-description-box{margin:3px 0 5px!important;border-radius:8px!important;padding:6px 8px!important;}
.room-page .room-description-box[hidden]{display:none!important;}
.room-page .room-description-toggle{width:100%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;border:0!important;background:transparent!important;color:#334155!important;font:inherit!important;font-size:12px!important;font-weight:950!important;padding:0 0 5px!important;cursor:pointer!important;}
.room-page .room-description-toggle b{color:#64748b!important;font-size:11px!important;}
.room-page .room-description-body{font-size:12px!important;line-height:1.5!important;max-height:70px!important;overflow:auto!important;}
.room-page .room-description-body[hidden]{display:none!important;}
.room-page .room-description-label{display:inline-flex!important;align-items:center!important;color:#64748b!important;font-size:11px!important;font-weight:950!important;line-height:1.4!important;margin:0!important;}
.room-page .room-description-content{min-width:0!important;}
.room-page .message-list{min-height:0!important;margin-bottom:8px!important;}
.room-page .site-footer{margin-top:12px!important;margin-bottom:calc(var(--chat-compact-composer-height) + var(--chat-safe-bottom) + 12px)!important;padding-bottom:12px!important;}
.room-page:not(:has(.sticky-send-box)) .site-footer{margin-bottom:12px!important;}
@media(max-width:720px){
  :root{--chat-compact-composer-height:112px;}
  .room-page .site-header .bar{min-height:38px!important;padding:5px 8px!important;}
  .room-page .top-links{gap:4px!important;}
  .room-page .top-links a,.room-page .top-links button{font-size:12px!important;padding:4px 7px!important;border-radius:999px!important;border:1px solid #e2e8f0!important;background:#fff!important;}
  .room-page .room-wrap{padding-left:6px!important;padding-right:6px!important;padding-bottom:0!important;margin-top:0!important;}
  .room-page .participant-status-bar{top:var(--chat-header-height, 38px)!important;margin:0 calc(50% - 50vw) 4px!important;padding:5px 9px!important;border-left:0!important;border-right:0!important;}
  .room-page .room-title-toggle{min-height:26px!important;}
  .room-page .room-title-text{font-size:14px!important;line-height:1.25!important;}
  .room-page .room-title-count{font-size:13px!important;line-height:1.25!important;}
  .room-page .room-title-toggle::after{display:none!important;}
  .room-page .room-title-participants{max-height:88px!important;overflow:auto!important;margin-top:5px!important;padding-top:5px!important;}
  .room-page .room-description-box{margin:2px 0 4px!important;padding:5px 7px!important;}
  .room-page .room-description-toggle{font-size:11px!important;padding-bottom:4px!important;}
  .room-page .room-description-body{font-size:11px!important;line-height:1.45!important;max-height:54px!important;}
  .room-page .message-list{min-height:0!important;margin-bottom:6px!important;border-radius:7px!important;}
  .room-page .sticky-send-box{padding:5px 8px calc(6px + var(--chat-safe-bottom))!important;border-radius:10px 10px 0 0!important;}
  .room-page .send-box-collapse-toggle{height:18px!important;margin:0 0 2px!important;font-size:10px!important;}
  .room-page .compose-tool-buttons{height:24px!important;gap:10px!important;padding:0 2px!important;}
  .room-page .compose-tool-buttons .tool-toggle-button{height:24px!important;line-height:24px!important;font-size:12px!important;}
  .room-page .compose-status-row{min-height:16px!important;margin:0 0 3px!important;font-size:11px!important;}
  .room-page .send-row.message-input-row.input-icon-row{grid-template-columns:42px minmax(0,1fr) 52px!important;gap:7px!important;}
  .room-page .send-row.message-input-row.input-icon-row > .icon-attach-button,
  .room-page .send-row.message-input-row.input-icon-row > .send-icon-button{width:42px!important;min-width:42px!important;max-width:52px!important;min-height:42px!important;height:42px!important;}
  .room-page .send-row.message-input-row.input-icon-row > textarea#messageBody{min-height:42px!important;height:42px!important;max-height:84px!important;padding:10px 12px!important;}
  .room-page .jump-new-button{bottom:calc(var(--chat-compact-composer-height) + var(--chat-safe-bottom) + 8px)!important;}
  .room-page .site-footer{display:flex!important;margin-top:10px!important;margin-bottom:calc(var(--chat-compact-composer-height) + var(--chat-safe-bottom) + 10px)!important;padding:10px 6px!important;gap:7px!important;}
  body.chat-send-collapsed.room-page .site-footer{margin-bottom:58px!important;}
  body.chat-send-collapsed.room-page .jump-new-button{bottom:58px!important;}
}


/* ===== 2026-05-20 room footer bottom placement override ===== */
.room-page .site-footer{
  display:flex!important;
  margin-top:auto!important;
  margin-bottom:calc(var(--chat-compact-composer-height, 118px) + env(safe-area-inset-bottom,0px) + 6px)!important;
  padding:10px 6px!important;
}
.room-page:not(:has(.sticky-send-box)) .site-footer{margin-bottom:0!important;}
body.chat-send-collapsed.room-page .site-footer{margin-bottom:52px!important;}
@media(max-width:720px){
  .room-page .site-footer{margin-bottom:calc(var(--chat-compact-composer-height, 112px) + env(safe-area-inset-bottom,0px) + 6px)!important;}
}


/* ===== 2026-05-20 title count beside title ===== */
.room-page .room-title-toggle{justify-content:flex-start!important;}
.room-page .room-title-text{flex:0 1 auto!important;max-width:calc(100% - 64px)!important;}
.room-page .room-title-count{flex:0 0 auto!important;margin-left:2px!important;}
.room-page .room-title-box.participant-status-bar.compact-room-title,
.room-page .room-title-box.participant-status-bar.simple-room-title{
  border-radius:0!important;
  margin-top:0!important;
  border-left:0!important;
  border-right:0!important;
  border-top:0!important;
  width:100vw!important;
  max-width:100vw!important;
}


/* 2026-05-20: ルーム説明HTML・入力欄高さ削減・最新へボタン調整 */
.room-description-body :where(p,ul,ol,blockquote,pre){margin:.35em 0;}
.room-description-body :where(ul,ol){padding-left:1.35em;}
.room-description-body a{color:var(--brand,#be123c);text-decoration:underline;text-underline-offset:2px;}
.room-description-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f1f5f9;border-radius:4px;padding:1px 4px;}
.compose-status-row{min-height:0!important;margin:2px 0 5px!important;justify-content:flex-end!important;}
.enter-mode-label{display:none!important;}
.char-counter{font-size:12px!important;line-height:1!important;}
.compose-tool-buttons{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);}
.compose-tool-buttons .admin-tool-toggle{display:none!important;}
@media(max-width:720px){
  .compose-tools-area{padding-top:2px!important;}
  .compose-tool-buttons{gap:5px!important;}
  .tool-toggle-button{min-height:34px!important;padding:7px 5px!important;font-size:13px!important;}
  .compose-status-row{height:auto!important;padding:0 2px!important;}
}


/* お知らせ二重表示対策：表示位置は #topAnnouncementArea に一本化 */
#roomNoticeArea { display: none !important; }

/* ===== 2026-05-22 compose tools cleanup ===== */
.room-page .sticky-send-box .tool-more-button,
.room-page .sticky-send-box .admin-tool-toggle{
  display:none!important;
}
.room-page .sticky-send-box .tool-toggle-button[hidden],
.room-page .sticky-send-box .compose-panel[hidden],
.room-page .sticky-send-box .attachment-preview-list[hidden],
.room-page .room-closed-notice[hidden],
.room-page .send-row.message-input-row.input-icon-row > .icon-attach-button[hidden]{
  display:none!important;
}
.room-page .send-row.message-input-row.input-icon-row.is-file-upload-disabled,
.room-page.site-nieru .send-row.message-input-row.input-icon-row.is-file-upload-disabled,
.room-page.site-boards .send-row.message-input-row.input-icon-row.is-file-upload-disabled{
  grid-template-columns:minmax(0,1fr) 52px!important;
}
.room-page .send-row.message-input-row.input-icon-row.is-file-upload-disabled > textarea#messageBody{
  grid-column:1/2!important;
}
.room-page .send-row.message-input-row.input-icon-row.is-file-upload-disabled > .send-icon-button{
  grid-column:2/3!important;
}

/* 2026-05-23: voice call button adds a fourth composer column */
.send-box .send-row.message-input-row.input-icon-row.has-voice-call,
.room-page .send-box .send-row.message-input-row.input-icon-row.has-voice-call{
  display:grid!important;
  grid-template-columns:56px 56px minmax(0,1fr) 56px!important;
  grid-template-rows:56px!important;
  grid-auto-rows:0!important;
  gap:8px!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
.send-box .send-row.message-input-row.input-icon-row.has-voice-call > .icon-attach-button,
.send-box .send-row.message-input-row.input-icon-row.has-voice-call > .voice-call-open-button,
.send-box .send-row.message-input-row.input-icon-row.has-voice-call > .send-icon-button{
  width:56px!important;
  min-width:56px!important;
  max-width:56px!important;
  height:56px!important;
  min-height:56px!important;
  grid-row:1!important;
}
.send-box .send-row.message-input-row.input-icon-row.has-voice-call > .icon-attach-button{
  grid-column:1!important;
}
.send-box .send-row.message-input-row.input-icon-row.has-voice-call > .voice-call-open-button{
  grid-column:2!important;
}
.send-box .send-row.message-input-row.input-icon-row.has-voice-call > textarea#messageBody{
  grid-column:3!important;
  grid-row:1!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:56px!important;
  min-height:56px!important;
}
.send-box .send-row.message-input-row.input-icon-row.has-voice-call > .send-icon-button{
  grid-column:4!important;
}
@media(max-width:720px){
  .send-box .send-row.message-input-row.input-icon-row.has-voice-call,
  .room-page .send-box .send-row.message-input-row.input-icon-row.has-voice-call{
    grid-template-columns:42px 42px minmax(0,1fr) 42px!important;
    grid-template-rows:42px!important;
    gap:7px!important;
  }
  .send-box .send-row.message-input-row.input-icon-row.has-voice-call > .icon-attach-button,
  .send-box .send-row.message-input-row.input-icon-row.has-voice-call > .voice-call-open-button,
  .send-box .send-row.message-input-row.input-icon-row.has-voice-call > .send-icon-button{
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    border-radius:10px!important;
  }
  .send-box .send-row.message-input-row.input-icon-row.has-voice-call > textarea#messageBody{
    height:42px!important;
    min-height:42px!important;
    padding:10px 12px!important;
    border-radius:10px!important;
  }
}
@media(max-width:380px){
  .send-box .send-row.message-input-row.input-icon-row.has-voice-call,
  .room-page .send-box .send-row.message-input-row.input-icon-row.has-voice-call{
    grid-template-columns:38px 38px minmax(0,1fr) 38px!important;
    grid-template-rows:38px!important;
    gap:6px!important;
  }
  .send-box .send-row.message-input-row.input-icon-row.has-voice-call > .icon-attach-button,
  .send-box .send-row.message-input-row.input-icon-row.has-voice-call > .voice-call-open-button,
  .send-box .send-row.message-input-row.input-icon-row.has-voice-call > .send-icon-button{
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:38px!important;
    min-height:38px!important;
  }
  .send-box .send-row.message-input-row.input-icon-row.has-voice-call > textarea#messageBody{
    height:38px!important;
    min-height:38px!important;
    padding:8px 10px!important;
  }
}
.room-page .sticky-send-box .send-box-collapse-toggle,
.room-page.site-nieru .sticky-send-box .send-box-collapse-toggle,
.room-page.site-boards .sticky-send-box .send-box-collapse-toggle{
  border:0!important;
  background:transparent!important;
  color:#64748b!important;
  box-shadow:none!important;
  outline:0!important;
}
.room-page .sticky-send-box .send-box-collapse-toggle:hover,
.room-page.site-nieru .sticky-send-box .send-box-collapse-toggle:hover,
.room-page.site-boards .sticky-send-box .send-box-collapse-toggle:hover{
  background:transparent!important;
  color:#334155!important;
}
.room-page .sticky-send-box .send-box-collapse-toggle::before,
.room-page .sticky-send-box .send-box-collapse-toggle::after{
  background:#e2e8f0!important;
}
.room-page .sticky-send-box.is-collapsed .send-box-collapse-toggle,
.room-page.site-nieru .sticky-send-box.is-collapsed .send-box-collapse-toggle,
.room-page.site-boards .sticky-send-box.is-collapsed .send-box-collapse-toggle{
  border:1px solid #e2e8f0!important;
  background:#fff!important;
  color:#475569!important;
}
.room-page .sticky-send-box .compose-tool-buttons,
.room-page.site-nieru .sticky-send-box .compose-tool-buttons,
.room-page.site-boards .sticky-send-box .compose-tool-buttons{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  gap:14px!important;
}
.room-page .sticky-send-box .compose-tool-buttons .tool-toggle-button,
.room-page.site-nieru .sticky-send-box .compose-tool-buttons .tool-toggle-button,
.room-page.site-boards .sticky-send-box .compose-tool-buttons .tool-toggle-button{
  flex:0 1 auto!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:26px!important;
  height:26px!important;
  padding:0 1px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#334155!important;
  box-shadow:none!important;
  line-height:26px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.room-page .sticky-send-box .compose-tool-buttons .tool-toggle-button.is-open,
.room-page.site-nieru .sticky-send-box .compose-tool-buttons .tool-toggle-button.is-open{
  background:transparent!important;
  color:#be123c!important;
  text-decoration:underline!important;
  text-underline-offset:4px!important;
}
.room-page.site-boards .sticky-send-box .compose-tool-buttons .tool-toggle-button.is-open{
  background:transparent!important;
  color:#2563b8!important;
}
.room-page .sticky-send-box .command-compose-panel,
.room-page.site-nieru .sticky-send-box .command-compose-panel,
.room-page.site-boards .sticky-send-box .command-compose-panel{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  max-height:142px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  border:0!important;
  background:transparent!important;
  padding:7px 6px 9px!important;
  box-shadow:none!important;
}
.room-page .sticky-send-box .command-compose-panel .command-quick-bar,
.room-page.site-nieru .sticky-send-box .command-compose-panel .command-quick-bar,
.room-page.site-boards .sticky-send-box .command-compose-panel .command-quick-bar{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr))!important;
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding:2px 1px 4px!important;
  overflow:visible!important;
  white-space:normal!important;
}
.room-page .sticky-send-box .command-compose-panel .command-insert-btn,
.room-page .sticky-send-box .command-compose-panel .command-more-link,
.room-page.site-nieru .sticky-send-box .command-compose-panel .command-insert-btn,
.room-page.site-nieru .sticky-send-box .command-compose-panel .command-more-link,
.room-page.site-boards .sticky-send-box .command-compose-panel .command-insert-btn,
.room-page.site-boards .sticky-send-box .command-compose-panel .command-more-link{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:34px!important;
  margin:0!important;
  padding:7px 9px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:5px!important;
  border:1px solid #dbe3ee!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#334155!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.2!important;
  text-align:left!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.room-page .sticky-send-box .command-compose-panel .command-insert-btn:hover,
.room-page .sticky-send-box .command-compose-panel .command-more-link:hover{
  background:#f8fafc!important;
  border-color:#cbd5e1!important;
}
.room-page .sticky-send-box .command-compose-panel .command-insert-btn span{
  display:none!important;
}
.room-page .sticky-send-box .command-compose-panel .command-insert-btn small{
  flex:0 0 auto!important;
  margin-left:auto!important;
  border:1px solid #fecdd3!important;
  background:#fff1f2!important;
  color:#be123c!important;
  border-radius:999px!important;
  padding:0 5px!important;
  font-size:9px!important;
  line-height:1.45!important;
}
@media(max-width:720px){
  .room-page .sticky-send-box .compose-tool-buttons,
  .room-page.site-nieru .sticky-send-box .compose-tool-buttons,
  .room-page.site-boards .sticky-send-box .compose-tool-buttons{
    gap:0!important;
  }
  .room-page .sticky-send-box .compose-tool-buttons .tool-toggle-button,
  .room-page.site-nieru .sticky-send-box .compose-tool-buttons .tool-toggle-button,
  .room-page.site-boards .sticky-send-box .compose-tool-buttons .tool-toggle-button{
    flex:1 1 0!important;
    height:30px!important;
    min-height:30px!important;
    line-height:30px!important;
    padding:0 3px!important;
    font-size:12px!important;
  }
  .room-page .sticky-send-box .command-compose-panel,
  .room-page.site-nieru .sticky-send-box .command-compose-panel,
  .room-page.site-boards .sticky-send-box .command-compose-panel{
    max-height:132px!important;
    padding:8px 7px 10px!important;
  }
  .room-page .sticky-send-box .command-compose-panel .command-quick-bar,
  .room-page.site-nieru .sticky-send-box .command-compose-panel .command-quick-bar,
  .room-page.site-boards .sticky-send-box .command-compose-panel .command-quick-bar{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .room-page .sticky-send-box .command-compose-panel .command-insert-btn,
  .room-page .sticky-send-box .command-compose-panel .command-more-link,
  .room-page.site-nieru .sticky-send-box .command-compose-panel .command-insert-btn,
  .room-page.site-nieru .sticky-send-box .command-compose-panel .command-more-link,
  .room-page.site-boards .sticky-send-box .command-compose-panel .command-insert-btn,
  .room-page.site-boards .sticky-send-box .command-compose-panel .command-more-link{
    min-height:34px!important;
    padding:7px 9px!important;
    font-size:13px!important;
  }
}
body.room-theme-simple {
  --room-surface: #ffffff;
  --room-panel: #f8fafc;
  --room-accent: #2563eb;
}

body.room-theme-simple .message,
body.room-theme-simple .modal-card,
body.room-theme-simple .compose-panel {
  box-shadow: none;
}

body.room-theme-night {
  background: #111827;
  color: #e5e7eb;
}

body.room-theme-night .room-shell,
body.room-theme-night .modal-card,
body.room-theme-night .compose-panel,
body.room-theme-night .message {
  background: #172033;
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, 0.28);
}

body.room-theme-night input,
body.room-theme-night textarea,
body.room-theme-night select {
  background: #0f172a;
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, 0.4);
}

body.room-theme-pop {
  background: #fdf7ff;
}

body.room-theme-pop .message,
body.room-theme-pop .compose-panel,
body.room-theme-pop .modal-card {
  border-color: rgba(219, 39, 119, 0.18);
}

body.room-theme-pop .link-button,
body.room-theme-pop .send-button {
  background: #db2777;
  color: #fff;
}

@media (max-width: 720px) {
  body.room-compact-mobile-list .message {
    padding-block: 6px;
  }

  body.room-compact-mobile-list .msg-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }

  body.room-compact-mobile-list .msg-body,
  body.room-compact-mobile-list .msg-head {
    gap: 4px;
  }

  body.room-compact-mobile-list .presence-list,
  body.room-compact-mobile-list .room-title-participant-list {
    max-height: 120px;
    overflow: auto;
  }
}