:root {
--ink: #1a1d24; --ink-soft: #565b66; --ink-faint: #9498a3;
--paper: #f7f7f5; --panel: #ffffff; --line: #e3e2dc;
--accent: #2f6f5e; --accent-soft: #dcece6;
--overdue: #b0392f; --overdue-soft: #f6e0dd;
--soon: #b4780f; --soon-soft: #f5e8cf;
--done: #9498a3;
--mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
--body: 'Manrope', 'Hiragino Sans', sans-serif;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ink: #eceae4; --ink-soft: #b8b6ae; --ink-faint: #7d7b74;
--paper: #121316; --panel: #1b1c20; --line: #303136;
--accent: #6fbba4; --accent-soft: #1c3630;
--overdue: #e08277; --overdue-soft: #3a211e;
--soon: #e0ac54; --soon-soft: #3a2e17;
--done: #6a6d75;
}
}
:root[data-theme="dark"] {
--ink: #eceae4; --ink-soft: #b8b6ae; --ink-faint: #7d7b74;
--paper: #121316; --panel: #1b1c20; --line: #303136;
--accent: #6fbba4; --accent-soft: #1c3630;
--overdue: #e08277; --overdue-soft: #3a211e;
--soon: #e0ac54; --soon-soft: #3a2e17;
--done: #6a6d75;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); }
.page { max-width: 720px; margin: 0 auto; padding: clamp(18px,4vw,40px); }
h1 { font-size: 1.3rem; margin: 0 0 4px; letter-spacing: -0.01em; }
.sub { color: var(--ink-faint); font-size: 0.86rem; margin: 0 0 20px; }
.list-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.add-fab {
border: none; background: var(--accent); color: #fff; border-radius: 6px;
padding: 12px 18px; font-size: 0.92rem; font-weight: 800; cursor: pointer;
white-space: nowrap; flex-shrink: 0;
}
.add-fab:hover { opacity: 0.9; }
.add-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.add-header h1 { margin: 0; }
.back-btn {
border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
border-radius: 4px; padding: 8px 12px; font-size: 0.84rem; cursor: pointer;
}
.back-btn:hover { color: var(--ink); }
.quickadd {
background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
padding: 14px; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
}
select, input[type=text], input[type=date], input[type=password], input[type=email], input[type=url] { /* url は 2026-10-29 に足した(資料を貼る欄のアドレスだけ形が違った) */
border: 1px solid var(--line); border-radius: 4px; padding: 9px 10px;
font-family: var(--body); font-size: 0.9rem; background: var(--paper); color: var(--ink);
}
.qa-select { flex: 0 0 150px; max-width: 100%; }
.qa-input { flex: 1 1 200px; }
.qa-newcat { flex: 1 1 200px; display: none; }
.due-control { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.due-control button {
border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
border-radius: 4px; padding: 8px 10px; font-size: 0.82rem; cursor: pointer;
}
.due-control button.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.due-control input[type=date] { font-size: 0.82rem; padding: 7px 8px; }
.due-control input[type=date].sel { border-color: var(--accent); }
.qa-submit {
border: none; background: var(--ink); color: var(--paper); border-radius: 4px;
padding: 9px 16px; font-size: 0.9rem; font-weight: 700; cursor: pointer;
}
.filters-row { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.catfilter { font-size: 0.85rem; }
.filters { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.chip {
border: 1px solid var(--line); border-radius: 20px; padding: 6px 14px;
font-size: 0.8rem; color: var(--ink-soft); background: var(--panel); cursor: pointer;
}
.chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip .n { font-family: var(--mono); opacity: 0.7; margin-left: 4px; }
.empty { color: var(--ink-faint); font-size: 0.88rem; padding: 30px 0; text-align: center; }
.group { margin-bottom: 20px; }
.group-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 800; font-size: 0.94rem; margin-bottom: 8px; }
.group-head .count { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-faint); font-weight: 500; }
.group-head input[type=text] { font-weight: 800; font-size: 0.94rem; padding: 4px 8px; flex: 0 1 240px; }
.icon-btn {
border: none; background: none; color: var(--ink-faint); cursor: pointer;
font-size: 0.95rem; padding: 6px 6px; line-height: 1;
}
.icon-btn:hover { color: var(--ink); }
/* 文字のボタン(閉じる・やめる・開く・✎ 編集 など。App.h が印 icon-btn-text を付ける)は、押せると分かる白い丸いボタンに(2026-10-29 ナカヤン)。
記号だけの小さなボタン(✎・×・↑↓ など)は今の形のまま。取り消しの操作が多いので、主な操作の緑とは色を分ける */
.icon-btn.icon-btn-text { display: inline-flex; align-items: center; justify-content: center; text-align: center; color: var(--ink-soft); background: var(--panel);
border: 1px solid var(--line); border-radius: 16px; padding: 4px 12px; min-height: 30px; box-sizing: border-box; font-size: 0.82rem; font-weight: 700; line-height: 1.25; text-decoration: none; }
.icon-btn.icon-btn-text:hover { color: var(--ink); border-color: var(--ink-faint); }
.icon-btn.add-to-cat {
margin-left: auto; font-size: 0.78rem; color: var(--accent); border: 1px solid var(--accent);
border-radius: 20px; padding: 4px 10px; background: var(--accent-soft);
}
.icon-btn.add-to-cat:hover { opacity: 0.85; color: var(--accent); }
.task-list { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
/* 1行目: チェック・本文・編集/削除アイコン。2行目(.task-meta): 期限・メモ・対応者などのピル。
長文でも狭い画面でも、ピルが本文を圧迫せず下に折り返すようにする */
.task { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.task:last-child { border-bottom: none; }
.task input[type=checkbox] { width: 19px; height: 19px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; margin-top: 2px; }
.task .txt { flex: 1 1 140px; min-width: 140px; font-size: 0.94rem; line-height: 1.55; word-break: break-word; cursor: pointer; padding-top: 1px; }
.task.done .txt { color: var(--ink-faint); text-decoration: line-through; }
.task-icons { display: flex; gap: 2px; flex-shrink: 0; margin-left: auto; }
.task-meta { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-left: 29px; }
.badge { font-family: var(--mono); font-size: 0.72rem; padding: 3px 8px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }
.badge.overdue { background: var(--overdue-soft); color: var(--overdue); }
.badge.soon { background: var(--soon-soft); color: var(--soon); }
.badge.week { background: var(--line); color: var(--ink-soft); }
.badge.month { background: var(--line); color: var(--ink-soft); }
.badge.done { color: var(--done); }
.del { border: none; background: none; color: var(--ink-faint); cursor: pointer; font-size: 1.15rem; line-height: 1; padding: 6px 6px; flex-shrink: 0; }
.del:hover { color: var(--overdue); }
.edit-row { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; }
.edit-row .edit-top { display: flex; gap: 8px; }
.edit-row .edit-top input[type=text] { flex: 1; }
.edit-actions { display: flex; gap: 8px; justify-content: flex-end; }
.edit-actions button { border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); border-radius: 4px; padding: 7px 14px; font-size: 0.82rem; cursor: pointer; }
.edit-actions button.save { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.foot { margin-top: 30px; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); }
.trash-btn {
border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
border-radius: 6px; padding: 12px 16px; font-size: 0.86rem; cursor: pointer; white-space: nowrap;
}
.trash-btn:hover { color: var(--ink); }
.header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.toast {
position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
background: var(--ink); color: var(--paper); border-radius: 6px;
padding: 12px 16px; font-size: 0.86rem; display: flex; align-items: center; gap: 14px;
box-shadow: 0 6px 20px rgba(0,0,0,0.25); z-index: 100; max-width: 90vw;
}
.toast button { border: none; background: none; color: var(--accent); font-weight: 800; cursor: pointer; font-size: 0.86rem; white-space: nowrap; }
.toast.hidden { display: none; }
.trash-item {
display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.trash-item:last-child { border-bottom: none; }
.trash-item .txt { flex: 1; font-size: 0.9rem; color: var(--ink-soft); }
.trash-item .cat { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); }
.trash-item .when { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); white-space: nowrap; }
.add-confirm {
margin: 10px 0 0; font-size: 0.85rem; color: var(--accent); font-weight: 700;
}
.add-confirm.hidden { display: none; }
.trash-section-title { font-weight: 800; font-size: 0.88rem; margin: 20px 0 8px; }
.trash-section-title:first-child { margin-top: 0; }
/* ゴミ箱の「完全に削除」「空にする」 */
.purge-btn {
border: 1px solid var(--line); background: var(--paper); color: var(--overdue);
border-radius: 4px; padding: 6px 12px; font-size: 0.8rem; cursor: pointer; white-space: nowrap;
}
.purge-btn:hover { background: var(--overdue-soft); border-color: var(--overdue); }
.purge-btn:disabled { opacity: 0.4; cursor: default; background: var(--paper); border-color: var(--line); }
.trash-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.restore-btn {
border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent);
border-radius: 4px; padding: 6px 12px; font-size: 0.8rem; cursor: pointer; white-space: nowrap;
}
.alert-box {
border: 1px solid var(--overdue);
background: var(--overdue-soft);
border-radius: 6px;
padding: 14px 16px;
margin-bottom: 20px;
}
.alert-box.empty { border-color: var(--line); background: var(--panel); }
.alert-title { font-weight: 800; font-size: 0.88rem; margin: 0 0 8px; color: var(--overdue); }
.alert-box.empty .alert-title { color: var(--ink-faint); }
.alert-empty-text { font-size: 0.84rem; color: var(--ink-faint); }
.alert-list { display: flex; flex-direction: column; gap: 10px; }
.alert-item { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px 10px; font-size: 0.9rem; }
.alert-item input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; margin-top: 2px; }
.alert-item .txt { flex: 1 1 140px; min-width: 140px; line-height: 1.5; padding-top: 1px; cursor: pointer; }
.alert-item .txt:hover { text-decoration: underline; }
.alert-item .alert-edit { flex-shrink: 0; font-size: 0.82rem; }
.alert-item .meta { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 27px; }
.alert-item .cat { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); }
.memo-pill {
font-family: var(--mono); font-size: 0.7rem; padding: 3px 8px; border-radius: 10px;
border: 1px solid var(--line); color: var(--ink-faint); background: var(--paper);
cursor: pointer; flex-shrink: 0; white-space: nowrap;
}
.memo-pill.has { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.memo-edit { display: flex; flex-direction: column; gap: 4px; }
.memo-edit label { font-size: 0.78rem; color: var(--ink-faint); }
.memo-edit textarea {
border: 1px solid var(--line); border-radius: 4px; padding: 8px;
font-family: var(--body); font-size: 0.88rem; background: var(--paper); color: var(--ink);
resize: vertical; min-height: 54px;
}
.login-page {
max-width: 360px; margin: 0 auto; padding: min(18vh, 120px) 20px 20px;
}
.login-page h1 { margin-bottom: 4px; font-size: 1.5rem; }
.login-form {
background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
padding: 24px; display: flex; flex-direction: column; margin-top: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.field-label {
font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); margin: 14px 0 6px;
}
.field-label:first-of-type { margin-top: 0; }
.login-form input {
width: 100%; font-size: 1rem; padding: 12px 12px;
}
.login-form input:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.login-form button {
border: none; background: var(--ink); color: var(--paper); border-radius: 6px;
padding: 13px 16px; font-size: 0.96rem; font-weight: 700; cursor: pointer; margin-top: 16px;
}
.login-form button:hover { opacity: 0.9; }
.login-error {
color: var(--overdue); font-size: 0.84rem; min-height: 1.2em; margin: 8px 0 0;
}
.login-error:empty { margin: 0; min-height: 0; }
.login-form .login-link { background: none !important; color: var(--accent) !important; border: none !important; padding: 8px 0 0 !important; font-size: 0.86rem; text-decoration: underline; cursor: pointer; width: auto; align-self: center; }
.login-msg { color: var(--accent); font-size: 0.86rem; margin: 8px 0; line-height: 1.6; }
.login-msg:empty { margin: 0; }
#pwAdminBtn { position: relative; }
#pwAdminBtn .tab-badge { position: static; margin-left: 6px; }
.pw-link-box { border: 2px solid var(--accent); }
.pw-link-url { word-break: break-all; font-family: var(--mono); font-size: 0.78rem; background: var(--accent-soft); padding: 8px 10px; border-radius: 6px; margin: 8px 0; }
.pw-send-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
.pw-send { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--accent); background: var(--panel); color: var(--accent); font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; }
.pw-send.line { background: #06c755; border-color: #06c755; color: #fff; }
.pw-send.mail { background: var(--accent); border-color: var(--accent); color: #fff; }
.pw-req { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pw-req-who { display: flex; flex-direction: column; gap: 2px; }
.pw-req-btns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pw-req-btns .qa-submit { width: auto; min-height: 44px; padding: 0 18px; }
.pw-new-user { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: 16px; flex: 1 1 200px; min-width: 0; }
.pw-user-row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pw-user-name { min-width: 7em; }
.pw-status { font-size: 0.78rem; font-weight: 800; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.pw-status.ok { background: var(--accent-soft); color: var(--accent); }
.pw-status.wait { background: var(--soon-soft); color: var(--soon); }
.pw-status.bad { background: var(--overdue-soft); color: var(--overdue); }
.pw-status.none { background: var(--line); color: var(--ink-soft); }
.pw-user-note { font-size: 0.78rem; }
.pw-del { border-color: var(--overdue-soft); }
.pw-del-btn { min-height: 44px; padding: 0 18px; border-radius: 6px; border: 1.5px solid var(--overdue); background: var(--panel); color: var(--overdue); font: inherit; font-weight: 800; cursor: pointer; }
.pw-del-btn:hover { background: var(--overdue-soft); }
.pw-addto { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; margin-top: 8px; }
.pw-user-sel { min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: 16px; }
.userbar {
display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
font-family: var(--mono); font-size: 0.76rem; color: var(--ink-faint); margin-bottom: 8px;
}
.userbar button {
border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
border-radius: 4px; padding: 6px 10px; font-size: 0.76rem; cursor: pointer; white-space: nowrap;
}
.gear-wrap { position: relative; }
.userbar .gear-btn { font-size: 1rem; padding: 4px 10px; line-height: 1.2; position: relative; }
.userbar .gear-btn.on { background: var(--accent-soft); border-color: var(--accent); }
.gear-btn .tab-badge { position: absolute; top: -6px; right: -6px; }
.gear-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,0.18); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.gear-menu[hidden] { display: none; }
.userbar .gear-menu button { border: 0; background: transparent; text-align: left; padding: 9px 12px; font-family: var(--sans, inherit); font-size: 0.88rem; color: var(--ink); border-radius: 6px; }
.userbar .gear-menu button:hover { background: var(--accent-soft); }
.userbar select {
font-family: var(--mono); font-size: 0.76rem; padding: 6px; border-radius: 4px; max-width: 100%;
}
/* ---- 機能タブ ---- */
.tabs {
display: flex; gap: 4px; margin: 4px 0 18px; border-bottom: 1px solid var(--line);
overflow-x: auto; -webkit-overflow-scrolling: touch;
touch-action: pan-y; /* 横のドラッグはタブの並び替えに使う(縦のスクロールは通常どおり) */
}
.tabs button {
border: none; background: none; color: var(--ink-faint); cursor: pointer; white-space: nowrap;
padding: 10px 14px; font-size: 0.9rem; font-weight: 700; font-family: var(--body);
border-bottom: 2px solid transparent; margin-bottom: -1px;
user-select: none; -webkit-user-select: none;
}
.tabs button.dragging { opacity: 0.4; background: var(--accent-soft); border-radius: 6px 6px 0 0; }
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.tabs button:disabled { color: var(--ink-faint); opacity: 0.45; cursor: default; }
.tabs button:disabled:hover { color: var(--ink-faint); }
/* タスクの「出所」(会議・課題・WBS・フロー図から生まれたことを示す) */
.source-pill { border-style: dashed; color: var(--ink-soft); }
/* ---- 課題管理 ---- */
.pri-高 { background: var(--overdue-soft); color: var(--overdue); }
.pri-中 { background: var(--soon-soft); color: var(--soon); }
.pri-低 { background: var(--line); color: var(--ink-soft); }
.status-未対応 { border-color: var(--overdue); color: var(--overdue); }
.status-対応中 { border-color: var(--soon); color: var(--soon); }
.status-解決 { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.status-クローズ { color: var(--ink-faint); }
.issue-row .txt { font-weight: 600; }
/* ---- WBS ---- */
.pbar {
position: relative; display: inline-block; width: 120px; height: 16px; border-radius: 8px;
background: var(--line); overflow: hidden; vertical-align: middle; flex-shrink: 0;
}
.pbar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.pbar-num { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-family: var(--mono); font-size: 0.7rem; line-height: 16px; color: var(--ink); }
.wbs-indent { font-family: var(--mono); color: var(--ink-faint); flex-shrink: 0; width: 1.2em; text-align: center; }
.wbs-row.wbs-l1 .txt { font-weight: 700; }
.wbs-row.wbs-l2 { padding-left: 30px; }
.wbs-row.wbs-l3 { padding-left: 48px; }
.wbs-row.wbs-l3 .txt { font-size: 0.9rem; }
.edit-row.wbs-l2 { margin-left: 16px; }
.edit-row.wbs-l3 { margin-left: 34px; }
.wbs-row.done .txt { color: var(--ink-faint); text-decoration: none; }
/* ---- カレンダー(TODOの期限を日/週/月で見る) ---- */
.cal-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.cal-title { font-weight: 800; font-size: 1.05rem; flex: 1 1 auto; }
.cal-hide-done { font-size: 0.82rem; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); padding: 4px 0; }
.cal-wd.sun, .cal-cell.sun .cal-date, .cal-col.sun .cal-col-head { color: var(--overdue); }
.cal-wd.sat, .cal-cell.sat .cal-date, .cal-col.sat .cal-col-head { color: #3b6ea5; }
.cal-cell {
background: var(--panel); border: 1px solid var(--line); border-radius: 6px; min-height: 92px; padding: 4px;
cursor: pointer; display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.cal-cell:hover { border-color: var(--accent); }
.cal-cell.other { opacity: 0.45; }
.cal-cell.today { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft) inset; }
.cal-date { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft); }
.cal-cell.today .cal-date { color: var(--accent); font-weight: 800; }
.cal-count { display: none; }
.cal-chips { display: flex; flex-direction: column; gap: 2px; }
.cal-chip {
font-size: 0.72rem; line-height: 1.3; padding: 2px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--ink);
border-left: 3px solid var(--accent); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-chip:hover, .cal-chip.selected { outline: 2px solid var(--accent); }
.cal-chip.overdue { background: var(--overdue-soft); border-left-color: var(--overdue); }
.cal-chip.soon { background: var(--soon-soft); border-left-color: var(--soon); }
.cal-chip.done { background: var(--line); border-left-color: var(--ink-faint); color: var(--ink-faint); text-decoration: line-through; }
/* 会議の回は青系で区別する */
.cal-chip.meeting { background: #e3ecf6; border-left-color: #3b6ea5; color: var(--ink); }
.cal-chip.meeting.held { opacity: 0.6; }
.cal-toggles { display: flex; gap: 12px; flex-wrap: wrap; }
.cal-toggle-task { color: var(--accent); }
.cal-toggle-meeting { color: #3b6ea5; }
.cal-detail.meeting { border-color: #3b6ea5; }
.cal-more { font-size: 0.7rem; color: var(--ink-faint); padding: 0 6px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-col { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px; min-height: 160px; display: flex; flex-direction: column; gap: 4px; }
.cal-col.today { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft) inset; }
.cal-col-head { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-soft); padding-bottom: 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.cal-col.today .cal-col-head { color: var(--accent); font-weight: 800; }
.cal-col .cal-chip { white-space: normal; }
.cal-none { color: var(--ink-faint); font-size: 0.8rem; text-align: center; padding: 6px 0; }
.task.cal-selected { outline: 2px solid var(--accent); }
.cal-detail { background: var(--panel); border: 1px solid var(--accent); border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; }
.cal-detail-head { display: flex; align-items: flex-start; gap: 8px; }
.cal-detail-head b { flex: 1; font-size: 1rem; }
.cal-memo { white-space: pre-line; font-size: 0.88rem; margin: 10px 0 0; padding: 8px 10px; background: var(--paper); border-radius: 6px; }
.cal-memo.empty-memo { color: var(--ink-faint); }
@media (max-width: 480px) {
.cal-cell { min-height: 56px; padding: 3px; }
.cal-chips, .cal-more { display: none; } /* 狭い画面では件数だけ。日付を押すと「日」表示で中身が見える */
.cal-count { display: block; font-size: 0.7rem; color: var(--accent); font-weight: 700; }
.cal-week { grid-template-columns: 1fr; }
.cal-col { min-height: 0; }
.cal-title { flex-basis: 100%; }
}
/* ---- リストの設定(参加者・名簿) ---- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.person-chip {
display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 20px;
padding: 6px 8px 6px 14px; font-size: 0.86rem; background: var(--panel); color: var(--ink);
}
.chip-x { border: none; background: none; color: var(--ink-faint); cursor: pointer; font-size: 1rem; padding: 0 4px; line-height: 1; }
.chip-x:hover { color: var(--overdue); }
.due-control .add-person { border-style: dashed; color: var(--ink-soft); }
/* ---- フロー図 ---- */
.mermaid-box {
background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px;
overflow-x: auto; min-height: 80px;
}
.mermaid-box svg { max-width: 100%; height: auto; }
.flow-node .kind-badge { background: var(--line); color: var(--ink-soft); flex-shrink: 0; }
.flow-node.kind-decision .kind-badge { background: var(--soon-soft); color: var(--soon); }
.flow-node.kind-start .kind-badge, .flow-node.kind-end .kind-badge { background: var(--accent-soft); color: var(--accent); }
.flow-node > input[type=text] { flex: 1 1 140px; min-width: 140px; }
.flow-links { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; margin-left: 4px; }
.flow-branch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.flow-branch input[type=text] { flex: 1 1 140px; }
.flow-branch select { flex: 1 1 180px; max-width: 100%; }
/* ---- 会議アジェンダ ---- */
.mtg-section { margin: 24px 0; }
.mtg-section h2 {
font-size: 1rem; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--line);
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.mtg-section h2 .num { font-family: var(--mono); font-size: 0.82rem; color: var(--accent); }
.mtg-section h2 .count { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-faint); font-weight: 500; }
.issue-high { border-left: 4px solid var(--overdue); background: var(--overdue-soft); }
.issue-high .txt { font-weight: 700; }
.agenda-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; margin-bottom: 6px;
}
.agenda-row .count { font-family: var(--mono); color: var(--ink-faint); }
.agenda-row .txt { flex: 1 1 140px; min-width: 140px; font-weight: 600; cursor: pointer; }
.expand-btn { font-size: 1.1rem; font-weight: 700; color: var(--accent); padding: 2px 8px; }
.agenda-item { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; margin-bottom: 10px; }
.agenda-item input[type=text] { flex: 1; font-weight: 700; }
.agenda-item textarea { margin-top: 6px; min-height: 48px; }
/* ④決定事項の1項目(決めたこと + その議題から作ったアクション) */
.decision-card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; margin-bottom: 10px; }
.decision-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.decision-head b { flex: 0 0 auto; }
.decision-text { white-space: pre-line; color: var(--ink); }
.decision-actions { margin-top: 8px; }
.decision-actions .task { background: var(--paper); }
/* 「決めたこと」の枠。テキスト欄とボタンをひとつの枠に見せる */
.dec-box { margin-top: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); padding: 0 0 6px; }
.dec-box textarea { margin-top: 0; border: none; border-radius: 6px 6px 0 0; background: transparent; }
.dec-box textarea:focus { outline: none; box-shadow: none; }
.dec-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dec-tools { margin: 0 6px; justify-content: flex-end; }
.agenda-item .count { font-family: var(--mono); color: var(--ink-faint); }
.agenda-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.agenda-tools button {
border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
border-radius: 4px; padding: 6px 10px; font-size: 0.8rem; cursor: pointer;
}
.agenda-tools button.primary { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.agenda-tools button:disabled { opacity: 0.4; cursor: default; }
.inline-form {
border: 1px dashed var(--accent); border-radius: 6px; padding: 10px 12px; margin-top: 8px;
display: flex; flex-direction: column; gap: 6px; background: var(--paper);
}
.module .quickadd label.field-label { margin: 6px 0 2px; }
/* 縦並びのフォーム。横並び用の flex 幅指定(qa-input/qa-select)が縦方向に効かないようにする */
.form-col { flex-direction: column; align-items: stretch; }
.form-col > input, .form-col > select, .form-col > textarea,
.form-col > .qa-input, .form-col > .qa-select { flex: 0 0 auto; width: 100%; max-width: none; }
.inline-form > input, .inline-form > .qa-input { flex: 0 0 auto; width: 100%; }
.task .txt { white-space: pre-line; }
.module textarea {
border: 1px solid var(--line); border-radius: 4px; padding: 8px; width: 100%;
font-family: var(--body); font-size: 0.88rem; background: var(--paper); color: var(--ink);
resize: vertical; min-height: 64px;
}
/* ---- モバイル向け調整(幅480px以下) ---- */
@media (max-width: 480px) {
.page { padding: 14px; }
h1 { font-size: 1.15rem; }
.userbar { justify-content: flex-start; font-size: 0.72rem; }
.list-header { align-items: stretch; }
.list-header h1 { font-size: 1.2rem; }
.header-actions { width: 100%; }
.add-fab, .trash-btn { flex: 1 1 0; padding: 12px 10px; text-align: center; }
.quickadd { flex-direction: column; align-items: stretch; }
.qa-select, .qa-input, .qa-newcat { flex: 1 1 auto; width: 100%; }
.due-control, #assigneeButtons > div { width: 100%; }
.due-control button { flex: 1 1 auto; padding: 10px 6px; }
.qa-submit { width: 100%; padding: 12px; }
.filters-row { flex-direction: column; align-items: stretch; }
.catfilter select { width: 100%; }
.chip { padding: 8px 14px; }
.task { padding: 14px 12px; }
.task-meta { margin-left: 0; }
.del { font-size: 1.3rem; }
.icon-btn { font-size: 1.05rem; }
}
/* ---- チャット(js/chat.js) ---- */
.tab-badge {
display: inline-block; min-width: 18px; margin-left: 6px; padding: 1px 6px; border-radius: 10px;
background: var(--overdue); color: #fff; font-size: 0.72rem; font-weight: 800; line-height: 1.4; text-align: center;
}
.chat-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 16px; min-height: 60vh; }
.chat-side { border-right: 1px solid var(--line); padding-right: 12px; display: flex; flex-direction: column; gap: 2px; }
.chat-side-head {
display: flex; align-items: center; justify-content: space-between; margin: 14px 0 4px;
font-size: 0.76rem; font-weight: 800; color: var(--ink-faint); letter-spacing: 0.04em;
}
.chat-side-head:first-child { margin-top: 0; }
.chat-add { border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); border-radius: 6px; cursor: pointer; padding: 0 8px; font-size: 0.95rem; line-height: 1.5; }
.chat-add:hover { color: var(--accent); border-color: var(--accent); }
.chat-item {
display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: none; background: none;
padding: 7px 8px; border-radius: 6px; cursor: pointer; color: var(--ink-soft); font-size: 0.88rem; font-family: var(--body);
}
.chat-item:hover { background: var(--accent-soft); color: var(--ink); }
.chat-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.chat-item.unread .chat-item-name { color: var(--ink); font-weight: 800; }
.chat-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-sub { color: var(--ink-faint); font-size: 0.74rem; }
.chat-unread { background: var(--overdue); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 0.7rem; font-weight: 800; white-space: nowrap; line-height: 1.6; }
/* 未読のある会話：名前を太く、左に点 */
.chat-item.unread .chat-item-name { font-weight: 800; color: var(--ink); }
.chat-item.unread .chat-item-name::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--overdue); margin-right: 6px; vertical-align: middle; }
.chat-item.unread .chat-item-sub { display: none; }
.chat-hint { color: var(--ink-faint); font-size: 0.78rem; margin: 4px 0 6px; line-height: 1.5; }
.chat-archived summary { color: var(--ink-faint); font-size: 0.78rem; cursor: pointer; padding: 4px 8px; }
.chat-main { display: flex; flex-direction: column; min-width: 0; }
.chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.chat-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-title strong { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-title-sub { color: var(--ink-faint); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* やりとりの字の大きさ(発言ごとに拡大・縮小。スクロールする箱には掛けないので、つないだ列の計算は変わらない) */
body.chat-fs-s .chat-log > :not(.col-spacer) { zoom: 0.86; }
body.chat-fs-l .chat-log > :not(.col-spacer) { zoom: 1.14; }
.chat-fs { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
.chat-fs-opt { border: 0; background: var(--panel); color: var(--ink-soft); font: inherit; font-size: 0.76rem; padding: 3px 9px; cursor: pointer; }
.chat-fs-opt.on { background: var(--accent); color: #fff; font-weight: 700; }
/* PC：見出しを1行に(名前と説明を横に並べ、帯を細く) */
@media (min-width: 641px) {
.chat-main > .chat-head { padding-top: 2px; padding-bottom: 6px; }
.chat-title { flex-direction: row; align-items: baseline; gap: 10px; }
.chat-title strong { flex: 0 1 auto; }
.chat-title-sub { flex: 1 1 0; min-width: 0; }
.chat-head .zoom-btn { padding: 3px 11px; }
}
/* PC：上の帯(名前・プロジェクト・⚙)は、入るならタブと同じ行の右に置く(入らなければ今までどおりタブの上の行)。上の余白も詰める。
右から並べる向き(row-reverse)で折り返すので、入らないときは帯が右上の行に残り、タブはその下の行いっぱいに広がる */
@media (min-width: 641px) {
.page { padding-top: 14px; }
#appView { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: flex-end; column-gap: 12px; }
#appView > * { flex: 0 0 100%; min-width: 0; }
#appView > .userbar { flex: 0 0 auto; margin-bottom: 12px; order: -2; }
#appView > .tabs-row { flex: 1 0 auto; margin: 0 0 12px; order: -1; } /* 料金の知らせ(#billingGlobal)はタブの下へ */
/* 名前とプロジェクト名の字は大きく、帯の高さ(29px)は変えない(チャットの欄の高さに響かないように) */
#appView > .userbar { font-size: 0.92rem; }
#appView > .userbar select { font-size: 0.95rem; height: 29px; padding: 2px 6px; max-width: 260px; text-overflow: ellipsis; }
/* タブは左右の余白を詰め、タブの横に縦のスクロールバーを出さない(帯とタブが1行に入りやすいように) */
#appView > .tabs-row .tabs { overflow-y: hidden; }
#appView > .tabs-row .tabs button { padding-left: 11px; padding-right: 11px; }
}
.chat-back { display: none; }
.chat-log { flex: 1; overflow-y: auto; max-height: 58vh; min-height: 240px; padding: 8px 2px; }
.chat-day { text-align: center; color: var(--ink-faint); font-size: 0.74rem; margin: 14px 0 6px; }
.chat-msg { position: relative; padding: 6px 8px; border-radius: 6px; }
.chat-msg.compact { padding-top: 1px; }
.chat-msg:hover { background: var(--panel); }
.chat-meta { display: flex; gap: 8px; align-items: baseline; font-size: 0.82rem; }
.chat-meta span { color: var(--ink-faint); font-size: 0.74rem; font-family: var(--mono); }
.chat-text { white-space: pre-wrap; word-break: break-word; font-size: 0.92rem; line-height: 1.6; }
.chat-text a { color: var(--accent); }
.chat-text.deleted { color: var(--ink-faint); font-style: italic; font-size: 0.84rem; }
.chat-edited { color: var(--ink-faint); font-size: 0.72rem; margin-left: 6px; }
.chat-acts { display: none; position: absolute; top: 2px; right: 6px; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 1px; }
.chat-msg:hover .chat-acts, .chat-msg:focus-within .chat-acts { display: flex; }
.chat-acts button { border: none; background: none; color: var(--ink-soft); font-size: 0.74rem; cursor: pointer; padding: 3px 6px; border-radius: 4px; font-family: var(--body); }
.chat-acts button:hover { background: var(--accent-soft); color: var(--accent); }
.chat-more { display: block; margin: 0 auto 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); border-radius: 6px; padding: 4px 12px; font-size: 0.8rem; cursor: pointer; }
.chat-composer { display: flex; gap: 8px; align-items: flex-end; border-top: 1px solid var(--line); padding-top: 10px; }
.chat-input, .chat-edit {
flex: 1; width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
font: inherit; font-size: 0.92rem; background: var(--panel); color: var(--ink);
}
.chat-edit-btns { display: flex; gap: 6px; margin-top: 4px; }
.chat-offline { color: var(--soon); font-size: 0.82rem; margin: 0 0 8px; }
.person-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.chip-row .person-chip { cursor: pointer; padding: 6px 14px; font-family: var(--body); }
.billing-banner {
background: var(--overdue-soft); color: var(--overdue); border: 1px solid var(--overdue); border-radius: 6px;
padding: 10px 12px; margin: 0 0 14px; font-size: 0.86rem; line-height: 1.6; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
@media (max-width: 640px) {
.chat-wrap { grid-template-columns: 1fr; }
.chat-side { border-right: none; padding-right: 0; }
.chat-wrap.show-conv .chat-side { display: none; }
.chat-wrap.show-list .chat-main { display: none; }
.chat-back { display: inline-block; }
.chat-log { max-height: 60vh; }
.chat-acts { position: static; display: flex; margin-top: 2px; background: none; border: none; }
.chat-composer .qa-submit { width: auto; flex: 0 0 auto; padding: 10px 14px; }
}
.chat-input { min-width: 0; }
/* ---- チャット：通知・@の候補・タイムライン ---- */
.chat-notify { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.chat-notify .icon-btn { font-size: 0.8rem; }
.chat-notify-on { font-size: 0.8rem; color: var(--accent); font-weight: 700; }
/* 文字のリンクのように見えていた操作は、押せると分かる丸いボタンに(2026-10-29 ナカヤン：灰色の文字に下線だけでは押せると分からない。全部の画面で)。
長い文はスマホで折り返す(横にはみ出さない) */
.chat-link-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; vertical-align: middle; max-width: 100%;
text-decoration: none; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
border-radius: 16px; padding: 4px 12px; min-height: 30px; box-sizing: border-box; font-family: var(--body); font-size: 0.8rem; font-weight: 700; line-height: 1.25; cursor: pointer; }
.chat-link-btn:hover, .chat-link-btn:active { background: var(--accent); color: #fff; }
.chat-link-btn:disabled { opacity: 0.6; cursor: default; background: var(--accent-soft); color: var(--accent); }
.chat-mention { color: var(--accent); font-weight: 700; }
.chat-mention.me { background: var(--soon-soft); color: var(--soon); border-radius: 4px; padding: 0 3px; }
.chat-text.to-me { border-left: 3px solid var(--soon); padding-left: 8px; }
.mention-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.mention-wrap textarea { flex: 1; }
.mention-menu {
position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 20; min-width: 160px; max-width: 100%;
background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.12);
padding: 4px; display: flex; flex-direction: column;
}
.tl-composer .mention-menu, .tl-comment-form .mention-menu { bottom: auto; top: calc(100% + 4px); }
.mention-menu.floating { position: fixed; z-index: 90; max-width: min(320px, calc(100vw - 16px)); }
.mention-item { border: none; background: none; text-align: left; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 0.88rem; color: var(--ink); font-family: var(--body); }
.mention-item.sel, .mention-item:hover { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.tl-composer { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tl-log { max-height: 62vh; }
.tl-item { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 8px 0; background: var(--panel); }
.tl-item.auto { background: transparent; border-style: dashed; padding: 8px 12px; }
.tl-auto-line { display: flex; gap: 8px; align-items: baseline; font-size: 0.86rem; }
.tl-auto-text { flex: 1; min-width: 0; line-height: 1.6; }
.tl-icon { width: 1.3em; text-align: center; }
.tl-time { color: var(--ink-faint); font-size: 0.74rem; font-family: var(--mono); white-space: nowrap; }
.tl-labels { color: var(--ink-soft); font-size: 0.8rem; margin: 4px 0 0 1.9em; }
.auto-list .chat-link-btn { font-size: 0.78rem; }
.tl-attach-pill { margin-top: 6px; cursor: pointer; border: none; font-family: var(--body); }
.tl-own-acts { display: flex; gap: 4px; margin-top: 4px; }
.tl-comments { margin: 8px 0 0 12px; border-left: 2px solid var(--line); padding-left: 10px; display: flex; flex-direction: column; gap: 6px; }
.tl-comment .chat-meta { gap: 6px; }
.tl-comment-form { margin-top: 8px; display: flex; flex-direction: column; }
@media (max-width: 640px) {
}
/* ---- チャット：添付ファイル ---- */
.chat-composer-box { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 6px 8px 4px; margin-top: 8px; }
.chat-composer-box:focus-within { border-color: var(--accent); }
.chat-composer-box.dragging { outline: 2px dashed var(--accent); outline-offset: 2px; }
.chat-composer-box .chat-input { border: none; background: transparent; padding: 6px 4px; resize: none; min-height: 44px; outline: none; }
.chat-toolbar { display: flex; align-items: center; gap: 4px; padding-top: 2px; }
.chat-tool { width: 34px; height: 34px; border: none; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 1.15rem; font-family: var(--body); line-height: 1; }
.chat-tool:hover { background: var(--accent-soft); color: var(--accent); }
.chat-toolbar-hint { flex: 1; color: var(--ink-faint); font-size: 0.72rem; text-align: right; padding-right: 4px; }
.chat-send { width: 38px; height: 34px; border: none; border-radius: 8px; background: transparent; color: var(--ink-faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
.chat-toolbar-hint + .chat-send { margin-left: 0; }
.chat-composer-box.has-content .chat-send { background: var(--accent); color: #fff; }
.chat-pending { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chat-pending-chip { font-size: 0.8rem; padding: 4px 6px 4px 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chat-img { max-width: 240px; max-height: 180px; border-radius: 6px; border: 1px solid var(--line); display: block; object-fit: cover; }
.chat-file { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); color: var(--ink); text-decoration: none; max-width: 100%; }
.chat-file:hover { border-color: var(--accent); }
.chat-file-icon { font-size: 1.1rem; }
.chat-file-name { font-size: 0.86rem; color: var(--accent); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chat-file-size { font-size: 0.74rem; color: var(--ink-faint); font-family: var(--mono); white-space: nowrap; }
@media (max-width: 640px) { .chat-img { max-width: 100%; } }
/* ---- タブの帯と並び替え(⇅) ---- */
.tabs-row { display: flex; align-items: flex-end; gap: 6px; margin: 4px 0 18px; border-bottom: 1px solid var(--line); }
.tabs-row .tabs { flex: 1; min-width: 0; margin: 0; border-bottom: none; }
.tab-order-btn { flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); border-radius: 6px; cursor: pointer; padding: 4px 9px; margin-bottom: 6px; font-size: 0.95rem; }
.tab-order-btn:hover { color: var(--accent); border-color: var(--accent); }
@media (pointer: coarse) { .tabs { touch-action: auto; } }
.tab-order-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.tab-order-panel { background: var(--panel); border-radius: 10px; padding: 18px; width: 100%; max-width: 380px; max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
.tab-order-panel h2 { font-size: 1.05rem; margin: 0 0 6px; }
.tab-order-list { display: flex; flex-direction: column; gap: 6px; }
.tab-order-item { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.tab-order-name { font-weight: 700; font-size: 0.92rem; }
.tab-order-note { color: var(--ink-faint); font-size: 0.74rem; flex: 1; }
.tab-order-item .tab-order-name + .tab-order-move { margin-left: auto; }
.tab-order-move { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 6px; width: 40px; height: 36px; font-size: 1rem; cursor: pointer; }
.tab-order-move:disabled { opacity: 0.3; cursor: default; }
/* ---- チャット：絵文字の一覧 ---- */
.chat-composer-box { position: relative; }
.emoji-pop {
position: absolute; left: 8px; bottom: calc(100% + 6px); z-index: 30; width: min(320px, calc(100vw - 48px)); max-height: 280px; overflow-y: auto;
background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.16); padding: 8px;
}
.emoji-group { color: var(--ink-faint); font-size: 0.72rem; font-weight: 700; margin: 4px 2px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-btn { border: none; background: none; font-size: 1.3rem; line-height: 1; padding: 6px 0; border-radius: 6px; cursor: pointer; }
.emoji-btn:hover { background: var(--accent-soft); }
/* ---- チャット：書式の帯・書式つきの表示・音声入力 ---- */
.fmt-bar { display: flex; align-items: center; gap: 2px; padding: 2px 2px 6px; margin: -2px -4px 4px; border-bottom: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fmt-btn { flex: 0 0 auto; min-width: 32px; height: 30px; border: none; border-radius: 6px; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 0.95rem; font-family: var(--body); padding: 0 6px; }
.fmt-btn:hover { background: var(--accent-soft); color: var(--accent); }
.fmt-btn.fmt-small { font-size: 0.78rem; font-family: var(--mono); }
.fmt-sep { flex: 0 0 1px; width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.tl-composer .fmt-bar { margin: 0; }
.chat-aa-text { font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; }
.chat-tool.on { color: var(--accent); }
.chat-mic.on { background: var(--overdue-soft); color: var(--overdue); animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(176,57,47,0.35); } 50% { box-shadow: 0 0 0 6px rgba(176,57,47,0); } }
.chat-text .rt-p { white-space: pre-wrap; }
.chat-text .rt-code { font-family: var(--mono); font-size: 0.86em; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.chat-text .rt-pre { font-family: var(--mono); font-size: 0.82rem; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin: 4px 0; overflow-x: auto; white-space: pre; }
.chat-text .rt-quote { border-left: 3px solid var(--line); margin: 4px 0; padding: 2px 0 2px 10px; color: var(--ink-soft); white-space: pre-wrap; }
.chat-text .rt-list { margin: 2px 0; padding-left: 1.5em; white-space: normal; }
.chat-text .rt-list li { margin: 1px 0; }
.chat-text { white-space: normal; }
/* ---- チャット：AI で整える ---- */
.tidy-bar { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 4px 6px 4px 10px; margin: 2px 0 4px; }
.tidy-bar .tidy-err { color: var(--overdue); }
.tidy-x { margin-left: auto; border: none; background: none; color: var(--ink-faint); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }
/* ---- 通話(js/voice.js) ---- */
body.in-call { padding-bottom: 92px; }
.voice-bar {
position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 90; width: min(720px, calc(100vw - 24px));
display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper); border-radius: 12px; padding: 10px 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.voice-bar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.voice-bar-title { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.voice-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; flex: 0 0 auto; animation: mic-pulse 1.6s ease-in-out infinite; }
.voice-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.voice-chip { font-size: 0.76rem; padding: 2px 8px; border-radius: 12px; background: rgba(255,255,255,0.12); border: 2px solid transparent; transition: border-color 0.15s; }
.voice-chip.speaking { border-color: #4ade80; }
/* ミュートの人は薄くしない。名前の前のマイクオフの印で分かる(2026-10-29 ナカヤン) */
.voice-chip { display: inline-flex; align-items: center; gap: 3px; }
.voice-chip-mic { display: inline-flex; flex: 0 0 auto; }
.voice-chip-mic svg { width: 1.15em; height: 1.15em; }
.voice-bar-note { font-size: 0.7rem; opacity: 0.7; }
.voice-bar-btns { display: flex; gap: 6px; flex: 0 0 auto; }
/* 通話バーの状態：つながっている＝緑の点、つないでいる＝黄、不安定＝赤 */
.voice-status { font-size: 0.74rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 4px; white-space: nowrap; }
.voice-bar.st-ok .voice-status { background: rgba(80,200,140,0.22); color: #7be0aa; }
.voice-bar.st-wait .voice-status { background: rgba(232,170,48,0.25); color: #f2c76a; }
.voice-bar.st-warn .voice-status, .voice-bar.st-bad .voice-status { background: rgba(224,90,80,0.28); color: #ffb3ab; }
.voice-bar.st-wait .voice-dot { background: #e8aa30 !important; animation: voice-blink 1s infinite; }
.voice-bar.st-bad .voice-dot, .voice-bar.st-warn .voice-dot { background: #e05a50 !important; animation: voice-blink 0.8s infinite; }
@keyframes voice-blink { 50% { opacity: 0.3; } }
.voice-chip.no-audio { background: rgba(224,90,80,0.3) !important; color: #ffd2cc !important; }
/* ---- オンラインMTG部屋：共有された画面を窓いっぱいに ---- */
body.mtg-open .voice-bar { display: none; }
.mtg-stage { position: fixed; inset: 0; z-index: 75; background: #14191a; color: #eef3f1; display: flex; flex-direction: column; }
.mtg-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; background: #1c2426; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mtg-title { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.mtg-head .voice-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mtg-screen { flex: 1 1 auto; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; background: #0d1112; }
.mtg-video { width: 100%; height: 100%; object-fit: contain; background: #0d1112; }
.mtg-who { position: absolute; left: 12px; top: 10px; font-size: 0.78rem; background: rgba(0,0,0,0.55); padding: 3px 10px; border-radius: 999px; }
.mtg-empty { max-width: 520px; text-align: center; line-height: 1.8; color: #b9c7c2; padding: 24px; font-size: 0.95rem; }
.mtg-foot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #1c2426; border-top: 1px solid rgba(255,255,255,0.08); }
.mtg-foot .voice-btn { min-height: 40px; padding: 0 14px; width: auto; }
.mtg-share { background: var(--accent) !important; color: #fff !important; font-weight: 800; }
.mtg-share.on { background: #b33a2a !important; }
.mtg-stage:fullscreen .mtg-screen { background: #000; }
/* 流れるコメント：背景は透明、白い文字に黒い縁取り */
.mtg-screen { overflow: hidden; }
.mtg-danmaku { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.mtg-fly { position: absolute; left: 0; white-space: pre; font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1.3;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 4px rgba(0,0,0,0.6); will-change: transform; }
.mtg-fly.mine { color: #ffe9a6; }
.mtg-fly-name { font-size: 0.72rem; font-weight: 700; margin-right: 8px; opacity: 0.85; vertical-align: top; }
.mtg-foot { position: relative; z-index: 4; }
/* 共有画面の拡大(虫眼鏡) */
.mtg-video { transform-origin: center center; transition: transform .12s ease-out; }
.mtg-screen.dragging .mtg-video { transition: none; }
.mtg-screen.zoomed .mtg-video { cursor: grab; touch-action: none; }
.mtg-screen.dragging .mtg-video { cursor: grabbing; }
.mtg-zoom { position: absolute; top: 10px; right: 12px; z-index: 3; display: flex; align-items: center; background: rgba(0,0,0,0.55); border-radius: 999px; padding: 2px; }
.mtg-zoom button { border: 0; background: transparent; color: #fff; font: inherit; font-size: 0.82rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.mtg-zoom button:hover { background: rgba(255,255,255,0.15); }
.mtg-zoom .mtg-zoom-val { min-width: 52px; }
.mtg-cmt { display: flex; gap: 6px; flex: 1 1 440px; max-width: 680px; align-items: flex-end; position: relative; }
/* 入力欄は枠の中で上へ広げる(5行まで)。下の帯の高さは 1 行分のまま。背景は透ける(共有画面に重なっても見える) */
.mtg-cmt-box { flex: 1 1 auto; min-width: 180px; height: 40px; position: relative; } /* 送り先や Aa に押されて細くならないように */
.mtg-cmt-input { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 40px; min-height: 40px; max-height: 130px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.35); background: rgba(0,0,0,0.18); color: #fff; padding: 8px 64px 8px 14px; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.4; resize: none; box-sizing: border-box; overflow-y: auto;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.mtg-cmt-input:focus { outline: none; border-color: rgba(123,224,170,0.85); }
.mtg-cmt-box .mtg-cmt-send { position: absolute; right: 5px; bottom: 5px; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; background: var(--accent); color: #fff; font: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer; z-index: 1; }
.mtg-cmt-box .mtg-cmt-send:hover { filter: brightness(1.1); }
.mtg-emo-btn { font-size: 1.1rem; }
/* 「コメントをみる」の赤丸(まだ見ていないコメントの数) */
.mtg-log-btn { position: relative; }
.mtg-badge { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e5484d; color: #fff; font-size: 0.72rem; font-weight: 800; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #1c2426; }
/* 絵文字・ハンコを選ぶ欄 */
.mtg-pick { position: absolute; left: 0; bottom: calc(100% + 8px); width: min(380px, calc(100vw - 32px)); max-height: min(360px, 55vh); overflow-y: auto; background: #1c2426; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,0.45); padding: 8px 10px 10px; z-index: 6; display: flex; flex-direction: column; gap: 6px; }
.mtg-pick-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.76rem; color: #b9c7c2; }
.mtg-pick-close { border: 0; background: transparent; color: #eef3f1; font-size: 1.1rem; cursor: pointer; padding: 0 4px; }
.mtg-pick-row { display: flex; flex-wrap: wrap; gap: 4px; }
.mtg-pick-e { border: 0; background: transparent; font-size: 1.45rem; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; }
.mtg-pick-e:hover { background: rgba(255,255,255,0.12); }
.mtg-pick-hanko { border: 1.5px solid #e0533f; color: #e0533f; background: #fff7f4; border-radius: 6px; font: inherit; font-size: 0.8rem; font-weight: 800; padding: 3px 7px; cursor: pointer; }
.mtg-pick-hanko:hover { background: #ffe3dc; }
.mtg-pick-more { align-self: flex-start; border: 0; background: transparent; color: #7be0aa; font: inherit; font-size: 0.82rem; cursor: pointer; padding: 2px 0; text-decoration: underline; }
.mtg-pick-group { font-size: 0.72rem; color: #b9c7c2; margin-top: 4px; }
/* 流れる絵文字・ハンコ(右から左へ) */
.mtg-fly-stamp { display: flex; align-items: center; gap: 4px; }
.mtg-fly-stamp .mtg-fly-e { font-size: 2.2rem; line-height: 1.1; }
.mtg-fly-stamp.is-hanko .mtg-fly-e { font-size: 1.2rem; color: #d63a26; background: rgba(255,250,247,0.92); border: 2.5px solid #d63a26; border-radius: 6px; padding: 2px 8px; text-shadow: none; transform: rotate(-4deg); }
.mtg-stage.size-s .mtg-fly-stamp .mtg-fly-e { font-size: 1.6rem; }
.mtg-cmt-input::placeholder { color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: none; }
.mtg-foot .voice-btn.on { outline: 1.5px solid rgba(123,224,170,0.7); }
/* 画面の大きさ：大・中・小・格納 */
.mtg-sizes { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; overflow: hidden; min-height: 40px; }
.mtg-sizes-label { font-size: 0.76rem; color: #b9c7c2; padding: 0 6px 0 12px; }
.mtg-foot .mtg-size { border: 0; background: transparent; color: #eef3f1; font: inherit; font-size: 0.86rem; font-weight: 700; padding: 0 12px; min-height: 40px; cursor: pointer; }
.mtg-foot .mtg-size:hover { background: rgba(255,255,255,0.1); }
.mtg-foot .mtg-size.on { background: #7be0aa; color: #10302a; }
/* 小：右下の小窓。後ろの BeeXy はそのまま使える */
.mtg-stage.size-s { inset: auto 16px 16px auto; width: min(560px, calc(100vw - 32px)); height: min(460px, calc(100vh - 32px)); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 36px rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.12); }
.mtg-stage.size-s .mtg-head { padding: 6px 10px; gap: 8px; }
.mtg-stage.size-s .mtg-title { font-size: 0.8rem; }
.mtg-stage.size-s .mtg-foot { gap: 6px; padding: 8px 10px; }
.mtg-stage.size-s .mtg-cmt { flex-basis: 100%; max-width: none; }
.mtg-stage.size-s .mtg-foot .voice-btn, .mtg-stage.size-s .mtg-sizes, .mtg-stage.size-s .mtg-foot .mtg-size { min-height: 34px; }
.mtg-stage.size-s .mtg-foot .voice-btn { padding: 0 10px; }
.mtg-stage.size-s .mtg-foot .mtg-size { padding: 0 10px; }
.mtg-stage.size-s .mtg-fly { font-size: 1rem; }
/* コメントの一覧：ZOOM のチャットのように時系列。背景は透ける */
.mtg-log { position: absolute; top: 52px; right: 12px; bottom: 12px; width: min(340px, 45%); z-index: 3; display: flex; flex-direction: column; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.mtg-log-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.15); font-size: 0.86rem; }
.mtg-log-close { border: 0; background: transparent; color: #fff; font-size: 1.1rem; cursor: pointer; padding: 0 4px; text-shadow: inherit; }
.mtg-log-list { flex: 1 1 auto; overflow-y: auto; padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.mtg-log-item { font-size: 0.92rem; line-height: 1.45; }
.mtg-log-item.mine .mtg-log-text { color: #ffe9a6; }
.mtg-log-meta { display: flex; gap: 8px; align-items: baseline; font-size: 0.74rem; opacity: 0.9; }
.mtg-log-text { white-space: pre-wrap; word-break: break-word; font-weight: 700; }
.mtg-log-empty { font-size: 0.82rem; opacity: 0.85; line-height: 1.6; }
.mtg-stage.size-s .mtg-log { width: auto; left: 10px; right: 10px; top: 48px; }
@media (max-width: 640px) { .mtg-log { width: auto; left: 10px; right: 10px; } }
.voice-dev-panel { position: fixed; right: 16px; bottom: 84px; z-index: 80; width: min(320px, calc(100vw - 32px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.voice-dev-panel select { width: 100%; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: 0.86rem; }
.voice-dev-panel .sub { margin: 4px 0 0; font-size: 0.76rem; }
.voice-dev-panel.standalone { bottom: 24px; }
/* オンラインMTGの画面では、ミュートのボタン(左下)の上に出す(2026-11-01 ナカヤン) */
body.mtg-open .voice-dev-panel { right: auto; left: 16px; }
.voice-dev-panel .icon-btn { align-self: flex-start; margin-top: 4px; }
.voice-dev-head { display: flex; justify-content: space-between; align-items: center; }
.voice-dev-perm { background: var(--accent-soft); border-radius: 8px; padding: 6px 8px 8px; margin: 4px 0; display: flex; flex-direction: column; gap: 6px; }
.voice-dev-perm .qa-submit { align-self: flex-start; padding: 6px 12px; }
.voice-meter { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 6px; }
.voice-meter-bar { display: block; height: 100%; width: 0%; background: var(--ink-faint); transition: width 0.08s linear; }
.voice-meter-bar.loud { background: var(--accent); }
.agenda-tools .mtg-call-btn, .mtg-call-btn { border: 1.5px solid var(--accent); color: var(--accent); background: var(--panel); border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 800; cursor: pointer; }
.agenda-tools .mtg-call-btn:hover, .mtg-call-btn:hover { background: var(--accent-soft); }
.agenda-tools .mtg-call-btn.on, .mtg-call-btn.on { background: var(--accent); color: #fff; cursor: default; }
.voice-btn { border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 0.95rem; background: rgba(255,255,255,0.15); color: inherit; font-family: var(--body); }
.voice-btn.off { background: var(--overdue); }
.voice-btn.leave { background: var(--overdue); font-weight: 700; font-size: 0.84rem; }
.voice-ring {
position: fixed; right: 16px; top: 16px; z-index: 110; width: min(340px, calc(100vw - 32px)); background: var(--panel); border: 2px solid var(--accent);
border-radius: 12px; padding: 14px; box-shadow: 0 12px 36px rgba(0,0,0,0.25); display: flex; flex-direction: column; gap: 10px;
}
.voice-ring-text { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.voice-ring-text span { color: var(--ink-faint); font-size: 0.8rem; }
.voice-ring-btns { display: flex; gap: 8px; justify-content: flex-end; }
.voice-item.live .chat-item-sub { color: #16a34a; font-weight: 700; }
/* ダイレクトの名前の横の 📞・🖥(PC はマウスを載せたときだけ、スマホはいつも) */
.chat-row { position: relative; }
.chat-row > .chat-item { padding-right: 76px; }
.chat-row-acts { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; }
.chat-row-btn { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; width: 32px; height: 28px; font-size: 0.9rem; cursor: pointer; padding: 0; }
.chat-row-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
@media (hover: hover) {
.chat-row-acts { opacity: 0; transition: opacity .12s; }
.chat-row:hover .chat-row-acts, .chat-row:focus-within .chat-row-acts { opacity: 1; }
/* PC は 📞・🖥 がふだん見えないので、右を空けるのはマウスを載せたときだけ(名前と未読の数が隠れないように) */
.chat-row > .chat-item { padding-right: 10px; }
.chat-row:hover > .chat-item, .chat-row:focus-within > .chat-item { padding-right: 76px; }
}
.chat-unread-n { min-width: 1.6em; text-align: center; padding: 0 5px; flex: 0 0 auto; }
.chat-item .chat-item-name { min-width: 3em; }
.voice-call-btn.live { border-color: #16a34a; color: #16a34a; }
.chat-hint.voice-warn { color: var(--overdue); font-weight: 700; }
@media (max-width: 640px) { .voice-bar { bottom: 8px; padding: 8px 10px; } .voice-btn { padding: 8px 10px; } }
/* ---- チャット：吹き出し(自分は右に緑、相手は左にアイコンと白) ---- */
:root { --chat-bg: #efe6d2; --bubble-mine: #f2d48a; --bubble-mine-ink: #4a3410; --bubble-theirs: #dcebe2; --bubble-theirs-ink: #1e3a2f; --chat-bg-ink: #6b5e45; --bubble-mine-link: #6b4a0e; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --chat-bg: #2b2620; --bubble-mine: #7a5f22; --bubble-mine-ink: #fbf1d8; --bubble-theirs: #2e3d35; --bubble-theirs-ink: #e3eee7; --chat-bg-ink: #c9bfa8; --bubble-mine-link: #ffe3a3; }
}
:root[data-theme="dark"] { --chat-bg: #2b2620; --bubble-mine: #7a5f22; --bubble-mine-ink: #fbf1d8; --bubble-theirs: #2e3d35; --bubble-theirs-ink: #e3eee7; --chat-bg-ink: #c9bfa8; --bubble-mine-link: #ffe3a3; }
.chat-log.bubbles { background: var(--chat-bg); border-radius: 10px; padding: 10px 10px 12px; margin: 8px 0; }
.chat-log.bubbles .chat-day { color: var(--chat-bg-ink); }
.chat-log.bubbles .chat-day::before { content: ''; }
.chat-log.bubbles .chat-day { display: block; width: fit-content; margin: 12px auto 8px; padding: 2px 12px; border-radius: 12px; background: rgba(107,94,69,0.16); font-size: 0.72rem; }
.chat-log.bubbles .chat-more { background: rgba(255,255,255,0.85); }
.chat-log.bubbles > .sub { color: var(--chat-bg-ink); }
.chat-log.bubbles .chat-msg { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0 0; border-radius: 0; background: none; }
.chat-log.bubbles .chat-msg.compact { padding-top: 3px; }
.chat-log.bubbles .chat-msg:hover { background: none; }
.chat-log.bubbles .chat-msg.mine { justify-content: flex-end; }
.chat-avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,0.8); }
.chat-avatar-space { flex: 0 0 34px; }
.chat-bubble-col { display: flex; flex-direction: column; max-width: min(78%, 520px); min-width: 0; }
.chat-msg.mine .chat-bubble-col { align-items: flex-end; }
.chat-name { font-size: 0.74rem; color: var(--chat-bg-ink); margin: 0 0 2px 4px; font-weight: 700; }
.chat-bubble-row { display: flex; align-items: flex-end; gap: 6px; min-width: 0; max-width: 100%; }
.chat-time { font-size: 0.66rem; color: var(--chat-bg-ink); white-space: nowrap; font-family: var(--mono); flex: 0 0 auto; }
.chat-bubble { position: relative; padding: 8px 12px; border-radius: 16px; min-width: 0; max-width: 100%; word-break: break-word; box-shadow: 0 1px 1px rgba(0,0,0,0.08); }
.chat-msg.theirs .chat-bubble { background: var(--bubble-theirs); color: var(--bubble-theirs-ink); }
.chat-msg.mine .chat-bubble { background: var(--bubble-mine); color: var(--bubble-mine-ink); }
/* しっぽ(続けて送った2つ目以降には付けない) */
.chat-msg.theirs .chat-bubble.first::before { content: ''; position: absolute; left: -6px; top: 8px; border-width: 6px 8px 6px 0; border-style: solid; border-color: transparent var(--bubble-theirs) transparent transparent; }
.chat-msg.mine .chat-bubble.first::after { content: ''; position: absolute; right: -6px; top: 8px; border-width: 6px 0 6px 8px; border-style: solid; border-color: transparent transparent transparent var(--bubble-mine); }
.chat-bubble .chat-text { font-size: 0.92rem; }
.chat-bubble .chat-text.to-me { border-left: none; padding-left: 0; }
.chat-msg.theirs .chat-bubble:has(.to-me) { box-shadow: 0 0 0 2px var(--soon); }
.chat-bubble.deleted { background: rgba(255,255,255,0.55) !important; color: var(--ink-faint) !important; }
.chat-bubble.deleted::before, .chat-bubble.deleted::after { display: none; }
.chat-bubble.editing { background: var(--panel) !important; color: var(--ink) !important; width: min(520px, 70vw); }
.chat-bubble.editing::before, .chat-bubble.editing::after { display: none; }
.chat-msg.mine .chat-bubble a { color: var(--bubble-mine-link); }
.chat-bubble .chat-edited { color: inherit; opacity: 0.6; }
.chat-bubble .chat-files { margin-top: 4px; }
.chat-bubble .chat-file { background: rgba(255,255,255,0.7); }
/* 発言の操作(PC)：吹き出しの角に浮かぶ小さなアイコンの帯。乗せたときだけ出る */
.chat-log.bubbles .chat-bubble-col { position: relative; }
.chat-log.bubbles .chat-acts { position: absolute; top: -14px; display: none; gap: 1px; padding: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); z-index: 3; }
.chat-log.bubbles .chat-msg.mine .chat-acts { right: 6px; }
.chat-log.bubbles .chat-msg.theirs .chat-acts { left: 6px; }
.chat-log.bubbles .chat-msg:hover .chat-acts, .chat-log.bubbles .chat-msg:focus-within .chat-acts, .chat-log.bubbles .chat-msg.menu-open .chat-acts { display: flex; }
.chat-log.bubbles .chat-acts .chat-act-ic { width: 28px; height: 26px; border: none; background: none; border-radius: 6px; cursor: pointer; font-size: 0.95rem; line-height: 1; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; padding: 0; }
.chat-log.bubbles .chat-acts .chat-act-ic:hover, .chat-log.bubbles .chat-acts .chat-act-ic:focus-visible { background: var(--accent-soft); color: var(--accent); }
/* 「…」の一覧と、スマホの下から出る一覧 */
.act-menu { position: fixed; z-index: 60; min-width: 150px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.16); padding: 4px; display: flex; flex-direction: column; }
.act-item { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none; text-align: left; padding: 7px 10px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 0.86rem; color: var(--ink); }
.act-item:hover, .act-item:focus-visible { background: var(--accent-soft); outline: none; }
.act-item .act-ic { width: 1.3em; text-align: center; }
.act-item.danger { color: var(--overdue); }
.act-menu .act-item.danger { border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; margin-top: 2px; }
.act-sheet-wrap { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.32); display: flex; align-items: flex-end; justify-content: center; }
.act-sheet { width: 100%; max-width: 520px; background: var(--panel); border-radius: 16px 16px 0 0; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
.act-sheet-list { display: flex; flex-direction: column; }
.act-sheet .act-item { font-size: 1rem; padding: 13px 12px; border-bottom: 1px solid var(--line); border-radius: 0; }
.act-sheet .act-item.danger { border-bottom: none; }
.act-sheet .act-cancel { justify-content: center; margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-soft); }
.chat-msg.menu-open .chat-bubble { box-shadow: 0 0 0 2px var(--accent); }
/* リアクション：吹き出しの下の小さな札。自分が付けたものは緑の縁。文字のハンコは朱色の判子ふう */
.chat-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.chat-msg.mine .chat-reacts { justify-content: flex-end; }
.react-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid rgba(0,0,0,0.12); background: var(--panel); border-radius: 12px; cursor: pointer; font: inherit; font-size: 0.8rem; color: var(--ink); line-height: 1; }
.react-chip .react-e { font-size: 0.95rem; }
.react-chip .react-n { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); }
.react-chip.me { border-color: var(--accent); background: var(--accent-soft); }
.react-chip.me .react-n { color: var(--accent); font-weight: 700; }
.react-chip.stamp .react-e { font-size: 0.74rem; font-weight: 700; color: #b33a2a; border: 1.5px solid #b33a2a; border-radius: 4px; padding: 1px 4px; letter-spacing: 0.02em; }
.react-chip.add { color: var(--ink-soft); padding: 0 7px; opacity: 0.75; }
.react-chip.add:hover { opacity: 1; }
.react-chip:hover { border-color: var(--accent); }
.react-pick { display: flex; flex-direction: column; gap: 8px; padding: 4px; max-width: 320px; }
.react-quick { display: flex; flex-wrap: wrap; gap: 2px; }
.react-q { width: 34px; height: 34px; border: none; background: none; border-radius: 8px; font-size: 1.25rem; cursor: pointer; }
.react-q:hover, .react-q:focus-visible { background: var(--accent-soft); }
.react-stamps { display: flex; flex-wrap: wrap; gap: 6px; }
.hanko { border: 1.5px solid #b33a2a; color: #b33a2a; background: #fff8f4; border-radius: 5px; padding: 4px 8px; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.hanko:hover, .hanko:focus-visible { background: #b33a2a; color: #fff; }
.react-all { max-height: 220px; overflow-y: auto; }
.react-all:empty { display: none; }
.act-sheet .react-pick { max-width: none; padding: 4px 2px 10px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.act-sheet .react-q { width: 40px; height: 40px; font-size: 1.4rem; }
.act-sheet .hanko { font-size: 0.9rem; padding: 7px 10px; }
.act-sheet { max-height: 86vh; overflow-y: auto; }
/* タイムラインの入力欄：X のようなシンプルな形。枠を付けず、上下に細い線 */
.tl-composer.tl-compose-x { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; padding: 12px 4px 10px; margin: 4px 0 8px; border-bottom: 1px solid var(--line); position: relative; }
.tl-compose-x > .chat-avatar { flex: 0 0 40px; width: 40px; height: 40px; font-size: 1rem; margin-top: 2px; }
.tl-compose-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tl-compose-body .mention-wrap { width: 100%; }
.module .tl-compose-x .tl-input { border: none; background: transparent; padding: 8px 2px; font-size: 1.2rem; line-height: 1.5; resize: none; min-height: 44px; outline: none; box-shadow: none; overflow-y: auto; }
.tl-compose-x .tl-input::placeholder { color: var(--ink-faint); }
.tl-compose-foot { display: flex; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.tl-compose-foot .chat-tools { flex: 1 1 auto; }
.tl-compose-foot .chat-tool { color: var(--accent); }
.tl-post-btn { flex: 0 0 auto; border: none; border-radius: 999px; padding: 9px 20px; background: var(--accent); color: #fff; font: inherit; font-weight: 800; font-size: 0.92rem; cursor: pointer; }
.tl-post-btn:disabled { background: var(--ink-faint); opacity: 0.55; cursor: default; }
.tl-post-btn:not(:disabled):hover { filter: brightness(1.08); }
.tl-compose-x .format-bar, .tl-compose-x .fmt-bar { border-top: 1px dashed var(--line); }
/* ---- PC の拡大表示：チャットだけを画面いっぱいに ---- */
@media (min-width: 641px) {
body.chat-zoom .userbar, body.chat-zoom .tabs-row, body.chat-zoom .chat-side, body.chat-zoom .foot { display: none !important; }
body.chat-zoom .page { max-width: 1100px; padding: 10px 24px 0; }
body.chat-zoom .chat-wrap { grid-template-columns: 1fr; min-height: 0; }
body.chat-zoom .chat-main { height: calc(100vh - 12px); }
body.chat-zoom.in-call .chat-main { height: calc(100vh - 96px); }
body.chat-zoom .chat-main > .chat-log { flex: 1; max-height: none; min-height: 0; }
body.chat-zoom .chat-main > .chat-head { padding-top: 0; }
body.chat-zoom .chat-back { display: none; }
}
/* 拡大(広い PC)の並び。zl-side：左にやりとり、右に上から下までの入力欄。zl-2：左で読み返し、右に最新と入力欄 */
@media (min-width: 900px) {
body.chat-zoom.zl-side .page, body.chat-zoom.zl-2 .page { max-width: 1600px; }
body.chat-zoom.zl-3 .page { max-width: 2200px; }
body.chat-zoom.zl-wide .page { max-width: none; }
body.zl-side .chat-main:has(> .chat-composer-box) { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); grid-template-rows: auto auto minmax(0, 1fr); column-gap: 16px; }
body.zl-side .chat-main:has(> .chat-composer-box) > .chat-head { grid-column: 1 / -1; grid-row: 1; }
body.zl-side .chat-main:has(> .chat-composer-box) > .conv-search { grid-column: 1; grid-row: 2; }
body.zl-side .chat-main:has(> .chat-composer-box) > .chat-log { grid-column: 1; grid-row: 3; margin: 0 0 10px; }
body.zl-side .chat-main > .chat-composer-box { grid-column: 2; grid-row: 2 / 4; margin: 0 0 10px; display: flex; flex-direction: column; min-height: 0; }
body.zl-side .chat-main > .chat-composer-box .chat-input { flex: 1 1 auto; height: auto !important; max-height: none; }
body.zl-side .chat-main > .chat-composer-box .mention-wrap { flex: 1 1 auto; display: flex; flex-direction: column; }
body.zl-2 .chat-main:has(> .chat-log-past) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 16px; }
body.zl-3 .chat-main:has(> .chat-log-past) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 14px; }
body.zl-wide .chat-main:has(> .chat-log-past) { display: grid; grid-template-columns: repeat(var(--zl-n), minmax(0, 1fr)); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 10px; }
body.chat-zoom .chat-main:has(> .chat-log-past) > .chat-head { grid-column: 1 / -1; grid-row: 1; }
body.chat-zoom .chat-main:has(> .chat-log-past) > .chat-log { grid-column: -2; grid-row: 3; max-height: none; min-height: 0; margin: 0; }
body.chat-zoom .chat-main:has(> .chat-log-past) > .chat-log.chat-log-past { grid-row: 2 / 5; margin: 0 0 10px; }
body.chat-zoom .chat-main:has(> .chat-log-past) > .past-1 { grid-column: 1; }
body.chat-zoom .chat-main:has(> .chat-log-past) > .past-2 { grid-column: 2; }
body.chat-zoom .chat-main:has(> .chat-log-past) > .past-3 { grid-column: 3; }
body.chat-zoom .chat-main:has(> .chat-log-past) > .past-4 { grid-column: 4; }
body.chat-zoom .chat-main:has(> .chat-log-past) > .past-5 { grid-column: 5; }
body.chat-zoom .chat-main:has(> .chat-log-past) > .past-6 { grid-column: 6; }
body.chat-zoom .chat-main:has(> .chat-log-past) > .past-7 { grid-column: 7; }
/* 4列以上(試し)：列が細いので、吹き出しを列いっぱいに・字を少し小さく */
body.zl-wide .chat-main > .chat-log .chat-bubble-col { max-width: 94%; }
body.zl-wide .chat-main > .chat-log .chat-bubble .chat-text { font-size: 0.86rem; }
body.zl-wide .chat-head .zoom-layout-btn { padding: 5px 9px; }
body.chat-zoom .chat-main:has(> .chat-log-past) > .conv-search { grid-column: -2; grid-row: 2; }
body.chat-zoom .chat-main:has(> .chat-log-past) > .chat-composer-box { grid-column: -2; grid-row: 4; margin-bottom: 10px; }
}
.zoom-layout { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.zoom-layout-btn { border: 0; background: var(--panel); color: var(--ink-soft); font: inherit; font-size: 0.8rem; padding: 5px 12px; cursor: pointer; }
.zoom-layout-btn.on { background: var(--accent); color: #fff; font-weight: 700; }
.zoom-others { display: inline-flex; align-items: center; gap: 6px; }
.back-btn.panel-back { display: inline-block; margin: 0 0 8px; }
.mention-item.all { font-weight: 800; color: var(--accent); }
/* 説明の吹き出し(PC でマウスを乗せたとき) */
.hive-tip { position: fixed; z-index: 200; display: none; max-width: 300px; padding: 7px 10px; border-radius: 8px; background: #1f2a26; color: #fff; font-size: 0.8rem; line-height: 1.55; box-shadow: 0 6px 18px rgba(0,0,0,0.22); pointer-events: none; white-space: pre-line; }
/* 「全体」に流れる自動の更新：真ん中に小さな1行 */
.chat-log.bubbles .chat-msg.auto-msg { display: block; text-align: center; padding: 4px 0; }
.auto-line { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 92%; background: rgba(255,255,255,0.55); border-radius: 999px; padding: 3px 12px; font-size: 0.8rem; color: var(--chat-bg-ink); }
.auto-line strong { color: var(--ink); }
.auto-time { font-family: var(--mono); font-size: 0.7rem; opacity: 0.8; }
.auto-line .chat-link-btn { font-size: 0.76rem; }
.auto-react { text-decoration: none; opacity: 0.6; }
/* まとめた更新の中身：1件1行の箇条書き(長い名前は折り返して、2行目は「・」の右にそろえる) */
.auto-list { list-style: none; margin: 4px 0 0; padding: 0; line-height: 1.55; }
.auto-list > li { padding-left: 1em; text-indent: -1em; overflow-wrap: anywhere; }
.auto-list > li::before { content: "・"; }
.auto-list > li.auto-list-more { padding-left: 1em; text-indent: 0; }
.auto-list > li.auto-list-more::before { content: none; }
.auto-labels { display: table; margin: 4px auto 0; max-width: min(640px, 92%); text-align: left; font-size: 0.8rem; color: var(--chat-bg-ink); background: rgba(255,255,255,0.55); border-radius: 10px; padding: 6px 14px; }
.chat-msg.auto-msg .chat-reacts { justify-content: center; }
.panel-cancel { flex: 0 0 auto; white-space: nowrap; margin-left: 4px; }
/* 会話の中の検索(見出しの 🔍) */
.conv-search { margin: 8px 0 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.conv-search-bar { display: flex; align-items: center; gap: 8px; }
.conv-search-ic { flex: 0 0 auto; }
.conv-search-bar > button { flex: 0 0 auto; white-space: nowrap; }
.conv-search-input { flex: 1 1 auto; min-width: 0; border: none; background: transparent; font: inherit; font-size: 0.92rem; padding: 6px 2px; outline: none; color: var(--ink); }
.conv-search-note { margin: 6px 2px 2px; font-size: 0.8rem; }
.conv-search-list { max-height: 34vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.conv-search-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* 「拡大」は緑の枠と太字、「元に戻す」は緑の塗り(どちらも見出しで目立つように) */
.chat-head .zoom-btn { border: 1.5px solid var(--accent); color: var(--accent); font-weight: 800; padding: 5px 13px; border-radius: 999px; background: var(--panel); }
.chat-head .zoom-btn:hover { background: var(--accent-soft); color: var(--accent); }
.chat-head .zoom-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 800; padding: 6px 14px; border-radius: 999px; }
.chat-head .zoom-btn.on:hover { filter: brightness(1.1); background: var(--accent); color: #fff; }
.zoom-others.has { border-color: var(--overdue); color: var(--ink); }
.zoom-menu { max-height: 70vh; overflow-y: auto; min-width: 240px; }
.zoom-menu .act-item { justify-content: flex-start; }
.zoom-menu .act-item .act-ic { color: var(--overdue); font-size: 0.7rem; }
.zoom-menu .zoom-menu-name { flex: 1 1 auto; }
.zoom-menu .act-item.has-unread .zoom-menu-name { font-weight: 800; }
.zoom-alerts { position: fixed; top: 64px; right: 16px; z-index: 70; display: flex; flex-direction: column; gap: 8px; width: min(340px, 90vw); }
.zoom-alert { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1px solid var(--line); border-left: 4px solid var(--overdue); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 8px 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.16); cursor: pointer; font: inherit; transition: opacity 0.4s; }
.zoom-alert strong { font-size: 0.82rem; }
.zoom-alert span { font-size: 0.84rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.zoom-alert.fade { opacity: 0; }
.tl-item .chat-reacts { margin: 6px 0 2px; }
.tl-comment .chat-reacts { margin-top: 2px; }
.tl-item-acts { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.tl-react-btn.small { font-size: 0.9rem; padding: 0 4px; text-decoration: none; opacity: 0.7; }
@media (max-width: 640px) {
.chat-bubble-col { max-width: 82%; }
.chat-log.bubbles { padding: 8px 6px 10px; }
}
/* ---- チャット：見出し(📞 通話など)をいつも見える位置に、入力欄の横スクロールを出さない ---- */
.chat-input, .chat-edit { overflow-x: hidden; }
.chat-main > .chat-head { position: sticky; top: 0; z-index: 6; background: var(--paper); padding-top: 6px; }
@media (max-width: 640px) {
/* スマホは入力欄も画面の下に貼り付ける(通話中は通話バーの上) */
.chat-main > .chat-composer-box { position: sticky; bottom: 8px; z-index: 6; box-shadow: 0 -4px 12px rgba(0,0,0,0.08); }
body.in-call .chat-main > .chat-composer-box { bottom: 96px; }
}
/* ---- チャット：検索 ---- */
.chat-search { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 0.86rem; background: var(--panel); color: var(--ink); margin-bottom: 8px; }
.chat-search-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-search-head h2 { margin: 0; }
.chat-search-item { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 8px 10px; margin: 6px 0; cursor: pointer; font-family: var(--body); color: var(--ink); }
.chat-search-item:hover { border-color: var(--accent); }
.chat-search-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 0.78rem; color: var(--ink-faint); margin-bottom: 2px; }
.chat-search-meta strong { color: var(--ink-soft); }
.chat-search-snip { font-size: 0.88rem; line-height: 1.6; word-break: break-word; }
.chat-search-snip mark { background: var(--soon-soft); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.chat-msg.found .chat-bubble { box-shadow: 0 0 0 3px var(--soon); }
/* ---- チャット：既読 ---- */
.chat-time-col { display: flex; flex-direction: column; align-items: flex-end; gap: 0; flex: 0 0 auto; }
.chat-read { font-size: 0.66rem; color: var(--chat-bg-ink); white-space: nowrap; }
.chat-read.many { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
/* ---- チャット：返信・コピー ---- */
.chat-quote { display: flex; flex-direction: column; gap: 1px; border-left: 3px solid rgba(0,0,0,0.25); padding: 2px 0 2px 8px; margin: 0 0 6px; cursor: pointer; font-size: 0.78rem; opacity: 0.85; }
.chat-quote-author { font-weight: 700; }
.chat-quote-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.reply-bar { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ink-soft); background: var(--paper); border-left: 3px solid var(--accent); border-radius: 4px; padding: 4px 6px 4px 10px; margin: 2px 0 4px; }
.reply-bar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-bubble .chat-text { user-select: text; -webkit-user-select: text; }
.partial-copy { width: 100%; min-height: 120px; }
/* ---- スマホ：やりとりを大きく見せる ---- */
.btn-count { display: none; }
.btn-icon { display: none; }
@media (max-width: 640px) {
.foot { display: none; }
/* 会話を開いている間は、上の帯とタブを隠して画面いっぱいに */
body.chat-focus .userbar, body.chat-focus .tabs-row { display: none; }
body.chat-focus .page { padding: 6px 8px 0; }
body.chat-focus .chat-wrap { min-height: 0; }
body.chat-focus .chat-main { height: calc(100dvh - 10px); }
body.chat-focus.in-call { padding-bottom: 0; }
body.chat-focus.in-call .chat-main { height: calc(100dvh - 96px); }
body.chat-focus .chat-main > .chat-log { flex: 1; max-height: none; min-height: 0; margin: 4px 0; }
/* 入力欄は流れの中に置く(sticky をやめる)。ただし ⏱・☺ の小窓の位置の基準になるよう relative にする */
body.chat-focus .chat-main > .chat-composer-box { position: relative; bottom: auto; box-shadow: none; margin-top: 4px; }
/* 見出しを小さく(説明の文は省き、ボタンはアイコンだけ) */
.chat-main > .chat-head { gap: 6px; padding: 2px 0 6px; }
.chat-title-sub { display: none; }
.chat-title strong { font-size: 1.15rem; }
.chat-head .btn-label { display: none; }
.chat-head .btn-icon { display: inline; }
.chat-head .btn-count { display: inline-block; margin-left: 3px; font-size: 0.7rem; font-weight: 800; }
.chat-head .icon-btn { padding: 4px 9px; font-size: 0.95rem; line-height: 1.2; }
.chat-back { padding: 7px 12px; font-size: 0.95rem; font-weight: 700; }
}
/* ---- チャット：日程調整 ---- */
.poll-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* 日程調整の吹き出しは、会話の幅いっぱいまで使ってよい(はみ出して横に送らないように) */
.chat-bubble-col:has(.poll-card) { width: min(96%, 560px); max-width: min(96%, 560px); }
.chat-bubble-row:has(.poll-card), .chat-bubble:has(.poll-card) { width: 100%; box-sizing: border-box; }
/* PC：チャットの欄を画面の下まで(高さは chat.js の fitChat が決める) */
@media (min-width: 641px) {
.chat-fit .chat-wrap { align-items: start; min-height: 0; }
.chat-fit .chat-main { height: var(--chat-h); overflow-y: auto; }
.chat-fit .chat-main > .chat-log { flex: 1; max-height: none; min-height: 160px; }
.chat-fit .chat-side { max-height: var(--chat-h); overflow-y: auto; }
body.chat-fit-page .page { padding-bottom: 6px; max-width: 980px; } /* チャットのときはページを広く(上の帯とタブが1行に入り、チャットの欄も広がる) */
body.chat-fit-page p.foot { display: none; }
}
.poll-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.poll-status { font-size: 0.72rem; padding: 1px 8px; border-radius: 10px; background: rgba(0,0,0,0.08); white-space: nowrap; }
.poll-card.decided .poll-status { background: var(--accent); color: #fff; }
.poll-card.cancelled { opacity: 0.6; }
.poll-note { font-size: 0.84rem; opacity: 0.85; white-space: pre-wrap; }
.poll-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 6px; border-radius: 8px; background: rgba(255,255,255,0.5); }
.poll-row.chosen { background: rgba(47,111,94,0.18); font-weight: 700; }
.poll-day { flex: 1 1 auto; font-size: 0.86rem; min-width: 8em; }
.poll-count { font-size: 0.78rem; font-family: var(--mono); opacity: 0.85; }
.poll-btns { display: inline-flex; gap: 3px; }
.poll-ans { width: 30px; height: 28px; border: 1px solid rgba(0,0,0,0.15); background: rgba(255,255,255,0.8); border-radius: 6px; cursor: pointer; font-size: 0.95rem; color: var(--ink); }
.poll-ans.on.yes { background: #2f6f5e; color: #fff; border-color: #2f6f5e; }
.poll-ans.on.maybe { background: #e8aa30; color: #3a2a05; border-color: #e8aa30; }
.poll-ans.on.no { background: #8a8378; color: #fff; border-color: #8a8378; }
.poll-decide { font-size: 0.74rem; }
.poll-who { font-size: 0.76rem; opacity: 0.85; padding: 0 6px 2px; }
.poll-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.76rem; }
.poll-notyet { opacity: 0.75; }
.poll-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.poll-acts .icon-btn { font-size: 0.8rem; text-decoration: none; }
.poll-form input[type=text] { width: 100%; }
.poll-slot-edit.locked { padding: 6px 8px; border-radius: 6px; background: var(--paper); color: var(--ink-soft); font-size: 0.86rem; }
@media (max-width: 640px) { .poll-slot-edit.locked { display: block; } }
.poll-slots-edit { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.poll-slot-edit { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.poll-slot-edit input { border: 1px solid var(--line); border-radius: 6px; padding: 5px 6px; font: inherit; font-size: 0.86rem; background: var(--panel); color: var(--ink); }
.poll-form select, .share-form select { display: block; width: 100%; max-width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; }
.poll-form .field-label, .share-form .field-label { display: block; }
.share-form textarea { width: 100%; box-sizing: border-box; }
.share-files { display: flex; flex-direction: column; gap: 6px; }
.share-file { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.share-file.bad { opacity: 0.6; }
.share-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: 0 0 44px; }
.share-thumb.icon { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: var(--accent-soft); }
.share-file-name { flex: 1 1 auto; min-width: 0; font-size: 0.84rem; word-break: break-all; }
.share-help ol { padding-left: 1.3em; line-height: 1.8; font-size: 0.9rem; }
.share-help h3 { font-size: 0.95rem; margin: 14px 0 4px; }
.share-link { display: inline-block; word-break: break-all; background: var(--accent-soft); padding: 2px 6px; border-radius: 4px; margin: 4px 6px 4px 0; font-size: 0.82rem; }
.share-help-link { display: block; margin: 10px 0 0; font-size: 0.8rem; text-align: left; }
.poll-form-btns { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 12px; }
.poll-form-btns .icon-btn { white-space: nowrap; flex: 0 0 auto; }
/* スマホ：1段目に日付と×、2段目に時刻(×が次の行に落ちないように) */
@media (max-width: 640px) {
.poll-slot-edit { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 4px 6px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
.poll-slot-edit > input[type=date] { grid-column: 1 / 4; grid-row: 1; min-width: 0; }
.poll-slot-edit > .chip-x { grid-column: 4; grid-row: 1; }
.poll-slot-edit > input { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; min-height: 40px; }
.poll-slot-edit > span { text-align: center; padding: 0 2px; }
.poll-slot-edit > :nth-child(2) { grid-column: 1; grid-row: 2; }
.poll-slot-edit > span { grid-column: 2; grid-row: 2; }
.poll-slot-edit > :nth-child(4) { grid-column: 3; grid-row: 2; }
.poll-day { flex-basis: 100%; }
}
/* ---- 入力欄の下の段：送信はいつも右端に見える。スマホは文字を 16px にして入力時の自動拡大を防ぐ ---- */
.chat-toolbar { flex-wrap: nowrap; }
.chat-tools { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.chat-tools::-webkit-scrollbar { display: none; }
.chat-tools .chat-tool { flex: 0 0 auto; }
.chat-toolbar-hint { flex: 0 1 auto; }
.chat-send { flex: 0 0 auto; }
@media (max-width: 640px) {
.chat-toolbar-hint { display: none; }
.module .chat-input, .module .chat-edit, .module .chat-search, .module .poll-form input, .module .poll-form select, .module .poll-slot-edit input { font-size: 16px; }
/* スマホのアイコンは押しやすい大きさに(8つ並んでも送信が隠れないよう、間はつめる) */
.chat-tools { gap: 2px; }
.chat-tools .chat-tool { width: 35px; height: 36px; font-size: 1.28rem; }
.chat-send { width: 40px; height: 40px; }
}
/* ---- ゲスト招待(BeeXy の人の側)：招待の窓・待合室のお知らせ ---- */
.guest-modal { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.45); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; overflow-y: auto; }
.guest-box { width: min(560px, 100%); background: var(--panel); color: var(--ink); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,0.3); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.guest-head { display: flex; justify-content: space-between; align-items: center; }
.guest-head h2 { margin: 0; font-size: 1.1rem; }
.guest-box .sub { margin: 0; }
.guest-link { background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.guest-link h3 { margin: 0; font-size: 0.95rem; }
.guest-make { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.guest-over { color: var(--overdue); font-weight: 700; font-size: 0.86rem; }
.guest-sub { margin: 6px 0 0; font-size: 0.92rem; }
.guest-inv { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.guest-inv-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ink-faint); flex-wrap: wrap; }
.guest-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; }
.guest-row .qa-submit, .guest-row .icon-btn { padding: 4px 12px; }
.guest-hosts { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.guest-host { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.guest-host .sub { margin-left: auto; }
.guest-wait { position: fixed; top: 12px; right: 12px; z-index: 95; display: flex; flex-direction: column; gap: 6px; max-width: min(420px, calc(100vw - 24px)); }
.guest-wait-row { display: flex; align-items: center; gap: 8px; background: #fff8e1; color: #3b2f00; border: 1.5px solid #f0b400; border-radius: 12px; padding: 8px 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); font-size: 0.88rem; font-weight: 700; flex-wrap: wrap; }
.guest-wait-text { flex: 1 1 180px; }
.guest-wait-row .qa-submit, .guest-wait-row .icon-btn { padding: 4px 12px; }
.mtg-guest-btn { background: #f0b400 !important; color: #2b2200 !important; font-weight: 800; }
/* ---- ゲストのページ(/g/…) ---- */
body.guest-page { background: #14191a; color: #eef3f1; min-height: 100vh; margin: 0; }
.guest-main { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; box-sizing: border-box; }
.guest-card { width: min(480px, 100%); background: #1c2426; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.35); }
.guest-brand { font-size: 0.82rem; color: #7be0aa; font-weight: 800; }
.guest-title { margin: 0; font-size: 1.25rem; line-height: 1.4; }
.guest-card .sub { color: #b9c7c2; margin: 0; }
.guest-card p { margin: 0; line-height: 1.7; }
.guest-msg { font-size: 1rem; }
.guest-form { display: flex; gap: 8px; flex-wrap: wrap; }
.guest-form .guest-name { flex: 1 1 200px; min-width: 0; font-size: 16px; background: #fff; color: #1d2b28; }
.guest-notes { margin: 0; padding-left: 1.2em; color: #b9c7c2; font-size: 0.84rem; line-height: 1.7; }
.guest-enter { align-self: flex-start; font-size: 1rem; padding: 10px 22px; }
.guest-wait-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.15); border-top-color: #7be0aa; animation: guest-spin 1s linear infinite; }
@keyframes guest-spin { to { transform: rotate(360deg); } }
/* ---- MTG のコメントの保存(mtglog.js) ---- */
.mtglog-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.mtglog-btns .pw-send { cursor: pointer; }
.mtg-log-save { margin-left: auto; margin-right: 6px; border: 1px solid rgba(255,255,255,0.4); background: rgba(0,0,0,0.35); color: #fff; border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer; text-shadow: none; }
.mtg-log-save:hover { background: rgba(255,255,255,0.15); }
/* タブの並びと表示：チェックを外したタブは薄く */
.tab-order-show { display: inline-flex; align-items: center; margin-right: 6px; }
.tab-order-show input { width: 18px; height: 18px; }
.tab-order-item.off .tab-order-name { color: var(--ink-faint); text-decoration: line-through; }
/* ---- プロフィール(表示名・アイコン) ---- */
.chat-avatar.img { object-fit: cover; padding: 0; background: #ddd; }
.profile-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.profile-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 800; color: #fff; background: #2f6f5e; }
.profile-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-label { font-size: 0.84rem; font-weight: 700; margin-top: 4px; }
/* ---- MTG：送り先・コメントの見た目・タイマー・その他 ---- */
.mtg-to { flex: 0 0 auto; max-width: 110px; min-height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.3); background: #2a3335; color: #fff; font: inherit; font-size: 0.8rem; padding: 0 6px; }
.mtg-to.private { border-color: #f0b400; color: #ffe066; }
.mtg-aa-btn { font-weight: 800; font-size: 0.9rem !important; }
.mtg-popwrap { position: relative; display: inline-flex; }
.mtg-popwrap .mtg-pop { left: auto; right: 0; }
.mtg-style-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mtg-style-label { font-size: 0.76rem; color: #b9c7c2; min-width: 3em; }
.mtg-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); cursor: pointer; padding: 0; }
.mtg-swatch.auto { width: auto; border-radius: 13px; padding: 0 8px; background: transparent; color: #eef3f1; font-size: 0.72rem; }
.mtg-swatch.on { outline: 2px solid #7be0aa; outline-offset: 2px; }
.mtg-chip-btn { border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #eef3f1; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 0.82rem; cursor: pointer; }
.mtg-chip-btn:hover { background: rgba(255,255,255,0.12); }
.mtg-chip-btn.on { background: #7be0aa; color: #10302a; border-color: #7be0aa; }
.mtg-chip-btn.stop { border-color: #e5484d; color: #ffb3b3; }
.mtg-style-sample { margin-top: 4px; white-space: nowrap; }
.mtg-pop-note { margin: 0; font-size: 0.78rem; color: #b9c7c2; }
.mtg-timer-min { width: 64px; min-height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.3); background: #2a3335; color: #fff; font: inherit; padding: 0 6px; }
.mtg-more-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: #eef3f1; font: inherit; font-size: 0.88rem; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.mtg-more-item:hover { background: rgba(255,255,255,0.1); }
.mtg-contact { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.9rem; padding: 2px 0; }
.mtg-log-priv { color: #ffe066; font-weight: 700; }
.voice-timer { font-family: var(--mono); font-weight: 800; font-size: 0.95rem; padding: 2px 10px; border-radius: 999px; background: rgba(123,224,170,0.15); color: #7be0aa; }
.voice-timer.soon { background: rgba(240,180,0,0.2); color: #ffd45e; }
/* 残り1分：黄色でゆっくり点滅。30秒：橙で速く・大きく。5秒：赤でとても速く・もっと大きく */
.voice-timer { cursor: pointer; user-select: none; }
.voice-timer.paused { background: rgba(255,255,255,0.12); color: #cfd8d5; }
.voice-timer.over { background: #b42329; color: #fff; font-size: 1.1rem; padding: 3px 14px; animation: timer-over 2s ease-in-out infinite; }
@keyframes timer-over { 50% { box-shadow: 0 0 0 5px rgba(229,72,77,0.35); } }
.mtg-timer-min { width: 56px; }
.voice-timer.t60 { background: #f0b400; color: #2b2200; animation: timer-blink 1s ease-in-out infinite; }
.voice-timer.t30 { background: #ff8a1f; color: #fff; font-size: 1.2rem; padding: 3px 14px; animation: timer-blink 0.6s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(255,138,31,0.35); }
.voice-timer.t5 { background: #e5484d; color: #fff; font-size: 1.5rem; padding: 4px 16px; animation: timer-blink 0.3s steps(2) infinite; box-shadow: 0 0 0 4px rgba(229,72,77,0.45); }
@keyframes timer-blink { 50% { opacity: 0.35; transform: scale(1.06); } }
.mtg-countdown { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; pointer-events: none; font-size: min(38vh, 300px); font-weight: 900; color: #ff5a5f;
text-shadow: 0 0 24px rgba(0,0,0,0.6), -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff; font-family: var(--mono); }
.mtg-countdown.pop { animation: count-pop 0.9s ease-out; }
@keyframes count-pop { 0% { transform: scale(1.6); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.85); opacity: 0.75; } }
.mtg-stage.size-s .mtg-countdown { font-size: 140px; }
.voice-timer.done { background: rgba(229,72,77,0.25); color: #ff9a9a; animation: guest-spin-blink 1s steps(2) infinite; }
@keyframes guest-spin-blink { 50% { opacity: 0.4; } }
.voice-bar .voice-timer { background: var(--accent-soft); color: var(--accent); }
/* 流れるコメントの大きさ・字体(一覧には使わない) */
.mtg-fly.z-s { font-size: 1rem; }
.mtg-fly.z-l { font-size: 2.1rem; }
.mtg-fly.f-m, .mtg-chip-btn.f-m { font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif; }
.mtg-fly.f-r, .mtg-chip-btn.f-r { font-family: "Hiragino Maru Gothic ProN", "Zen Maru Gothic", "BIZ UDPGothic", "Meiryo", sans-serif; }
.mtg-fly.f-t, .mtg-chip-btn.f-t { font-family: ui-monospace, "BIZ UDGothic", "MS Gothic", monospace; }
.mtg-stage.size-s .mtg-fly.z-l { font-size: 1.5rem; }
/* ---- 時刻を指定して送る(予約送信) ---- */
.chat-time.sched { color: var(--accent); font-weight: 700; }
.sched-pop { width: min(380px, calc(100vw - 32px)); }
.sched-quick { display: flex; flex-direction: column; gap: 4px; }
.sched-q { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 0.88rem; cursor: pointer; color: var(--ink); }
.sched-q:hover { background: var(--accent-soft); border-color: var(--accent); }
.sched-custom { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.sched-pick { flex: 1 1 180px; min-height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 16px; }
.sched-bar { border-bottom: 1px dashed var(--line); margin: -2px -4px 4px; padding: 0 4px 4px; }
.sched-toggle { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; padding: 2px 0; display: inline-flex; gap: 6px; align-items: center; }
.sched-caret { font-size: 0.7rem; }
.sched-item { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; padding: 3px 0; }
.sched-when { color: var(--ink-soft); white-space: nowrap; font-weight: 700; }
.sched-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
/* ---- MTG のホワイトボード：左はメモ、右は絵(4:3)。開いている間は共有画面を隠す ---- */
.mtg-screen.wb-on > .mtg-video, .mtg-screen.wb-on > .mtg-empty, .mtg-screen.wb-on > .mtg-who, .mtg-screen.wb-on > .mtg-zoom { display: none !important; }
.wb { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; background: #e9ecea; color: #1d2b28; }
.wb-half { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.12); overflow: hidden; }
.wb-bar, .wb-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 10px; border-bottom: 1px solid #dfe5e2; font-size: 0.85rem; }
.wb-info { color: #6b7a75; font-size: 0.76rem; margin-right: auto; }
.wb-text { flex: 1 1 auto; min-height: 0; border: 0; resize: none; padding: 12px 14px; font: inherit; font-size: 1.05rem; line-height: 1.7; color: #1d2b28; background: #fff; outline: none; }
.wb-btn { border: 1px solid #cfd8d4; background: #fff; color: #1d2b28; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 0.8rem; cursor: pointer; }
.wb-btn:hover { background: #eef5f2; }
.wb-btn.on { background: #2f6f5e; color: #fff; border-color: #2f6f5e; }
.wb-btn.danger { color: #c4373b; border-color: #f0b6b8; }
.wb-memo .wb-bar { position: relative; }
.wb-share { background: #2f6f5e; color: #fff; border-color: #2f6f5e; font-weight: 700; }
.wb-menu { position: absolute; right: 8px; top: calc(100% + 4px); z-index: 5; min-width: 250px; background: #fff; border: 1px solid #dfe5e2; border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,0.2); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.wb-menu-item { text-align: left; border: 0; background: transparent; color: #1d2b28; font: inherit; font-size: 0.86rem; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.wb-menu-item:hover { background: #eef5f2; }
.wb-color { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #b9c4bf; cursor: pointer; padding: 0; }
.wb-color.on { box-shadow: 0 0 0 3px #2f6f5e; }
.wb-canvas-wrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: #f4f6f5; }
.wb-canvas { background: #fff; touch-action: none; cursor: crosshair; box-shadow: 0 0 0 1px #dfe5e2; }
@media (max-width: 760px) { .wb { grid-template-columns: 1fr; grid-template-rows: 1.3fr 1fr; } }
.mtg-stage.size-s .wb { grid-template-columns: 1fr; grid-template-rows: 1.3fr 1fr; padding: 6px; gap: 6px; }
/* 自分メモから TODO・カレンダーへ移ったときの「← 自分メモに戻る」 */
.memo-back-btn { position: fixed; left: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 70; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-size: 0.95rem; font-weight: 800; padding: 11px 18px; box-shadow: 0 6px 18px rgba(0,0,0,0.25); cursor: pointer; }
body.in-call .memo-back-btn { bottom: calc(96px + env(safe-area-inset-bottom)); }
/* ---- カレンダーの予定(📌) ---- */
.cal-chip.event { background: #e8f0fe; color: #1a4fb5; border-left: 3px solid #2f6fdb; }
.cal-chip.event.selected { outline: 2px solid #2f6fdb; }
.cal-detail.event { border-left: 4px solid #2f6fdb; }
.cal-add-ev { flex: 0 0 auto; align-self: flex-start; }
.ev-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-row .profile-label { min-width: 9em; margin: 0; }
.ev-time { width: 120px; flex: 0 0 auto; }
.cal-toggle-event { color: #1a4fb5; }
/* ---- Google カレンダー連携 ---- */
.cal-chip.gcal { background: #e6f4ea; color: #137333; border-left: 3px solid #34a853; }
.cal-chip.gcal.selected { outline: 2px solid #34a853; }
.cal-detail.gcal { border-left: 4px solid #34a853; }
.cal-toggle-gcal { color: #137333; }
.gcal-sec { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.gcal-sec h3 { margin: 0; font-size: 0.95rem; }
.gcal-steps { margin: 0; padding-left: 1.3em; font-size: 0.86rem; line-height: 1.7; color: var(--ink-soft); }
.gcal-ok { margin: 0; color: #137333; font-weight: 700; }
.gcal-err { margin: 0; color: var(--overdue); font-size: 0.86rem; }
/* ---- 入力欄をやりとりの欄の下の端に重ねて半透明に(body.chat-ov。PC のふだんの表示・拡大 1〜6列・スマホ) ----
やりとりの欄は一番下まで広げ、下の余白を入力欄の高さ(--composer-h、chat.js の fitComposer)にして、最新の発言は入力欄のすぐ上で止める。
スマホの「入力欄を下に貼り付ける」指定より後ろに置いて、こちらを優先する */
body.chat-ov .chat-main { position: relative; }
body.chat-ov .chat-main > .chat-log:not(.chat-log-past) { padding-bottom: calc(var(--composer-h, 140px) + 8px); }
body.chat-ov .chat-main > .chat-composer-box { position: absolute; left: 8px; right: 22px; bottom: 6px; top: auto; z-index: 5; margin: 0;
background: color-mix(in srgb, var(--panel) 55%, transparent); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); box-shadow: 0 2px 12px rgba(0,0,0,0.10); }
/* 書いている間は読みやすいように少し濃く */
body.chat-ov .chat-main > .chat-composer-box.has-content { background: color-mix(in srgb, var(--panel) 88%, transparent); }
/* 拡大の2〜8段：入力欄は右の列(最新)の下の端に重ねる。右の列は下まで伸ばす */
body.chat-ov.chat-zoom .chat-main:has(> .chat-log-past) > .chat-log:not(.chat-log-past) { grid-row: 3 / 5; margin: 0 0 10px; }
body.chat-ov.chat-zoom .chat-main:has(> .chat-log-past) > .chat-composer-box { grid-column: -2; grid-row: 3 / 5; bottom: 6px; }
/* スマホ：画面の端いっぱい */
@media (max-width: 640px) {
body.chat-ov .chat-main > .chat-composer-box { left: 2px; right: 2px; bottom: 4px; }
}
/* ---- 拡大の2〜8段：列ごとのスクロールバーを出さない(ホイール・タッチパッド・指で送れる。列どうしは今までどおり一緒に動く) ----
細い列では入力欄の書式の帯の横のスクロールバーも出さない(横に送れば残りのボタンが出る) */
body.zl-cols .chat-main > .chat-log, body.zl-cols .chat-main > .chat-composer-box .fmt-bar { scrollbar-width: none; -ms-overflow-style: none; }
body.zl-cols .chat-main > .chat-log::-webkit-scrollbar, body.zl-cols .chat-main > .chat-composer-box .fmt-bar::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* スクロールバーの分だけ広がった列で、入力欄が右の端に寄りすぎないように */
body.chat-ov.zl-cols .chat-main:has(> .chat-log-past) > .chat-composer-box { right: 8px; }
/* ---- 並べる(拡大中・広い PC)：別々の会話を1列ずつ(2〜8つ。画面の幅に入るだけ)。各列の入力欄は小さめで、やりとりの下の端に重ねて半透明 ---- */
body.chat-zoom.zl-multi .page { max-width: none; }
body.chat-zoom .chat-main.multi { display: flex; flex-direction: column; }
.mc-wrap { display: grid; grid-template-columns: repeat(var(--mc-n, 4), minmax(0, 1fr)); column-gap: 10px; flex: 1; min-height: 0; margin-top: 6px; }
.mc-col { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mc-head { display: flex; gap: 6px; align-items: center; padding: 0 0 6px; }
.mc-pick { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; font-weight: 700; font-size: 0.9rem; padding: 5px 8px; }
.mc-open { flex: 0 0 auto; padding: 3px 9px; }
body.chat-zoom .mc-col > .chat-log { flex: 1; max-height: none; min-height: 0; margin: 0 0 10px; padding-bottom: calc(var(--composer-h, 110px) + 8px); scrollbar-width: none; }
.mc-col > .chat-log::-webkit-scrollbar { display: none; width: 0; }
.mc-col > .chat-composer-box { position: absolute; left: 6px; right: 6px; bottom: 16px; z-index: 5; margin: 0;
background: color-mix(in srgb, var(--panel) 55%, transparent); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); box-shadow: 0 2px 12px rgba(0,0,0,0.10); }
.mc-col > .chat-composer-box.has-content { background: color-mix(in srgb, var(--panel) 88%, transparent); }
/* 小さめの入力欄：書式の帯・Aa・送り方の説明は出さない(ボタンは横に送れる) */
.mc-col .fmt-bar, .mc-col .chat-aa, .mc-col .chat-toolbar-hint { display: none !important; }
.mc-col .chat-tools { scrollbar-width: none; }
.mc-col .chat-tools::-webkit-scrollbar { display: none; }
.mc-col .chat-bubble-col { max-width: 92%; }
.mc-n-label { font-size: 0.78rem; color: var(--ink-faint); white-space: nowrap; }
/* 拡大中の見出し：開く会話を選ぶ欄と、自分メモへのボタン */
.zoom-pick { flex: 0 1 auto; max-width: 260px; min-width: 120px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; font-weight: 800; font-size: 1rem; padding: 4px 8px; }
.chat-head .zoom-self { flex: 0 0 auto; padding: 3px 10px; font-size: 0.85rem; white-space: nowrap; }
/* 拡大の見え方のボタンとメニュー(「1つの会話を大きく見る」「複数の会話を並べる」に分ける) */
.chat-head .zoom-view-btn { flex: 0 0 auto; white-space: nowrap; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.zoom-view-k { color: var(--ink-faint); font-weight: 400; }
.view-menu { min-width: 300px; padding: 6px; }
.view-sec { font-size: 0.74rem; font-weight: 800; color: var(--ink-faint); padding: 8px 10px 4px; letter-spacing: 0.04em; }
.view-sec:not(:first-child) { border-top: 1px solid var(--line); margin-top: 4px; }
.view-item { align-items: flex-start; }
.view-item.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.view-item-text { display: flex; flex-direction: column; gap: 1px; }
.view-item-sub { font-size: 0.74rem; color: var(--ink-faint); font-weight: 400; }
.view-chips { display: flex; gap: 4px; padding: 2px 10px 8px 38px; }
.view-chips .chat-fs-opt { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
/* オンラインMTGの下の帯：広い画面では1行に収める(折り返さない。コメント欄が残りの幅に合わせて縮む) */
@media (min-width: 1100px) {
.mtg-stage:not(.size-s) .mtg-foot { flex-wrap: nowrap; gap: 6px; padding-left: 10px; padding-right: 10px; }
.mtg-stage:not(.size-s) .mtg-foot > * { flex-shrink: 0; }
.mtg-stage:not(.size-s) .mtg-foot .voice-btn { padding: 0 11px; white-space: nowrap; }
.mtg-stage:not(.size-s) .mtg-foot > .mtg-cmt { flex: 1 1 260px; min-width: 240px; max-width: 560px; }
.mtg-stage:not(.size-s) .mtg-cmt-box { min-width: 120px; }
.mtg-stage:not(.size-s) .mtg-foot .mtg-size { padding: 0 10px; }
}
/* オンラインMTGの上の帯の右側：タイマー・その他・画面の大きさ・退出(メニューは下向きに開く) */
.mtg-head { position: relative; z-index: 5; }
.mtg-head-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.mtg-head-tools .voice-btn { min-height: 34px; padding: 0 11px; width: auto; white-space: nowrap; }
.mtg-head-tools .mtg-sizes { min-height: 34px; }
.mtg-head-tools .mtg-size { border: 0; background: transparent; color: #eef3f1; font: inherit; font-size: 0.86rem; font-weight: 700; padding: 0 10px; min-height: 34px; cursor: pointer; }
.mtg-head-tools .mtg-size:hover { background: rgba(255,255,255,0.1); }
.mtg-head-tools .mtg-size.on { background: #7be0aa; color: #10302a; }
.mtg-head-tools .voice-btn.on { outline: 1.5px solid rgba(123,224,170,0.7); }
.mtg-head-tools .mtg-pick { bottom: auto; top: calc(100% + 8px); }
/* 🎨 チャットの色を選ぶ窓 */
.theme-box { max-width: 640px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.theme-card { display: flex; flex-direction: column; gap: 6px; border: 2px solid var(--line); border-radius: 12px; background: var(--panel); padding: 6px; cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.theme-card:hover { border-color: var(--accent); }
.theme-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.theme-sample { display: flex; flex-direction: column; gap: 5px; border-radius: 8px; padding: 8px; }
.theme-b { font-size: 0.74rem; padding: 4px 9px; border-radius: 10px; max-width: 85%; }
.theme-b.theirs { align-self: flex-start; }
.theme-b.mine { align-self: flex-end; }
.theme-name { font-size: 0.82rem; font-weight: 700; padding: 0 2px 2px; }
/* 暗い色の組み合わせでは、自動の更新の帯も暗く */
:root[data-chat-theme="night"] .auto-line, .chat-log[data-chat-theme="night"] .auto-line { background: rgba(255,255,255,0.10); }
/* ==== PC の左端の列(Slack のような並び。幅 900px 以上、拡大表示のときを除く) ==== */
.rail { display: none; }
.chat-side-head-sub { font-weight: 400; font-size: 0.7rem; margin-left: 6px; opacity: 0.8; }
@media (min-width: 900px) {
body.rail-on .rail { display: flex; flex-direction: column; align-items: center; gap: 10px; position: fixed; left: 0; top: 0; bottom: 0; width: 68px; padding: 12px 0 10px; background: #26215C; z-index: 40; }
body.rail-on .page, body.rail-on.chat-fit-page .page { max-width: none; margin: 0 0 0 68px; padding: 0; }
body.rail-on #modules > .module:not(#mod-chat) { max-width: 1000px; margin: 0 auto; padding: 18px 28px; }
body.rail-on #billingGlobal:not(:empty) { margin: 8px 16px; }
.rail-projects { display: flex; flex-direction: column; gap: 8px; align-items: center; max-height: 38vh; overflow-y: auto; scrollbar-width: none; padding: 2px 0 6px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.rail-projects::-webkit-scrollbar { display: none; }
.rail-proj { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; border: 0; background: rgba(255,255,255,0.14); color: #EEEDFE; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; }
.rail-proj:hover { background: rgba(255,255,255,0.28); }
.rail-proj.on { background: #EEEDFE; color: #26215C; box-shadow: 0 0 0 2px #26215C, 0 0 0 4px #AFA9EC; }
body.rail-on .rail .tabs-row { flex-direction: column; border: 0; margin: 0; gap: 4px; align-items: center; flex: 0 0 auto; }
body.rail-on .rail .tabs { flex-direction: column; border: 0; margin: 0; gap: 4px; overflow: visible; }
body.rail-on .rail .tabs button { width: 58px; padding: 6px 2px 5px; border: 0; border-radius: 10px; color: #CECBF6; font-size: 0.66rem; font-weight: 700; text-align: center; position: relative; margin: 0; white-space: nowrap; }
body.rail-on .rail .tabs button::before { content: ''; display: block; width: 22px; height: 22px; margin: 0 auto 3px; background: currentColor; -webkit-mask: var(--ic) no-repeat center / contain; mask: var(--ic) no-repeat center / contain; }
body.rail-on .rail .tabs button { --ic: url("data:image/svg+xml;utf8,"); }
body.rail-on .rail .tabs button[data-tab="chat"] { --ic: url("data:image/svg+xml;utf8,"); }
body.rail-on .rail .tabs button[data-tab="tasks"] { --ic: url("data:image/svg+xml;utf8,"); }
body.rail-on .rail .tabs button[data-tab="calendar"] { --ic: url("data:image/svg+xml;utf8,"); }
body.rail-on .rail .tabs button:hover { color: #fff; background: rgba(255,255,255,0.08); }
body.rail-on .rail .tabs button.active { background: #534AB7; color: #fff; }
body.rail-on .rail .tabs .tab-badge { position: absolute; top: 1px; right: 6px; margin: 0; }
body.rail-on .rail #tabOrderBtn { background: transparent; border: 0; color: #AFA9EC; margin: 0; font-size: 0.9rem; padding: 2px 8px; }
body.rail-on .rail .userbar { margin: auto 0 0; padding: 0; border: 0; flex: 0 0 auto; flex-direction: column; gap: 6px; }
body.rail-on .rail #userLabel, body.rail-on .rail #workspaceSelect { display: none; }
body.rail-on .rail .gear-btn { background: transparent; border: 0; color: #CECBF6; font-size: 1.35rem; padding: 4px 10px; }
body.rail-on .rail .gear-btn:hover, body.rail-on .rail .gear-btn.on { color: #fff; background: rgba(255,255,255,0.1); }
body.rail-on .rail .gear-menu { left: 58px; right: auto; top: auto; bottom: 0; }
/* チャット：会話の一覧は濃い紫、チャットは上から下まで */
body.rail-on .chat-wrap { grid-template-columns: 264px minmax(0, 1fr); gap: 0; }
body.rail-on .chat-fit .chat-side { height: var(--chat-h); max-height: none; background: #3C3489; color: #EEEDFE; padding: 10px 8px 10px; border-right: 0; }
body.rail-on .chat-fit .chat-main { padding: 6px 18px 0; }
body.rail-on .side-proj { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: transparent; color: #fff; font: inherit; font-size: 1.02rem; font-weight: 800; text-align: left; padding: 4px 6px 8px; cursor: pointer; border-radius: 8px; }
body.rail-on .side-proj:hover { background: rgba(255,255,255,0.08); }
body.rail-on .side-proj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.rail-on .side-proj-caret { font-size: 0.8rem; color: #CECBF6; }
body.rail-on .chat-side .chat-search { background: #534AB7; border-color: transparent; color: #fff; }
body.rail-on .chat-side .chat-search::placeholder { color: #CECBF6; }
body.rail-on .chat-side .chat-item { color: #EEEDFE; background: transparent; }
body.rail-on .chat-side .chat-item:hover { background: rgba(255,255,255,0.08); }
body.rail-on .chat-side .chat-item.active { background: #EEEDFE; color: #26215C; }
body.rail-on .chat-side .chat-item-sub { color: #AFA9EC; }
body.rail-on .chat-side .chat-item.active .chat-item-sub { color: #534AB7; }
body.rail-on .chat-side .chat-item.unread .chat-item-name { color: #fff; }
body.rail-on .chat-side .chat-item.active.unread .chat-item-name { color: #26215C; }
body.rail-on .chat-side .chat-side-head { color: #AFA9EC; }
body.rail-on .chat-side .chat-add { background: transparent; border-color: rgba(255,255,255,0.3); color: #EEEDFE; }
body.rail-on .chat-side .chat-row-btn { background: #534AB7; border-color: transparent; color: #fff; }
body.rail-on .chat-side .chat-hint, body.rail-on .chat-side .chat-notify, body.rail-on .chat-side .chat-notify *, body.rail-on .chat-side .chat-archived summary { color: #CECBF6; }
body.rail-on .chat-side .chat-notify { border-top-color: rgba(255,255,255,0.2); }
body.rail-on .chat-side .chat-hint.voice-warn { color: #F7C1C1; }
/* 見出しはアイコンだけ(説明はマウスを載せると出る) */
body.rail-on .chat-head .btn-label { display: none; }
body.rail-on .chat-head .btn-icon { display: inline; }
body.rail-on .chat-head .icon-btn { font-size: 1.05rem; padding: 4px 10px; }
}
@media (min-width: 900px) {
body.rail-on .side-extra { margin-top: 14px; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 8px; }
body.rail-on .side-extra > summary { color: #CECBF6; font-size: 0.8rem; cursor: pointer; padding: 4px 6px; }
body.rail-on .side-extra .chat-hint, body.rail-on .side-extra .chat-hint * { color: #EEEDFE !important; }
body.rail-on .side-extra .chat-notify { margin-top: 8px; }
}
.ws-title { display: none; }
@media (min-width: 900px) {
body.rail-on:not(.chat-fit-page) .ws-title { display: block; max-width: 1000px; margin: 0 auto; padding: 16px 28px 0; font-size: 0.82rem; font-weight: 800; color: #534AB7; flex: 0 0 100%; }
body.rail-on:not(.chat-fit-page) .ws-title::before { content: '▣ '; }
body.rail-on:not(.chat-fit-page) #modules > .module:not(#mod-chat) { padding-top: 6px; }
}
@media (min-width: 900px) { body.rail-on p.foot { max-width: 1000px; margin: 8px auto 16px; padding: 0 28px; box-sizing: border-box; flex: 0 0 100%; } }
@media (min-width: 900px) { .rail-proj.two { font-size: 0.78rem; letter-spacing: -0.02em; } }
/* ---- BeeXy のロゴ(六角形のマークと文字) ---- */
.hive-mark { width: 24px; height: 24px; flex: 0 0 auto; display: block; }
.login-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.5rem; letter-spacing: 0.02em; color: var(--ink); margin: 0 0 6px; }
.login-logo .hive-mark { width: 34px; height: 34px; }
.top-logo { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; font-family: var(--body); font-weight: 800; font-size: 0.95rem; color: var(--ink); letter-spacing: 0.02em; }
.rail-logo { display: none; }
@media (min-width: 900px) {
body.rail-on .rail .top-logo { display: none; }
body.rail-on .rail-logo { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.04em; padding: 0 0 8px; margin-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,0.14); width: 48px; }
body.rail-on .rail-logo .hive-mark { width: 30px; height: 30px; }
}
/* ==== スマホ(幅 640px 以下)：Slack のような並び。上に紫の帯(ロゴ・プロジェクト名)、下にアイコンの帯(チャット・TODO・予定・あなた)。
会話を開いているとき(chat-focus)は、今までどおり上下の帯を隠して会話を画面いっぱいに ==== */
.mob-more { display: none; }
@media (max-width: 640px) {
body:not(.chat-focus) .page { padding: 0 12px calc(78px + env(safe-area-inset-bottom)); }
body:not(.chat-focus) #appView > .userbar { position: sticky; top: 0; z-index: 20; margin: 0 -12px 12px; padding: 10px 12px; background: #3C3489; color: #fff; justify-content: flex-start; flex-wrap: nowrap; gap: 8px; }
#appView > .userbar .top-logo { color: #fff; margin-right: 0; }
#appView > .userbar #userLabel { display: none; }
#appView > .userbar #workspaceSelect { flex: 1 1 auto; min-width: 0; max-width: none; height: auto; background: transparent; color: #fff; border: 0; font-family: var(--body); font-weight: 800; font-size: 1.02rem; padding: 2px 0; }
#appView > .userbar #workspaceSelect option { color: #1f2937; }
#appView > .userbar .gear-btn { display: none; }
.gear-menu { position: fixed; left: 10px; right: 10px; top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); max-height: 70vh; overflow-y: auto; z-index: 80; }
body:not(.chat-focus) .tabs-row { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: stretch; gap: 0; margin: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); border-bottom: 0; }
body:not(.chat-focus) .tabs-row .tabs { flex: 1 1 auto; display: flex; justify-content: space-around; gap: 0; margin: 0; border: 0; overflow: visible; }
body:not(.chat-focus) .tabs-row .tabs button, body:not(.chat-focus) .tabs-row .mob-more { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0 3px; margin: 0; border: 0; background: none; color: var(--ink-faint); font-family: var(--body); font-size: 0.68rem; font-weight: 700; position: relative; cursor: pointer; }
body:not(.chat-focus) .tabs-row .tabs button::before, body:not(.chat-focus) .tabs-row .mob-more::before { content: ''; display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--ic) no-repeat center / contain; mask: var(--ic) no-repeat center / contain; }
.tabs-row .tabs button { --ic: url("data:image/svg+xml;utf8,"); }
.tabs-row .tabs button[data-tab="chat"] { --ic: url("data:image/svg+xml;utf8,"); }
.tabs-row .tabs button[data-tab="tasks"] { --ic: url("data:image/svg+xml;utf8,"); }
.tabs-row .tabs button[data-tab="calendar"] { --ic: url("data:image/svg+xml;utf8,"); }
.tabs-row .mob-more { --ic: url("data:image/svg+xml;utf8,"); }
.tabs-row .tabs button[data-tab="issues"] { --ic: url("data:image/svg+xml;utf8,"); }
.tabs-row .tabs button[data-tab="meetings"] { --ic: url("data:image/svg+xml;utf8,"); }
.tabs-row .tabs button[data-tab="wbs"] { --ic: url("data:image/svg+xml;utf8,"); }
.tabs-row .tabs button[data-tab="flows"] { --ic: url("data:image/svg+xml;utf8,"); }
.tabs-row .tabs button[data-tab="crm"] { --ic: url("data:image/svg+xml;utf8,"); }
body:not(.chat-focus) .tabs-row .tabs button.active { color: #3C3489; border: 0; }
body:not(.chat-focus) .tabs-row .tabs .tab-badge { position: absolute; top: 0; left: calc(50% + 6px); margin: 0; }
body:not(.chat-focus) .tabs-row #tabOrderBtn { display: none; }
/* 帯は5つまで：「⇅」の並びで上から4つ＋「その他」(2026-11-02 ナカヤン) */
body:not(.chat-focus) .tabs-row .tabs { display: contents; } /* タブと「その他」を同じ幅に並べる */
body:not(.chat-focus) .tabs-row .tabs button.mob-over { display: none !important; }
body:not(.chat-focus) .tabs-row .mob-more.active { color: #3C3489; }
body:not(.chat-focus) .tabs-row .mob-more.has-unread::after { content: ''; position: absolute; top: 3px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: var(--overdue); }
/* 通話中の帯は、アイコンの帯の上に */
body:not(.chat-focus) .voice-bar { bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
.side-extra { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 6px; }
.side-extra > summary { color: var(--ink-faint); font-size: 0.82rem; cursor: pointer; padding: 6px 2px; }
}
/* TODO の上のボタン：左に「＋ 登録」、右に「ゴミ箱」。アイコンだけの丸いボタン */
.todo-icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; flex: 0 0 auto; }
.todo-add { border: 0; background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.todo-add:hover { filter: brightness(1.08); }
.todo-trash { border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); }
.todo-trash:hover { color: var(--ink); border-color: var(--ink-faint); }
#mod-tasks .header-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
@media (max-width: 480px) { #mod-tasks .header-actions { width: auto; } }
/* スマホのチャット：左右には動かさず、上下のスクロールだけ(指で横にはじいても揺れないように) */
@media (max-width: 640px) {
html, body { overflow-x: clip; }
body.chat-focus { overscroll-behavior-x: none; }
.chat-main, .chat-log { overflow-x: hidden; overscroll-behavior-x: none; }
.chat-log { touch-action: pan-y pinch-zoom; }
}
/* TODO の絞り込み：大項目・対応者・状態を1行に。状態はボタンを押すと開く一覧 */
#mod-tasks .filters-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
#mod-tasks .cf-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#mod-tasks .catfilter select { width: auto; max-width: 220px; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font: inherit; font-size: 0.86rem; }
.state-filter { position: relative; }
.state-filter-btn { border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; font-size: 0.86rem; font-weight: 700; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.state-filter-btn .n { font-family: var(--mono); opacity: 0.7; margin-left: 2px; }
.state-filter-btn.filtered { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.state-filter-btn.on { box-shadow: 0 0 0 2px var(--accent-soft); }
.state-filter .filters { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; gap: 2px; min-width: 190px; margin: 0; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,0.16); }
.state-filter .filters[hidden] { display: none; }
.state-filter .chip { border: 0; border-radius: 8px; padding: 9px 12px; display: flex; justify-content: space-between; gap: 12px; }
.state-filter .chip:hover { background: var(--accent-soft); }
@media (max-width: 640px) {
#mod-tasks .filters-row { flex-direction: row; align-items: center; }
#mod-tasks .catfilter select { max-width: 46vw; }
.state-filter .filters { position: fixed; left: 10px; right: 10px; top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); }
}
/* 👥 コンタクト(探して申請・届いた申請・申請中・つながっている人) */
.contacts-panel .contacts-h { font-size: 0.92rem; margin: 18px 0 8px; }
.person-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.person-main { flex: 1 1 200px; min-width: 0; }
.person-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.person-id { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); }
.person-bio { font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; }
.person-note { font-size: 0.84rem; color: var(--ink); margin-top: 4px; white-space: pre-wrap; }
.person-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.person-tag { font-size: 0.76rem; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.contact-msg-box { flex: 1 1 100%; min-width: 260px; }
.profile-check { display: flex; gap: 6px; align-items: flex-start; font-size: 0.82rem; margin-top: 10px; line-height: 1.5; }
/* ---- スマホの画面の角・下の線(iPhone など)：端末が教える安全な余白(env(safe-area-inset-*))を空ける ----
index.html の viewport に viewport-fit=cover を付けて、余白の値を受け取る。余白の無い端末でも、角から 8px は離す */
@media (max-width: 640px) {
body.chat-focus .page { padding: calc(6px + env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); }
body.chat-focus .chat-main { height: calc(100dvh - 10px - env(safe-area-inset-top)); }
body.chat-ov .chat-main > .chat-composer-box { left: 6px; right: 6px; bottom: max(6px, calc(env(safe-area-inset-bottom) - 16px)); border-radius: 18px; }
body:not(.chat-focus) #appView > .userbar { padding-top: calc(10px + env(safe-area-inset-top)); }
body:not(.chat-focus) .page { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
}
/* TODO のアラート：件数だけの細い1行(押すと中身が開く) */
.alert-box.alert-compact { padding: 8px 14px; margin-bottom: 14px; display: block; }
.alert-box.alert-compact.empty { font-size: 0.82rem; color: var(--ink-faint); text-align: left; }
.alert-box.alert-compact > summary.alert-title { margin: 0; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.alert-box.alert-compact > summary.alert-title::-webkit-details-marker { display: none; }
.alert-box.alert-compact > summary.alert-title::after { content: '▾'; font-size: 0.8rem; margin-left: auto; color: var(--overdue); }
.alert-box.alert-compact[open] > summary.alert-title::after { content: '▴'; }
.alert-box.alert-compact[open] .alert-list { margin-top: 10px; }
/* スマホの上の帯：プロジェクトの選び欄を、白い枠と白い ▾ で選べる場所と分かるように */
@media (max-width: 640px) {
#appView > .userbar #workspaceSelect { -webkit-appearance: none; appearance: none; background: rgba(255,255,255,0.14) url("data:image/svg+xml;utf8,") no-repeat right 10px center / 16px 16px; border: 1px solid rgba(255,255,255,0.45); border-radius: 10px; padding: 6px 34px 6px 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
}
/* TODO の一覧をシンプルに：タスクはチェック・文・期限の札・「›」。押すと中身。大項目の操作は「⋯」の中 */
.task { align-items: center; }
.task .badge.mini { font-size: 0.72rem; padding: 2px 8px; flex: 0 0 auto; }
.task-chev { flex: 0 0 auto; width: 30px; height: 30px; border: 0; background: transparent; color: var(--ink-faint); font-size: 1.3rem; line-height: 1; cursor: pointer; border-radius: 8px; transition: transform .15s; position: relative; }
.task-chev:hover { background: var(--accent-soft); color: var(--accent); }
.task-chev.open { transform: rotate(90deg); color: var(--accent); }
.task-chev.has-memo::after { content: ''; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.task .task-meta { margin-top: 4px; }
.task-memo { flex-basis: 100%; white-space: pre-wrap; font-size: 0.86rem; color: var(--ink-soft); background: var(--paper); border-radius: 8px; padding: 8px 10px; }
.task-acts { flex-basis: 100%; display: flex; gap: 8px; margin-top: 2px; }
.task-acts .del-btn { color: var(--overdue); }
.group-head .add-to-cat.round { width: 28px; height: 28px; padding: 0; border-radius: 50%; font-size: 1rem; line-height: 1; margin-left: auto; }
.cat-menu-wrap { position: relative; }
.group-head .cat-more { font-size: 1.1rem; padding: 2px 8px; }
.cat-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; min-width: 170px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,0.16); }
.cat-menu button { border: 0; background: transparent; text-align: left; padding: 8px 10px; border-radius: 6px; font: inherit; font-size: 0.86rem; font-weight: 500; color: var(--ink); cursor: pointer; }
.cat-menu button:hover:not(:disabled) { background: var(--accent-soft); }
.cat-menu button:disabled { opacity: 0.35; cursor: default; }
/* ✨ AI で分ける */
.ai-sort-btn { border: 1px dashed var(--accent); background: var(--accent-soft); color: var(--accent); font: inherit; font-weight: 700; font-size: 0.88rem; padding: 8px 14px; border-radius: 999px; cursor: pointer; margin: 0 0 14px; }
.ai-sort-btn:disabled { opacity: 0.6; cursor: default; }
.ai-sort-box { max-width: 640px; }
.ai-sort-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; margin: 10px 0 14px; }
.ai-sort-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ai-sort-text { font-size: 0.9rem; word-break: break-word; }
@media (max-width: 640px) { .ai-sort-row { grid-template-columns: 1fr; gap: 4px; } }
/* チャットだけの人(管理者が「チャットだけの人として作る」で作った人)：プロジェクト・TODO・カレンダーまわりを出さない */
body.chat-only #workspaceSelect, body.chat-only #railProjects, body.chat-only #wsTitle, body.chat-only #tabOrderBtn,
body.chat-only #gcalBtn, body.chat-only #remindBtn, body.chat-only #wsSettingsBtn, body.chat-only #newWsBtn, body.chat-only #tabOrderMenuBtn { display: none !important; }
.pw-chatonly { font-size: 12px; padding: 1px 8px; border-radius: 10px; background: #e8f1fb; color: #1d5a96; white-space: nowrap; }
/* ---- ハンコ(文字の絵文字)：色と形。長い言葉は2行 ---- */
.hk { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; font-weight: 900; color: var(--hk); letter-spacing: 0.01em; white-space: nowrap; font-size: 0.78rem; vertical-align: middle; }
.hk.two { font-size: 0.62rem; }
.hk-solid { background: var(--hk); color: #fff; border-radius: 999px; min-width: 1.9em; min-height: 1.9em; padding: 2px 6px; }
.hk-circle { border: 2px solid var(--hk); border-radius: 999px; min-width: 2.1em; min-height: 2.1em; padding: 2px 5px; background: #fff; }
.hk-text { padding: 1px 2px; }
.react-chip.stamp .react-e { border: 0; padding: 0; font-size: inherit; color: inherit; }
.react-stamps { gap: 4px; }
.hanko { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 4px 6px; min-width: 52px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.hanko:hover, .hanko:focus-visible { background: #fff6e8; border-color: #e8a10a; color: inherit; }
.act-sheet .hanko { padding: 5px 7px; }
.act-sheet .hanko .hk { font-size: 0.9rem; }
.act-sheet .hanko .hk.two { font-size: 0.72rem; }
/* ---- スタンプ(大きなカード)と、絵文字だけの発言 ---- */
.chat-bubble.bubble-bare { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.chat-bubble.bubble-bare::before, .chat-bubble.bubble-bare::after { display: none !important; }
.stamp-card { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; width: 132px; padding: 12px 8px 10px; border-radius: 22px; background: color-mix(in srgb, var(--sc) 12%, #fff); border: 2.5px solid var(--sc); cursor: pointer; user-select: none; }
.stamp-card .stamp-e { font-size: 56px; line-height: 1.05; display: inline-block; }
.stamp-card .stamp-t { font-size: 0.95rem; font-weight: 900; color: var(--sc); text-align: center; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; }
.chat-bigemoji { font-size: 52px; line-height: 1.15; cursor: pointer; user-select: none; display: inline-block; }
.emoji-pop-tabs { padding: 0; display: flex; flex-direction: column; width: min(360px, calc(100vw - 32px)); max-height: 340px; overflow: hidden; }
.emoji-tabs { display: flex; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.emoji-tabs button { flex: 1; border: 0; background: none; font: inherit; font-weight: 800; font-size: 0.86rem; padding: 9px 0; color: var(--ink-faint); cursor: pointer; border-bottom: 2.5px solid transparent; }
.emoji-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.emoji-pop-body { overflow-y: auto; padding: 6px 8px 8px; flex: 1 1 auto; min-height: 0; }
.stamp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stamp-pick { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--sc) 45%, #fff); background: color-mix(in srgb, var(--sc) 8%, #fff); cursor: pointer; font: inherit; }
.stamp-pick:hover { border-color: var(--sc); }
.stamp-pick .stamp-e { font-size: 28px; line-height: 1.1; }
.stamp-pick .stamp-t { font-size: 0.62rem; font-weight: 800; color: var(--sc); line-height: 1.2; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
/* 動き(届いたときと、押したときに .anim が付く) */
.anim.a-bounce .stamp-e, .chat-bigemoji.anim.a-bounce { animation: hv-bounce 0.9s ease 2; }
.anim.a-beat .stamp-e, .chat-bigemoji.anim.a-beat { animation: hv-beat 0.8s ease 3; }
.anim.a-bow .stamp-e, .chat-bigemoji.anim.a-bow { animation: hv-bow 1.1s ease 2; transform-origin: 50% 90%; }
.anim.a-float .stamp-e, .chat-bigemoji.anim.a-float { animation: hv-float 1.4s ease-in-out 2; }
.anim.a-shake .stamp-e, .chat-bigemoji.anim.a-shake { animation: hv-shake 0.6s ease 3; }
.anim.a-pop .stamp-e, .chat-bigemoji.anim.a-pop { animation: hv-pop 0.7s cubic-bezier(.3,1.6,.5,1) 2; }
.anim.a-spin .stamp-e, .chat-bigemoji.anim.a-spin { animation: hv-spin 1.2s ease 1; }
.anim.a-jump .stamp-e, .chat-bigemoji.anim.a-jump { animation: hv-jump 0.7s ease 3; }
.anim.a-run .stamp-e, .chat-bigemoji.anim.a-run { animation: hv-run 1.2s ease 1; }
.anim.a-tilt .stamp-e, .chat-bigemoji.anim.a-tilt { animation: hv-tilt 1.2s ease 2; }
.anim.a-wave .stamp-e, .chat-bigemoji.anim.a-wave { animation: hv-wave 0.9s ease 3; transform-origin: 70% 80%; }
.anim.a-flame .stamp-e, .chat-bigemoji.anim.a-flame { animation: hv-flame 0.5s ease 4; transform-origin: 50% 100%; }
.stamp-card.anim { animation: hv-in 0.35s ease 1; }
@keyframes hv-in { from { transform: scale(0.6); opacity: 0.2; } to { transform: none; opacity: 1; } }
@keyframes hv-bounce { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-14px); } 55% { transform: translateY(0); } 70% { transform: translateY(-5px); } }
@keyframes hv-beat { 0%,100% { transform: scale(1); } 25% { transform: scale(1.25); } 50% { transform: scale(0.95); } 70% { transform: scale(1.12); } }
@keyframes hv-bow { 0%,100% { transform: rotate(0); } 40%,60% { transform: rotate(-28deg) translateY(4px); } }
@keyframes hv-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px) rotate(-6deg); } }
@keyframes hv-shake { 0%,100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-6px) rotate(-8deg); } 40% { transform: translateX(6px) rotate(8deg); } 60% { transform: translateX(-4px) rotate(-5deg); } 80% { transform: translateX(4px) rotate(5deg); } }
@keyframes hv-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes hv-spin { from { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } to { transform: rotate(360deg) scale(1); } }
@keyframes hv-jump { 0%,100% { transform: translateY(0) scaleY(1); } 15% { transform: translateY(0) scaleY(0.85); } 45% { transform: translateY(-18px) scaleY(1.05); } 75% { transform: translateY(0) scaleY(0.95); } }
@keyframes hv-run { 0% { transform: translateX(-40px); opacity: 0; } 30% { opacity: 1; } 70% { transform: translateX(6px); } 100% { transform: translateX(0); } }
@keyframes hv-tilt { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 70% { transform: rotate(10deg); } }
@keyframes hv-wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(20deg); } 50% { transform: rotate(-12deg); } 75% { transform: rotate(16deg); } }
@keyframes hv-flame { 0%,100% { transform: scale(1, 1); } 50% { transform: scale(1.08, 1.2); } }
@media (prefers-reduced-motion: reduce) { .anim .stamp-e, .chat-bigemoji.anim, .stamp-card.anim { animation: none !important; } }
/* ---- コンタクト：探す欄を大きく・見つかり方 ---- */
.contact-find { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.contact-find .contact-q { width: 100%; box-sizing: border-box; font-size: 16px; padding: 13px 14px; min-height: 50px; border-radius: 10px; }
.contact-find .contact-find-btn { min-height: 48px; font-size: 1rem; }
@media (min-width: 641px) { .contact-find { flex-direction: row; align-items: stretch; } .contact-find .contact-q { flex: 1 1 auto; } .contact-find .contact-find-btn { flex: 0 0 auto; padding: 0 28px; } }
.find-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 12px; font-size: 0.86rem; }
.find-label { font-weight: 700; color: var(--ink-soft); }
.find-sel { font: inherit; font-size: 16px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); max-width: 100%; }
/* ---- はじめての使い方 ---- */
.guide-box { max-width: 520px; }
.guide-box h2 { margin: 0 0 4px; }
.guide-steps { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.guide-step { display: flex; gap: 10px; align-items: flex-start; }
.guide-step .guide-ic { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; width: 32px; text-align: center; }
.guide-step strong { display: block; font-size: 0.95rem; }
.guide-step p { margin: 2px 0 0; font-size: 0.84rem; color: var(--ink-soft); line-height: 1.55; }
.guide-btns { justify-content: flex-end; }
.guide-btns .qa-submit { min-width: 140px; min-height: 44px; }
/* 左端の列のとき：設定まわりの画面(利用者とパスワード・プロジェクトの設定など)も、列から離して読みやすい幅に */
@media (min-width: 900px) {
body.rail-on #addView, body.rail-on #trashView, body.rail-on #wsView, body.rail-on #pwView, body.rail-on #pwAdminView { max-width: 1000px; margin: 0 auto; padding: 18px 28px; box-sizing: border-box; }
}
.pw-user-row .pw-co-btn { margin-left: auto; }
.guide-box .find-box { flex-direction: column; align-items: stretch; } .guide-box .find-sel { width: 100%; }
.react-chip .hk.two { font-size: 0.66rem; }
/* ハンコを選ぶ欄：同じ大きさの升目に並べ、字を大きく */
.react-pick .react-stamps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.react-pick .react-stamps .hanko { min-width: 0; min-height: 50px; padding: 3px; }
.react-pick .react-stamps .hk { font-size: 0.95rem; }
.react-pick .react-stamps .hk.two { font-size: 0.74rem; }
.react-menu { width: min(400px, calc(100vw - 24px)); }
/* ---- 会話の一覧：1対1は相手のアイコンと、自分だけのメモ(1行) ---- */
.chat-item.with-av { padding-top: 8px; padding-bottom: 8px; gap: 10px; min-height: 52px; }
.chat-item .side-av { flex: 0 0 auto; display: flex; }
.chat-item .side-av .chat-avatar { flex-basis: 36px; width: 36px; height: 36px; font-size: 0.95rem; border-width: 0; }
.chat-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-item-main .chat-item-name { flex: 0 0 auto; font-size: 0.95rem; }
.chat-item-memo { font-size: 0.74rem; font-weight: 400; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-memo { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.nick-label { display: block; font-size: 0.82rem; font-weight: 700; margin: 10px 0 4px; }
.nick-memo { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; line-height: 1.5; }
.nick-memo-n { display: block; text-align: right; font-size: 0.74rem; }
.chat-item.with-av { max-width: 100%; overflow: hidden; } .chat-side { min-width: 0; } .chat-item-main { overflow: hidden; }
.guest-box .nick-name, .guest-box .nick-memo { flex: 0 0 auto; width: 100%; box-sizing: border-box; } .guest-box .nick-name { height: auto; min-height: 44px; } .guest-box .nick-memo { height: auto; min-height: 110px; }
/* 名前の横のボタンが3つ(📝・📞・🖥)のとき、右の空きを広げる */
.chat-row.acts-3 > .chat-item { padding-right: 112px; }
.chat-row.acts-1 > .chat-item { padding-right: 42px; }
@media (hover: hover) {
.chat-row.acts-3 > .chat-item, .chat-row.acts-1 > .chat-item { padding-right: 10px; }
.chat-row.acts-3:hover > .chat-item, .chat-row.acts-3:focus-within > .chat-item { padding-right: 112px; }
.chat-row.acts-1:hover > .chat-item, .chat-row.acts-1:focus-within > .chat-item { padding-right: 42px; }
}
.memo-view-box { max-width: 520px; }
.memo-view-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; font-size: 0.95rem; background: var(--bg, #f7f7f5); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 8px 0 12px; max-height: 50vh; overflow-y: auto; }
/* ==== 友だちのタイムライン(feed.js) ==== */
body.rail-on .rail .tabs button[data-tab="timeline"], .tabs-row .tabs button[data-tab="timeline"] { --ic: url("data:image/svg+xml;utf8,"); }
.fp-wrap { max-width: 640px; margin: 0 auto; padding: 4px 0 24px; display: flex; flex-direction: column; gap: 10px; }
.fp-title { display: flex; flex-direction: column; gap: 2px; margin: 4px 2px 2px; }
.fp-title h2 { margin: 0; font-size: 1.15rem; }
.fp-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.fp-row { display: flex; gap: 10px; align-items: flex-start; }
.fp-row > .chat-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-width: 0; }
.fp-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fp-input { width: 100%; box-sizing: border-box; border: 0; resize: vertical; font: inherit; font-size: 16px; line-height: 1.6; min-height: 72px; background: transparent; outline: none; padding: 6px 2px; }
.fp-tools { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.fp-tools .fp-post-btn { margin-left: auto; min-width: 104px; border-radius: 999px; }
.fp-count { font-size: 0.78rem; color: var(--ink-faint); margin-left: auto; }
.fp-count:empty { display: none; }
.fp-count + .fp-post-btn { margin-left: 8px; }
.fp-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.fp-thumb { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: #eee; }
.fp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fp-thumb.up img { opacity: 0.45; }
.fp-thumb-x { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.6); color: #fff; cursor: pointer; font-size: 0.9rem; line-height: 1; }
.fp-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.fp-name { font-size: 0.95rem; }
.fp-id, .fp-time { font-size: 0.78rem; color: var(--ink-faint); }
.fp-more { margin-left: auto; border: 0; background: none; color: var(--ink-faint); font: inherit; font-size: 0.76rem; cursor: pointer; padding: 2px 4px; }
.fp-more:hover { color: var(--overdue, #c0392b); }
.fp-text { font-size: 0.95rem; line-height: 1.65; overflow-wrap: anywhere; }
.fp-photos { display: grid; gap: 4px; border-radius: 14px; overflow: hidden; }
.fp-photos.n1 { grid-template-columns: 1fr; }
.fp-photos.n2, .fp-photos.n4 { grid-template-columns: 1fr 1fr; }
.fp-photos.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.fp-photos.n3 .fp-photo:first-child { grid-row: 1 / 3; }
.fp-photo { display: block; background: #eee; aspect-ratio: 4 / 3; }
.fp-photos.n1 .fp-photo { aspect-ratio: auto; max-height: 420px; }
.fp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-photos.n1 .fp-photo img { max-height: 420px; object-fit: contain; background: #111; }
.fp-acts { display: flex; align-items: center; gap: 14px; margin-top: 2px; flex-wrap: wrap; }
.fp-act { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; font: inherit; font-size: 0.88rem; color: var(--ink-soft); cursor: pointer; padding: 4px 6px; border-radius: 999px; }
.fp-act:hover, .fp-act.on { background: var(--accent-soft); }
.fp-act.like.on { color: #e0245e; background: #fde8ef; }
.fp-act.pop .fp-heart { animation: hv-beat 0.5s ease 1; display: inline-block; }
.fp-likers { font-size: 0.76rem; color: var(--ink-faint); }
.fp-replies { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.fp-reply { display: flex; gap: 8px; align-items: flex-start; }
.fp-reply > .chat-avatar { flex: 0 0 28px; width: 28px; height: 28px; font-size: 0.75rem; border-width: 0; }
.fp-reply-main { flex: 1 1 auto; min-width: 0; }
.fp-reply-main .fp-text { font-size: 0.88rem; }
.fp-reply-new { display: flex; gap: 6px; align-items: flex-end; }
.fp-reply-input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; font: inherit; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; resize: vertical; min-height: 38px; }
.fp-empty { text-align: center; color: var(--ink-soft); }
.fp-empty p { margin: 6px 0 10px; }
.fp-more-btn { align-self: center; }
.fp-recs-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.fp-recs-list { display: flex; flex-direction: column; gap: 8px; }
.fp-rec { display: flex; gap: 10px; align-items: center; }
.fp-rec > .chat-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-width: 0; }
.fp-rec-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.fp-rec-main .sub, .fp-rec-why { flex-basis: 100%; font-size: 0.78rem; }
.fp-rec-why { color: var(--accent); }
.guide-rec { margin: 4px 0 10px; }
body.rail-on #modules > #mod-timeline { max-width: 720px; }
@media (max-width: 640px) { .fp-wrap { padding-top: 0; } .fp-card { border-radius: 12px; padding: 10px 12px; } }
.fp-tools .fp-post-btn { width: auto; flex: 0 0 auto; padding: 8px 18px; } .fp-compose .fp-input { border: 0; background: transparent; }
.fp-ic { display: inline-flex; }
.fp-act.reply:hover, .fp-act.reply.on { color: #1d9bf0; background: #e8f5fd; }
.fp-act.like:hover { color: #e0245e; background: #fde8ef; }
.fp-act.pop .fp-heart { animation: hv-beat 0.5s ease 1; }
.fp-recs-head { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.fp-recs-head .sub { flex: 1 1 auto; }
.fp-rec .fp-rec-btn { width: auto; flex: 0 0 auto; padding: 6px 14px; font-size: 0.84rem; border-radius: 999px; }
body.rail-on .rail .tabs button[data-tab="timeline"] { letter-spacing: -0.06em; font-size: 0.6rem; }
.fp-text { white-space: pre-wrap; }
.fp-reply-new .qa-submit { width: auto; flex: 0 0 auto; white-space: nowrap; padding: 8px 16px; }
.fp-reply-new .icon-btn { flex: none; white-space: nowrap; }
.guide-box { max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box; }
/* タイムラインの入力欄：iPhone は 16px より小さい入力欄を触ると画面を拡大して左右に揺れるので、必ず 16px にする。横には動かさない */
#mod-timeline textarea, #mod-timeline input { font-size: 16px; }
@media (max-width: 640px) {
#mod-timeline, .fp-wrap { overflow-x: clip; max-width: 100%; }
.fp-wrap { touch-action: pan-y pinch-zoom; }
}
/* スマホの入力欄はどれも 16px 以上に(iPhone が触ったときに画面を拡大しないように) */
@media (max-width: 640px) {
.guest-modal input[type="text"], .guest-modal input[type="email"], .guest-modal input[type="password"], .guest-modal input:not([type]), .guest-modal textarea, .guest-modal select, .qa-input, input.qa-input, .find-sel { font-size: 16px; } /* input.qa-input：input[type=…] の共通の決まりより強くする(2026-10-29) */
}
.contact-decline { color: #b42318; border-color: #f1c4bf; } .contact-decline:hover { background: #fdecea; }
.person-acts .contact-decline { border: 1px solid #f1c4bf; border-radius: 8px; padding: 8px 16px; background: #fff; font-weight: 700; }
.person-acts .qa-submit { width: auto; padding: 8px 18px; }
@media (max-width: 640px) { .person-acts { flex-basis: 100%; justify-content: flex-end; } }
/* ---- 動画(15秒まで) ---- */
.chat-video { display: block; max-width: min(320px, 100%); max-height: 360px; border-radius: 10px; background: #111; margin: 4px 0; }
.fp-video video { width: 100%; max-height: 480px; display: block; background: #111; border-radius: 14px; }
.fp-thumb video { width: 100%; height: 100%; object-fit: cover; }
.fp-thumb-vid { width: 100%; height: 100%; background: #333; }
.fp-thumb.vid { width: 120px; }
.fp-thumb-label { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.66rem; padding: 2px 4px; text-align: center; }
/* スタンプの言葉：「|」で分けた行ごとに改行し、行の途中では折り返さない */
.stamp-t .stamp-l { display: block; white-space: nowrap; }
.stamp-pick .stamp-t { font-size: 0.66rem; }
body.tab-timeline #wsTitle { display: none; }
/* 「← 戻る」の見出し：下にスクロールしても画面の上に残す(設定・タスクの登録・ゴミ箱・パスワード変更・プロジェクトの設定など、add-header の画面すべて)。
スマホは上の帯(--stick-top)のすぐ下に貼りつける */
.add-header { position: sticky; top: var(--stick-top, 0px); z-index: 18; background: var(--paper); padding: 10px 0; margin-top: -10px; }
/* チャットの中の画面(コンタクト・会話を作る・日程調整など)の「← 戻る」も、その画面の上に残す */
.back-btn.panel-back { position: sticky; top: 0; z-index: 6; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.add-header .back-btn { white-space: nowrap; flex: 0 0 auto; }
/* 自分メモ：ダイレクトの人と同じ大きさの枠 */
.chat-item .self-av { background: #f2d48a; font-size: 1.15rem; }
.chat-item.self-item .chat-item-name { font-size: 0.95rem; }
/* ---- カレンダー：土日・祝日の背景、いまの日付・時刻・天気 ---- */
.cal-cell.sat, .cal-col.sat { background: #eef4fb; }
.cal-cell.sun, .cal-col.sun, .cal-cell.hol, .cal-col.hol { background: #fdf0ef; }
.cal-cell.hol .cal-date, .cal-col.hol .cal-col-head { color: var(--overdue); }
.cal-hol { display: inline-block; margin-left: 4px; font-size: 0.66rem; font-weight: 700; color: var(--overdue); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 2em); }
.cal-date { display: flex; align-items: baseline; gap: 2px; min-width: 0; }
.cal-now { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 6px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.cal-now-dt { display: flex; align-items: baseline; gap: 10px; }
.cal-now-date { font-weight: 700; font-size: 0.92rem; }
.cal-now-time { font-family: var(--mono); font-weight: 800; font-size: 1.35rem; letter-spacing: 0.02em; }
.cal-now-weather { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; flex-wrap: wrap; }
.cal-now-wi { font-size: 1.4rem; line-height: 1; }
.cal-now-wt { font-weight: 700; }
.cal-now-ws { color: var(--ink-soft); font-size: 0.78rem; }
@media (max-width: 640px) { .cal-now { margin-left: 0; width: 100%; box-sizing: border-box; justify-content: space-between; } .cal-hol { display: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cal-cell.sat, :root:not([data-theme="light"]) .cal-col.sat { background: #1d2633; } :root:not([data-theme="light"]) .cal-cell.sun, :root:not([data-theme="light"]) .cal-col.sun, :root:not([data-theme="light"]) .cal-cell.hol, :root:not([data-theme="light"]) .cal-col.hol { background: #2e1f1f; } }
/* カレンダーの上の段を1行に：◀ 今日 ▶ 月 ｜ 時刻と天気 ｜ 日 週 月 */
.cal-now { margin-left: 0; padding: 4px 12px; gap: 10px; flex-wrap: nowrap; white-space: nowrap; }
.cal-now-weather { flex-wrap: nowrap; }
.cal-controls .cal-modes { margin-left: auto !important; }
@media (max-width: 640px) { .cal-now { width: auto; flex-wrap: wrap; white-space: normal; } .cal-controls .cal-modes { margin-left: 0 !important; } }
@media (max-width: 640px) {
.cal-now { width: 100%; box-sizing: border-box; flex-wrap: nowrap; justify-content: flex-start; }
.cal-now-weather { flex-wrap: wrap; white-space: normal; row-gap: 0; }
.cal-now-ws { flex-basis: 100%; }
}
/* ---- カレンダー：余白を詰めて、カレンダーを画面いっぱいに ---- */
#mod-calendar .cal-head { align-items: center; margin-bottom: 8px; flex-wrap: nowrap; }
#mod-calendar .cal-head-main { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
#mod-calendar .cal-head h1 { margin: 0; font-size: 1.3rem; white-space: nowrap; }
#mod-calendar .cal-head .sub { margin: 0; font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mod-calendar .cal-head .cal-add-ev { width: auto; flex: 0 0 auto; padding: 8px 16px; }
#mod-calendar .cal-controls { margin-bottom: 8px; gap: 8px; }
.cal-cell { min-height: var(--cal-cell-h, 92px); }
.cal-col { min-height: var(--cal-col-h, 160px); }
body.rail-on #modules > #mod-calendar { padding-top: 10px; padding-bottom: 8px; }
@media (max-width: 640px) {
#mod-calendar .cal-head .sub { display: none; }
#mod-calendar .cal-head { margin-bottom: 6px; padding-top: 6px; }
#mod-calendar .cal-head .cal-add-ev { padding: 7px 12px; font-size: 0.88rem; }
/* ◀ 今日 ▶ 2026年10月 日 週 月 を1行に。時刻と天気はその下 */
#mod-calendar .cal-title { flex: 1 1 auto; flex-basis: auto; font-size: 1rem; white-space: nowrap; }
#mod-calendar .cal-controls { flex-wrap: wrap; }
#mod-calendar .cal-controls .agenda-tools button { padding: 6px 9px; }
#mod-calendar .cal-controls .cal-modes { order: 3; margin-left: 0 !important; }
#mod-calendar .cal-controls .cal-modes button { padding: 6px 10px; min-width: 0; }
#mod-calendar .cal-now { order: 4; flex-basis: 100%; padding: 4px 10px; }
#mod-calendar .cal-now-time { font-size: 1.15rem; }
}
@media (max-width: 480px) { .cal-cell { min-height: var(--cal-cell-h, 56px); } }
/* 日・週・月のプルダウン */
.cal-mode-sel { font: inherit; font-size: 0.9rem; font-weight: 700; padding: 6px 30px 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); cursor: pointer; }
@media (max-width: 640px) { .cal-mode-sel { font-size: 16px; padding: 5px 26px 5px 10px; } }
/* 予定を登録：スマホは小さく「＋ 予定」 */
.cal-add-short { display: none; }
@media (max-width: 640px) {
#mod-calendar .cal-head .cal-add-ev { padding: 5px 12px; font-size: 0.82rem; border-radius: 999px; min-height: 0; }
#mod-calendar .cal-add-long { display: none; }
#mod-calendar .cal-add-short { display: inline; }
}
/* プロジェクト名の表示を整理(2026-10-23 ナカヤン)：TODO・カレンダーの上の「▣ プロジェクト名」は出さない(左端の列の四角で分かる)。
スマホの上の帯のプロジェクトの切り替えは、プロジェクトに関係ないタイムラインでは出さない */
body.rail-on:not(.chat-fit-page) .ws-title, .ws-title { display: none !important; }
body.tab-timeline #workspaceSelect { display: none; }
/* カレンダーの「日」：週の1列を横いっぱいに。札は大きめ */
.cal-week.cal-day { grid-template-columns: 1fr; }
.cal-day-col { min-height: var(--cal-col-h, 300px) !important; padding: 10px 12px; gap: 6px; }
.cal-day-col .cal-col-head { font-size: 0.95rem; padding-bottom: 6px; cursor: default; }
.cal-day-col .cal-chip { font-size: 0.95rem; padding: 8px 10px; }
.cal-day-col .cal-day-add { align-self: flex-start; margin-top: 4px; }
.chat-row-btn.memo-empty { opacity: 0.55; } .chat-row-btn.memo-empty:hover { opacity: 1; }
/* ==== カレンダー：時間の目盛りの表(日・週)と小さな月 ==== */
.cal-body { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 14px; align-items: start; }
.cal-main { min-width: 0; }
.mini-cal { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.mini-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.mini-title { font-weight: 800; font-size: 0.86rem; }
.mini-nav { border: 0; background: none; font-size: 1.1rem; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; color: var(--ink-soft); }
.mini-nav:hover { background: var(--accent-soft); }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; }
.mini-wd { font-size: 0.66rem; color: var(--ink-faint); padding: 2px 0; }
.mini-wd.sun { color: var(--overdue); } .mini-wd.sat { color: #3b6ea5; }
.mini-d { border: 0; background: none; font: inherit; font-size: 0.74rem; height: 26px; border-radius: 50%; cursor: pointer; color: var(--ink); padding: 0; }
.mini-d:hover { background: var(--accent-soft); }
.mini-d.other { color: var(--ink-faint); opacity: 0.6; }
.mini-d.sun, .mini-d.hol { color: var(--overdue); } .mini-d.sat { color: #3b6ea5; }
.mini-d.sel { background: var(--accent-soft); font-weight: 800; border-radius: 6px; }
.mini-d.today { background: var(--accent); color: #fff; font-weight: 800; border-radius: 50%; }
.cal-title.can-mini { cursor: pointer; }
@media (max-width: 640px) { .cal-title.can-mini::after { content: ' ▾'; font-size: 0.8em; color: var(--ink-faint); } .mini-cal { margin-bottom: 8px; } }
.tg { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tg-head, .tg-allday, .tg-body { display: grid; }
.tg-head { border-bottom: 1px solid var(--line); }
.tg-dh { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; cursor: pointer; min-width: 0; }
.tg-day .tg-dh { cursor: default; flex-direction: row; justify-content: flex-start; gap: 8px; padding-left: 10px; }
.tg-wd { font-size: 0.72rem; color: var(--ink-soft); }
.tg-dn { font-size: 1.25rem; font-weight: 800; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.tg-dh.today .tg-dn { background: var(--accent); color: #fff; }
.tg-dh.sun .tg-wd, .tg-dh.sun .tg-dn, .tg-dh.hol .tg-wd, .tg-dh.hol .tg-dn { color: var(--overdue); }
.tg-dh.sat .tg-wd, .tg-dh.sat .tg-dn { color: #3b6ea5; }
.tg-dh.today.sun .tg-dn, .tg-dh.today.sat .tg-dn, .tg-dh.today.hol .tg-dn { color: #fff; }
.tg-dh.sat, .tg-ad.sat, .tg-col.sat { background-color: #f4f8fd; }
.tg-dh.sun, .tg-dh.hol, .tg-ad.sun, .tg-ad.hol, .tg-col.sun, .tg-col.hol { background-color: #fdf5f4; }
.tg-allday { border-bottom: 1px solid var(--line); }
.tg-gutter { font-size: 0.66rem; color: var(--ink-faint); text-align: right; padding: 4px 6px 0 0; }
.tg-ad { padding: 3px; display: flex; flex-direction: column; gap: 2px; min-width: 0; border-left: 1px solid var(--line); }
.tg-scroll { overflow-y: auto; height: 520px; overscroll-behavior: contain; }
.tg-body { position: relative; }
.tg-hours { position: relative; }
.tg-hl { position: absolute; right: 6px; transform: translateY(-50%); font-size: 0.66rem; color: var(--ink-faint); font-family: var(--mono); }
.tg-col { position: relative; border-left: 1px solid var(--line); cursor: copy;
background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hour) - 1px), var(--line) calc(var(--hour) - 1px), var(--line) var(--hour)); }
.tg-col.today { background-color: color-mix(in srgb, var(--accent) 4%, transparent); }
.tg-ev { position: absolute; margin: 0; overflow: hidden; white-space: normal !important; display: block; z-index: 2; font-size: 0.78rem; line-height: 1.3; box-sizing: border-box; cursor: pointer; }
.tg-ev .t { display: block; overflow: hidden; }
.tg-now { position: absolute; left: 0; right: 0; height: 2px; background: #e53935; z-index: 3; pointer-events: none; }
.tg-now::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #e53935; }
@media (max-width: 640px) {
.tg-head .tg-dn { width: 30px; height: 30px; font-size: 1rem; }
.tg-ev { font-size: 0.68rem; }
.tg-ad .cal-chip { font-size: 0.66rem; }
}
.tg-ev { padding: 2px 4px !important; }
.tg-ev .t { word-break: break-all; }
/* 広い画面ではカレンダーの欄を広げる(余白を減らす) */
body.rail-on #modules > #mod-calendar { max-width: 1440px; }
.tg-ev-time { display: block; font-size: 0.68rem; opacity: 0.8; font-family: var(--mono); white-space: nowrap; overflow: hidden; }
.mini-d { width: 28px; height: 28px; justify-self: center; }
@media (max-width: 640px) { .tg-ev .t { font-size: 0.64rem; line-height: 1.2; word-break: break-all; } .tg-ev-time { display: none; } .mini-d { width: 32px; height: 32px; } }
body.rail-on #modules > .module#mod-calendar:not(#mod-chat) { max-width: 1440px; }
/* モーダルの中の入力欄は縦に伸ばさない(予定の登録など)。メモは2行から */
.guest-box > input.qa-input, .guest-box .ev-row > .qa-input, .guest-box > select.qa-input { flex: 0 0 auto; height: auto; min-height: 40px; }
.guest-box .ev-title { width: 100%; box-sizing: border-box; font-size: 1rem; padding: 10px 12px; }
.guest-box .ev-memo { flex: 0 0 auto; width: 100%; box-sizing: border-box; min-height: 64px; height: auto; resize: vertical; font: inherit; }
.guest-box .ev-time { width: auto; min-width: 104px; padding: 7px 8px; }
.ev-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* ==== タイムライン：友だち｜ニュース の切り替えと、ニュースの面(スマートニュースのように) ==== */
.tl-views { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tl-view { border: 0; background: none; font: inherit; font-weight: 800; font-size: 0.95rem; padding: 8px 14px; color: var(--ink-faint); border-bottom: 3px solid transparent; cursor: pointer; }
.tl-view.on { color: var(--accent); border-bottom-color: var(--accent); }
.fp-wrap.news-mode { max-width: 760px; }
body.rail-on #modules > .module#mod-timeline:not(#mod-chat) { max-width: 820px; }
.news-bar { display: flex; flex-direction: column; gap: 6px; }
.news-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
.news-cats::-webkit-scrollbar { display: none; }
.news-cat { flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 0.86rem; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.news-cat.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.news-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.84rem; }
.news-alert { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.news-list { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.news-hero { display: block; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.news-hero-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #ddd; }
.news-hero-text { padding: 10px 14px 12px; }
.news-hero-title { font-size: 1.15rem; font-weight: 800; line-height: 1.45; }
.news-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.news-item:last-child { border-bottom: 0; }
.news-item:hover, .news-hero:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.news-item-text { flex: 1 1 auto; min-width: 0; }
.news-item-title { font-size: 0.95rem; font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-thumb { flex: 0 0 auto; width: 104px; height: 72px; object-fit: cover; border-radius: 8px; background: #e9e9e9; }
.news-thumb.none { background: transparent; width: 0; }
.news-meta { font-size: 0.74rem; color: var(--ink-faint); margin-top: 4px; }
.news-badge { display: inline-block; background: #d0302a; color: #fff; font-size: 0.68rem; font-weight: 800; border-radius: 4px; padding: 1px 6px; margin-bottom: 3px; }
.news-credit { font-size: 0.72rem; text-align: center; margin: 6px 0 0; }
@media (max-width: 640px) { .news-thumb { width: 92px; height: 64px; } .news-hero-title { font-size: 1.05rem; } }
.news-hero-img { max-height: 300px; } @media (max-width: 640px) { .news-hero-img { max-height: 220px; } }
/* ==== 予定の登録(Google カレンダーのように) ==== */
.ev-box { max-width: 640px; width: min(640px, calc(100vw - 24px)); box-sizing: border-box; max-height: calc(100dvh - 24px); overflow-y: auto; }
.ev-top { display: flex; align-items: center; gap: 10px; }
.ev-close { flex: 0 0 auto; font-size: 1.1rem; }
.ev-title-big { flex: 1 1 auto; min-width: 0; border: 0; border-bottom: 2px solid var(--line); background: transparent; font: inherit; font-size: 1.35rem; padding: 6px 2px; outline: none; }
.ev-title-big:focus { border-bottom-color: var(--accent); }
.ev-save { flex: 0 0 auto; width: auto !important; border-radius: 999px; padding: 8px 22px; }
.ev-when { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 12px 0 6px; }
.ev-when .ev-day { width: auto; flex: 0 0 auto; }
.ev-when .ev-time.off { opacity: 0.4; }
.ev-allday { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9rem; margin-left: 4px; }
.ev-line { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.ev-ic { flex: 0 0 26px; text-align: center; font-size: 1.1rem; line-height: 36px; color: var(--ink-soft); }
.ev-field { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ev-field > .qa-input { flex: 1 1 auto; min-height: 38px; }
.ev-field > .ev-remind { flex: 0 0 auto; width: auto; }
.ev-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.ev-kind { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 0.88rem; cursor: pointer; }
.ev-kind.on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.ev-guests { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; }
.ev-guests .ev-guest-add { width: auto; min-width: 180px; flex: 0 1 auto; }
.ev-box .ev-memo { min-height: 72px; }
.ev-note { font-size: 0.76rem; margin: 6px 0 0; }
.ev-join-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0 2px; }
.ev-join { width: auto !important; }
@media (max-width: 640px) { .ev-title-big { font-size: 1.1rem; } .ev-save { padding: 7px 16px; } .ev-guests .ev-guest-add { min-width: 0; width: 100%; } }
/* iPhone の Safari で下の帯が画面の途中に浮く不具合への手当て(common.js の --vv-shift)。キーボードが開いている間は帯を隠す */
@media (max-width: 640px) {
body:not(.chat-focus) .tabs-row { transform: translateY(var(--vv-shift, 0px)); }
body.kb-open:not(.chat-focus) .tabs-row { display: none; }
}
.ev-notify { display: flex; align-items: center; gap: 6px; flex-basis: 100%; font-size: 0.84rem; color: var(--ink-soft); margin-top: 2px; }
/* ==== 翻訳 ==== */
.tr-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.78rem; color: var(--accent); padding: 2px 4px 4px; border-bottom: 1px dashed var(--line); margin-bottom: 2px; }
.tr-bar.off { color: var(--ink-faint); }
.chat-trans { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,0.55); font-size: 0.86rem; line-height: 1.55; }
.chat-trans-head { flex: 0 0 auto; font-weight: 700; font-size: 0.74rem; color: var(--ink-soft); }
.chat-trans-text { flex: 1 1 auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.nick-lang { width: 100%; box-sizing: border-box; }
/* ==== カレンダー案A：全プロジェクトを色分けで重ねる ==== */
.cal-chip.lc { border-left-color: var(--lc); }
.cal-chip.event.lc { background: color-mix(in srgb, var(--lc) 16%, var(--panel)); color: var(--ink); border-left: 3px solid var(--lc); }
.cal-chip.event.lc.selected { outline: 2px solid var(--lc); }
.cal-chip.meeting.lc { border-left: 3px solid var(--lc); }
.cal-layers { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.cal-layers-head { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 2px; }
.cal-layer { display: flex; align-items: center; gap: 6px; font-size: 0.84rem; padding: 3px 0; cursor: pointer; min-width: 0; }
.cal-layer input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
.cal-layer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-layers-btn { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.cal-layers-btn.on { border-color: var(--accent); }
.cal-layers-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lc); border: 1.5px solid var(--lc); box-sizing: border-box; }
.cal-layers-dot.off { background: transparent; }
.cal-layer-pill { border-left: 4px solid var(--lc); }
.ev-cal-row { display: flex; align-items: center; gap: 8px; }
.ev-cal-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.ev-cal { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) { .cal-layers { margin: 0 0 8px; } }
#mod-calendar .cal-head .cal-layers-btn { margin-left: auto; margin-right: 8px; flex: 0 0 auto; }
/* 月表示・スマホで開いた「表示するカレンダー」は横に並べて、カレンダーを狭めない */
#mod-calendar > .cal-layers { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin: 0 0 8px; padding: 6px 12px; }
#mod-calendar > .cal-layers .cal-layers-head { margin: 0 4px 0 0; }
body.tab-calendar #wsTitle, body.tab-calendar #workspaceSelect { display: none; }
/* カレンダーの色を自分で選ぶ */
.cal-layer-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cal-layer-row .cal-layer { flex: 1 1 auto; }
.cal-layer-color { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.15); padding: 0; cursor: pointer; flex: 0 0 auto; }
.cal-layer-row.picking .cal-layer-color { outline: 2px solid var(--ink-soft); outline-offset: 1px; }
.cal-color-pick { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 8px 22px; align-items: center; }
.cal-color-sw { width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer; color: #fff; font-size: 0.75rem; font-weight: 800; line-height: 22px; padding: 0; }
.cal-color-sw.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink-soft); }
.cal-color-auto { border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); border-radius: 6px; font-size: 0.74rem; padding: 3px 8px; cursor: pointer; }
#mod-calendar > .cal-layers .cal-layer-row { flex: 0 0 auto; }
#mod-calendar > .cal-layers.picking .cal-color-pick { flex-basis: 100%; padding-left: 0; }
@media (max-width: 640px) { .cal-color-sw { width: 28px; height: 28px; line-height: 28px; } .cal-layer-color { width: 22px; height: 22px; } }
/* ==== TODO：シンプルに。「マイ プロジェクト」と「チーム」の2段、期限順の1列(2026-10-24) ==== */
#mod-tasks #alertRoot, #mod-tasks .filters-row .catfilter { display: none !important; }
.td-sec { margin: 4px 0 22px; }
.td-sec-head { font-size: 1rem; font-weight: 800; margin: 0; padding: 8px 2px 10px; border-bottom: 1px solid var(--line); }
.td-empty { color: var(--ink-faint); font-size: 0.88rem; padding: 12px 2px; margin: 0; }
.td-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 2px 11px; border-bottom: 1px solid var(--line); }
.td-check { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 1.6px solid var(--ink-faint); background: transparent; cursor: pointer; padding: 0; position: relative; }
.td-check:hover { border-color: var(--accent); }
.td-check.over { border-color: var(--overdue); background: color-mix(in srgb, var(--overdue) 10%, transparent); }
.td-check.today { border-color: #2e9e5b; }
.td-check.on { background: var(--ink-faint); border-color: var(--ink-faint); }
.td-check.on::after { content: ''; position: absolute; left: 6px; top: 2.5px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.td-main { flex: 1 1 auto; min-width: 0; }
.td-text { font-size: 0.98rem; line-height: 1.5; word-break: break-word; white-space: pre-line; cursor: pointer; }
.td-row.done .td-text { color: var(--ink-faint); text-decoration: line-through; }
.td-sub { display: flex; align-items: center; gap: 10px; margin-top: 3px; font-size: 0.82rem; cursor: pointer; min-height: 18px; }
.td-due { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; white-space: nowrap; }
.td-due svg { flex: 0 0 auto; }
.td-due.over { color: var(--overdue); }
.td-due.today { color: #2e9e5b; }
.td-due.tmr { color: #c27b0e; }
.td-due.later { color: #7a5cc4; }
.td-due.past { color: var(--ink-faint); }
.td-memo { font-size: 0.78rem; }
.td-tag { margin-left: auto; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 60%; }
.td-hash { font-weight: 700; }
.td-open { margin: 8px 0 2px; }
.td-edit { border-bottom: 1px solid var(--line); background: var(--panel); border-radius: 8px; margin: 6px 0; }
.todo-cats { color: var(--ink-soft); }
.cat-mgr { max-width: 520px; }
.cat-mgr-proj { width: 100%; margin: 0 0 8px; }
.cat-mgr-row { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cat-mgr-row.done .cat-mgr-name { color: var(--ink-faint); text-decoration: line-through; }
.cat-mgr-name { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-mgr-n { font-size: 0.78rem; color: var(--ink-faint); white-space: nowrap; }
.cat-mgr-row .icon-btn { padding: 4px 8px; min-width: 0; }
.trash-proj { margin: 0 0 10px; }
@media (max-width: 640px) { .td-row { gap: 10px; } .td-tag { max-width: 55%; } }
body.tab-tasks #wsTitle, body.tab-tasks #workspaceSelect { display: none; }
body.tab-dash #wsTitle, body.tab-dash #workspaceSelect { display: none; }
.cat-mgr .cat-mgr-proj { flex: none; height: auto; min-height: 0; padding: 8px 10px; }
/* ニュース：速報を通知・更新を大きく(2026-10-24 ナカヤン)／並び替え */
.news-tools { font-size: 1rem; padding: 4px 2px 6px; }
.news-alert { font-size: 1rem; gap: 8px; padding: 6px 4px; }
.news-alert input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.news-refresh { font: inherit; font-size: 1rem; font-weight: 700; color: var(--accent); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; cursor: pointer; }
.news-refresh:hover { border-color: var(--accent); }
.news-order-btn { color: var(--ink-faint); border-style: dashed; }
.news-order-box { max-width: 420px; }
.news-order-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.news-order-n { width: 22px; text-align: right; color: var(--ink-faint); font-family: var(--mono); font-size: 0.85rem; }
.news-order-name { flex: 1 1 auto; font-weight: 700; }
.news-order-row .icon-btn { padding: 4px 10px; min-width: 0; }
/* 画面の言語 */
html.i18n-wait #appView, html.i18n-wait #loginView { visibility: hidden; }
.login-lang { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; color: var(--ink-soft); font-size: 0.95rem; }
.login-lang select { font: inherit; font-size: 16px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }
.lang-box { max-width: 380px; }
.lang-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.lang-opt { display: flex; align-items: center; justify-content: space-between; font: inherit; font-size: 1.05rem; font-weight: 700; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); cursor: pointer; text-align: left; }
.lang-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.lang-check { color: var(--accent); }
/* オンラインMTGの予定：ゲスト用の参加 URL */
.ev-guest-url { margin: 8px 0 2px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--paper); }
.ev-guest-url-head { font-weight: 800; font-size: 0.9rem; margin-bottom: 6px; }
.ev-guest-url-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ev-guest-url-input { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 0.8rem; }
.ev-guest-copy { flex: 0 0 auto; width: auto; white-space: nowrap; padding: 8px 14px; }
.ev-guest-note { margin: 8px 0 0; font-size: 0.78rem; }
/* ハンコのリアクション：枠(高さ24px)よりハンコが大きく、枠の左端の丸みがハンコの横に「〇」のように見えた(2026-10-24 ナカヤン)。枠の高さをハンコに合わせて中に収める */
.react-chip.stamp { height: auto; min-height: 24px; padding: 2px 8px 2px 3px; border-radius: 16px; }
.react-chip.stamp .hk-circle, .react-chip.stamp .hk-solid { min-width: 1.9em; min-height: 1.9em; }
/* 予定の繰り返し */
.ev-repeat-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 2px; }
.ev-repeat-ic { width: 22px; text-align: center; }
.ev-repeat { width: auto; flex: 0 1 auto; }
.ev-repeat-until-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--ink-soft); }
.ev-repeat-until { width: auto; }
.ev-repeat-note { margin: 2px 0 6px; font-size: 0.8rem; }
.ev-repeat-until-wrap { white-space: nowrap; }
/* TODO：プロジェクトごとの箱に色(2026-10-24 ナカヤン：見やすく・色は自分で選べる。カレンダーの色と共通) */
.td-sec-headrow { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.td-sec-headrow .td-sec-head { border-bottom: 0; }
.td-box { --pc: #2f6fdb; background: color-mix(in srgb, var(--pc) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--pc) 22%, var(--line)); border-left: 4px solid var(--pc); border-radius: 12px; padding: 2px 14px 2px 12px; margin: 0 0 12px; }
.td-box .td-row:last-child { border-bottom: 0; }
.td-box .td-row { border-bottom-color: color-mix(in srgb, var(--pc) 15%, var(--line)); }
.td-box-head { display: flex; align-items: center; gap: 8px; padding: 10px 0 4px; font-weight: 800; font-size: 0.92rem; color: color-mix(in srgb, var(--pc) 70%, var(--ink)); }
.td-box-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.td-color-btn { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(0,0,0,0.15); padding: 0; cursor: pointer; flex: 0 0 auto; }
.td-color-btn.on { outline: 2px solid var(--ink-soft); outline-offset: 1px; }
.td-color-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 0 10px; }
@media (max-width: 640px) { .td-box { padding: 2px 10px 2px 9px; } .td-color-btn { width: 24px; height: 24px; } }
/* TODO：表示するプロジェクト */
.proj-menu { min-width: 230px; max-height: 60vh; overflow-y: auto; }
.proj-menu-head { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); padding: 4px 12px 2px; }
.state-filter .chip.proj-opt { justify-content: flex-start; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.proj-opt input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.proj-opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Google カレンダー：複数のアカウント */
.gcal-feeds { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 8px; }
.gcal-feed { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.gcal-feed-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gcal-feed-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcal-feed-sub { margin: 0; font-size: 0.8rem; }
.gcal-feed .gcal-err { margin: 2px 0 0; }
.gcal-add-fields { display: flex; flex-direction: column; gap: 8px; }
.gcal-add-btn { width: auto; margin-top: 4px; }
/* AI 秘書(2026-10-25)：アイコン・例のボタン・調べている間の表示 */
.chat-avatar.ai-av, .chat-item .self-av.ai-av { background: #cfe3ff; font-size: 1.1rem; }
.ai-examples { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.8rem; padding: 2px 4px 4px; border-bottom: 1px dashed var(--line); margin-bottom: 2px; }
.ai-examples .ai-ex-head { color: var(--ink-soft); }
.ai-examples .ai-ex { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; background: var(--panel); color: var(--ink); }
.ai-busy { font-size: 0.85rem; color: var(--accent); padding: 4px 6px; border-bottom: 1px dashed var(--line); margin-bottom: 2px; animation: ai-blink 1.6s ease-in-out infinite; }
@keyframes ai-blink { 50% { opacity: 0.55; } }
/* 会議メモ(2026-10-25)：文字起こし中の印・ボタン・要約の確認・宿題の TODO ボタン */
.mtg-memo-chip { font-size: 0.82rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: #b42329; color: #fff; white-space: nowrap; animation: ai-blink 2s ease-in-out infinite; }
.voice-btn.mtg-memo-btn.rec { background: #b42329; color: #fff; border-color: #b42329; }
.minutes-box { max-width: 640px; }
.minutes-edit { display: block; width: 100%; min-height: 40vh; max-height: 60vh; margin: 8px 0 4px; font-family: var(--body); font-size: 16px; line-height: 1.6; box-sizing: border-box; } /* 16px：iPhone で拡大されない */
.minutes-edited { margin: 0 0 4px; }
/* 文字起こしを見る(2026-11-01) */
.trx-bar { display: flex; flex-wrap: nowrap; align-self: stretch; width: 100%; box-sizing: border-box; align-items: center; gap: 8px; margin: 6px 0; }
.guest-box .trx-bar > input.trx-search { flex: 1 1 auto; width: auto; min-width: 0; font-size: 16px; } /* 16px：iPhone で拡大されない */
.trx-count { flex: 0 0 auto; white-space: nowrap; margin: 0; }
.trx-list { max-height: 50vh; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; background: var(--paper); }
.trx-line { display: grid; grid-template-columns: auto auto 1fr; gap: 0 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; line-height: 1.55; }
.trx-line:last-child { border-bottom: 0; }
.trx-time { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.trx-name { font-weight: 600; white-space: nowrap; }
.trx-text { min-width: 0; word-break: break-word; }
@media (max-width: 640px) { .trx-line { grid-template-columns: auto 1fr; } .trx-text { grid-column: 1 / -1; } }
.minutes-tr { margin-top: 4px; }
.minutes-edited:empty { display: none; }
.minutes-preview { white-space: pre-wrap; word-break: break-word; font-family: var(--body); font-size: 0.88rem; line-height: 1.6; max-height: 50vh; overflow: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 8px 0; color: var(--ink); }
.minutes-acts { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.minutes-acts-head { font-size: 0.78rem; color: var(--ink-soft); font-weight: 700; }
.minutes-act { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: 0.85rem; }
.minutes-act-text { min-width: 0; overflow-wrap: anywhere; }
.minutes-act button { flex: none; }
/* オンラインMTG の下の帯を Zoom のように(2026-10-25 ナカヤン)：アイコンの上に短い名前。左＝マイク・まん中＝機能・右＝退出 */
.mtg-stage .mtg-foot { display: block; padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); background: #0b0e0f; border-top: 1px solid rgba(255,255,255,0.06); }
.zm-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.zm-bar::-webkit-scrollbar { display: none; }
.zm-group { display: flex; align-items: center; gap: 2px; flex: none; }
.zm-center { flex: 1 1 auto; justify-content: center; }
.zm-item { display: inline-flex; align-items: flex-start; }
.zm-btn { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 64px; height: 58px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: #e8eceb; font: inherit; cursor: pointer; }
.zm-btn:hover, .zm-caret:hover { background: rgba(255,255,255,0.08); }
.zm-btn.on { background: rgba(255,255,255,0.12); }
.zm-btn .zm-ic { display: inline-flex; height: 24px; }
.zm-btn .zm-label { font-size: 0.72rem; white-space: nowrap; line-height: 1.1; }
.zm-btn.off .zm-label { color: #ff8a8d; }
.zm-btn.share .zm-ic { color: #3ddc84; }
.zm-btn.share-on { background: #2a7d4f; }
.zm-btn.share-on:hover { background: #33925d; }
.zm-btn.leave { color: #ff5a5f; }
.zm-btn.leave .zm-label { color: #e8eceb; }
.zm-caret { border: 0; background: transparent; color: #b9c7c2; font: inherit; font-size: 0.7rem; font-weight: 700; width: 18px; height: 58px; padding: 6px 0 0; border-radius: 6px; cursor: pointer; align-self: stretch; text-align: center; }
.zm-badge { top: 2px; right: 6px; }
.zm-badge.wait { right: auto; left: 50%; top: -6px; transform: translateX(-10%); background: #f0b400; color: #2b2200; white-space: nowrap; }
.zm-badge.rec { background: transparent; color: #ff5a5f; min-width: 0; padding: 0; font-size: 0.8rem; }
.zm-pop { position: absolute; z-index: 6; top: auto; right: auto; }
.zm-invite { margin-top: 6px; background: #f0b400; color: #2b2200; border-color: #f0b400; font-weight: 800; }
.mtg-stage .mtg-head-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.mtg-stage .mtg-head .mtg-size { border: 0; background: transparent; color: #eef3f1; font: inherit; font-size: 0.82rem; font-weight: 700; padding: 0 12px; min-height: 32px; cursor: pointer; }
.mtg-stage .mtg-head .mtg-size:hover { background: rgba(255,255,255,0.1); }
.mtg-stage .mtg-head .mtg-size.on { background: #7be0aa; color: #10302a; }
.mtg-stage .mtg-head .mtg-sizes { min-height: 32px; }
/* チャットの欄：下に送り先と入力 */
.mtg-log { background: transparent; border-color: rgba(255,255,255,0.22); } /* 透過(ビデオと重なってよい。2026-10-25 ナカヤン)。字は黒い縁取りで読む */
.mtg-log .mtg-log-foot .mtg-cmt-input, .mtg-log .mtg-to { background: rgba(20,26,27,0.75); text-shadow: none; }
.mtg-log-foot { border-top: 1px solid rgba(255,255,255,0.15); padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.mtg-log-to { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: #b9c7c2; }
.mtg-log-to .mtg-to { min-height: 28px; max-width: 160px; }
.mtg-log-to .zm-mini { margin-left: auto; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #eef3f1; border-radius: 8px; padding: 2px 10px; cursor: pointer; }
.mtg-log-foot .mtg-cmt-box { min-width: 0; }
/* 小窓(小)・狭い画面：名前を小さく、ボタンを詰める */
.zm-bar.small .zm-btn, .mtg-stage.size-s .zm-btn { min-width: 44px; height: 50px; padding: 2px 4px; }
.zm-bar.small .zm-label { font-size: 0.62rem; }
.zm-bar.small .zm-caret { display: none; }
@media (max-width: 640px) {
.zm-btn { min-width: 40px; height: 52px; padding: 2px 3px; }
.zm-bar { gap: 2px; }
.zm-group { gap: 0; }
.zm-btn .zm-label { font-size: 0.62rem; }
.zm-caret { display: none; }
.zm-center { justify-content: flex-start; }
}
@media (max-width: 420px) { .zm-bar.small .zm-btn { min-width: 0; padding: 2px 1px; } .zm-bar.small .zm-label { font-size: 0.56rem; } .zm-center { justify-content: space-around; } }
/* オンラインMTG のビデオ(2026-10-25)：話している人の顔・自分の顔(左下に小さく、鏡のように反転) */
.mtg-empty { white-space: pre-line; }
.mtg-video.mtg-cam { object-fit: contain; }
.mtg-selfcam { position: absolute; left: 12px; bottom: 12px; width: min(200px, 30%); aspect-ratio: 16 / 9; object-fit: cover; transform: scaleX(-1); border-radius: 8px; border: 2px solid rgba(255,255,255,0.35); background: #000; z-index: 3; box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
.mtg-stage.size-s .mtg-selfcam { width: 120px; left: 8px; bottom: 8px; }
/* カレンダーの予定をつかんで動かす(2026-10-25) */
.tg-ev.tg-drag { cursor: grab; user-select: none; touch-action: auto; }
.tg-ev.dragging { cursor: grabbing; opacity: 0.88; z-index: 6; box-shadow: 0 6px 18px rgba(0,0,0,0.25); outline: 2px solid var(--accent); }
/* 自分の顔：右下(既定)・右上・左下・左上・ドラッグで好きな位置。チャットの欄の下(重なってよい) */
.mtg-selfcam { left: auto; bottom: auto; z-index: 2; cursor: grab; touch-action: none; }
.mtg-selfcam.dragging { cursor: grabbing; opacity: 0.9; outline: 2px solid #7be0aa; }
/* 字幕：下のまん中 */
.mtg-caps { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(760px, calc(100% - 24px)); z-index: 4; display: flex; flex-direction: column; gap: 4px; align-items: center; pointer-events: none; }
.mtg-cap-line { background: rgba(0,0,0,0.72); color: #fff; font-size: 1.05rem; line-height: 1.45; padding: 4px 12px; border-radius: 8px; max-width: 100%; overflow-wrap: anywhere; }
.mtg-cap-name { color: #ffe066; font-weight: 700; margin-right: 8px; font-size: 0.85rem; }
.mtg-stage.size-s .mtg-cap-line { font-size: 0.85rem; }
.zm-btn.hand-up { color: #ffd23f; }
/* スマホ・「小」の窓：下の帯のボタンを均等に並べる(左・まん中・右のまとまりを外して、同じ幅に。2026-10-25 ナカヤン) */
.zm-bar.small { justify-content: space-between; gap: 0; }
.zm-bar.small .zm-group { display: contents; }
.zm-bar.small .zm-item { flex: 1 1 0; min-width: 0; display: flex; }
.zm-bar.small .zm-item > .zm-btn { flex: 1 1 auto; }
.zm-bar.small .zm-btn { flex: 1 1 0; min-width: 0; padding: 2px 1px; }
/* 背景とエフェクトの画面(Google Meet のように。2026-10-25) */
.mtg-pick.fx-panel { width: min(420px, calc(100vw - 16px)); max-height: min(720px, calc(100vh - 120px)); display: flex; flex-direction: column; overflow: hidden; padding: 10px 12px 12px; }
.fx-preview { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0d1112; flex: none; display: flex; align-items: center; justify-content: center; }
.fx-preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.fx-preview-off { color: #b9c7c2; font-size: 0.8rem; line-height: 1.6; padding: 16px; text-align: center; }
.fx-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.15); margin: 8px 0 6px; flex: none; }
.fx-tab { flex: 1 1 0; border: 0; background: transparent; color: #eef3f1; font: inherit; font-size: 0.9rem; font-weight: 700; padding: 8px 4px; cursor: pointer; border-bottom: 3px solid transparent; }
.fx-tab.on { color: #8fc7ff; border-bottom-color: #8fc7ff; }
.fx-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding-right: 2px; }
.fx-group { background: rgba(255,255,255,0.06); border-radius: 14px; padding: 10px; }
.fx-group-h { font-size: 0.85rem; font-weight: 700; margin-bottom: 8px; color: #eef3f1; }
.fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fx-tile { position: relative; aspect-ratio: 1 / 1; border: 0; border-radius: 14px; overflow: hidden; padding: 0; cursor: pointer; background: #1f2a2c; color: #eef3f1; font: inherit; outline: 3px solid transparent; outline-offset: -3px; }
.fx-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-tile.icon { background: #0b4a9e; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.fx-tile .fx-ic { font-size: 1.5rem; line-height: 1; }
.fx-tile .fx-cap { font-size: 0.72rem; font-weight: 700; }
.fx-tile.on { outline-color: #8fc7ff; }
.fx-tile:hover { filter: brightness(1.12); }
/* 挙手：左上に大きく・大きな ✋ が流れる */
.mtg-hands { position: absolute; left: 12px; top: 12px; z-index: 5; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.mtg-hand-pill { background: #ffd23f; color: #2b2200; font-weight: 800; font-size: 1.05rem; padding: 8px 16px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,0.45); animation: hand-pulse 1.6s ease-in-out infinite; }
.mtg-hand-pill.mine { background: #fff1a8; }
@keyframes hand-pulse { 50% { transform: scale(1.04); } }
.mtg-fly-hand { z-index: 5; }
.mtg-fly-hand .mtg-fly-e { font-size: 4.5rem !important; }
.mtg-stage.size-s .mtg-hand-pill { font-size: 0.8rem; padding: 5px 10px; }
/* カレンダーの予定のカード(Google カレンダーのように。2026-10-25) */
.cal-pop-wrap { position: fixed; inset: 0; z-index: 70; }
.cal-pop { position: fixed; width: min(440px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto; background: var(--panel); color: var(--ink); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.28); border: 1px solid var(--line); }
.cal-pop.sheet { left: 0; right: 0; bottom: 0; width: auto; max-height: 85vh; border-radius: 16px 16px 0 0; }
.cal-pop .cal-detail { margin: 0; border: 0; box-shadow: none; background: transparent; padding: 8px 16px 14px; }
.gpop .gp-tools { display: flex; justify-content: flex-end; gap: 2px; position: relative; }
.gp-ic { border: 0; background: transparent; color: var(--ink-soft); font-size: 1.05rem; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.gp-ic:hover { background: var(--accent-soft); }
.gp-menu { position: absolute; right: 40px; top: 36px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 2; display: flex; flex-direction: column; padding: 4px; }
.gp-menu button { border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.gp-menu button:hover { background: var(--accent-soft); }
.gp-title { display: flex; gap: 14px; align-items: flex-start; margin: 2px 0 10px; }
.gp-sq { width: 16px; height: 16px; border-radius: 4px; flex: none; margin-top: 8px; }
.gp-name { font-size: 1.35rem; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.gp-when { font-size: 0.92rem; color: var(--ink-soft); margin-top: 2px; }
.gp-row { display: flex; gap: 14px; align-items: flex-start; padding: 8px 0; }
.gp-row-ic { width: 16px; flex: none; text-align: center; font-size: 1rem; color: var(--ink-soft); line-height: 1.6; }
.gp-row-body { flex: 1 1 auto; min-width: 0; font-size: 0.92rem; line-height: 1.55; }
.gp-join { border: 0; background: #1a73e8; color: #fff; font: inherit; font-weight: 700; font-size: 0.95rem; padding: 9px 20px; border-radius: 999px; cursor: pointer; }
.gp-join:hover { background: #1765cc; }
.gp-sub-link { display: block; margin-top: 6px; }
.gp-strong { font-weight: 600; margin-bottom: 4px; }
.gp-muted { color: var(--ink-soft); font-size: 0.85rem; }
.gp-person { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.gp-av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; font-weight: 700; object-fit: cover; }
.gp-memo { white-space: pre-wrap; overflow-wrap: anywhere; }
.gp-memo a { color: #1a73e8; text-decoration: underline; }
.gpop .ev-guest-url { margin: 0; }
.gpop .ev-member-url { margin-top: 8px; }
.gpop .agenda-tools { margin-top: 6px; padding-left: 30px; }
/* 自分の顔の位置のボタン：画面と同じ 2×2 の並び(横長の小窓の形) */
.fx-grid.fx-grid-pos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-grid-pos .fx-tile.pos { aspect-ratio: 16 / 9; }
/* ビデオの見え方を確かめる(初めてのビデオ。2026-10-25) */
.fx-preview-off { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fx-try { border: 0; background: #1a73e8; color: #fff; font: inherit; font-weight: 700; font-size: 0.85rem; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.fx-confirm { margin-top: 8px; flex: none; display: flex; flex-direction: column; gap: 8px; }
.fx-confirm-note { font-size: 0.78rem; color: #ffe066; }
.fx-confirm-btns { display: flex; gap: 8px; }
.fx-start { flex: 1 1 auto; border: 0; background: #1a73e8; color: #fff; font: inherit; font-weight: 800; font-size: 0.92rem; padding: 10px 14px; border-radius: 999px; cursor: pointer; }
.fx-start:hover { background: #1765cc; }
.fx-cancel { border: 1px solid rgba(255,255,255,0.35); background: transparent; color: #eef3f1; font: inherit; padding: 10px 16px; border-radius: 999px; cursor: pointer; }
/* 流れるコメント：名前は文の下の行に、白で少し大きく。名前は白(全部の流れるもの。2026-10-25) */
.mtg-fly .mtg-fly-name { color: #fff !important; opacity: 1; }
.mtg-fly .mtg-fly-text { display: block; }
.mtg-fly .mtg-fly-name.under { display: block; font-size: 0.95rem; margin: 2px 0 0; }
.mtg-stage.size-s .mtg-fly .mtg-fly-name.under { font-size: 0.75rem; }
/* チャットの欄：見出しと入力欄だけ押せる。透けている所は後ろ(自分の顔をドラッグなど)に届く。スマホは一覧を指で動かすので今まで通り */
.mtg-log, .mtg-log .mtg-log-list, .mtg-log .mtg-log-item { pointer-events: none; }
.mtg-log .mtg-log-head, .mtg-log .mtg-log-foot { pointer-events: auto; }
@media (max-width: 640px) { .mtg-log, .mtg-log .mtg-log-list { pointer-events: auto; } }
/* 自分のダッシュボード(2026-10-25) */
#mod-dash { max-width: 1100px; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 4px 0 14px; }
.dash-hello { margin: 0; font-size: 1.35rem; }
.dash-date { color: var(--ink-soft); font-size: 0.9rem; margin-top: 2px; }
.dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.dash-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.dash-stat:hover { border-color: var(--accent); }
.dash-stat-l { font-size: 0.8rem; color: var(--ink-soft); }
.dash-stat-v { font-size: 1.5rem; font-weight: 700; }
.dash-stat.danger .dash-stat-v { color: var(--overdue); }
.dash-stat.accent .dash-stat-v { color: var(--accent); }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dash-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.dash-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dash-card-h strong { font-size: 0.98rem; }
.dash-ic { font-size: 1.05rem; }
.dash-more { margin-left: auto; font-size: 0.8rem; }
.dash-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-top: 1px solid var(--line); font-size: 0.9rem; min-width: 0; width: 100%; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; color: var(--ink); font-family: inherit; text-align: left; }
.dash-card-h + .dash-row { border-top: 0; }
.dash-link { cursor: pointer; }
.dash-link:hover { background: var(--accent-soft); }
.dash-row.late .dash-title, .dash-row.late .dash-meta { color: var(--overdue); }
.dash-time { flex: none; min-width: 92px; font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft); }
.dash-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-meta { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; color: var(--ink-soft); }
.dash-join { flex: none; border: 0; background: #1a73e8; color: #fff; font: inherit; font-size: 0.78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.dash-check { flex: none; width: 20px; height: 20px; border: 2px solid var(--ink-faint); border-radius: 5px; background: transparent; cursor: pointer; }
.dash-check:hover { border-color: var(--accent); background: var(--accent-soft); }
.dash-at { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #ffe066; color: #3a2e00; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.dash-badge { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--overdue); color: #fff; font-weight: 700; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; }
.dash-empty { color: var(--ink-soft); font-size: 0.85rem; margin: 4px 2px; }
@media (max-width: 640px) {
.dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-grid { grid-template-columns: 1fr; }
.dash-time { min-width: 72px; }
.dash-meta { max-width: 38%; }
}
/* 左端の列のいちばん上の「ホーム」。左端の列のタブの「ホーム」は出さない(重なるため) */
.rail-home { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 44px; margin: 0 auto 6px; padding: 6px 0; border: 0; border-radius: 10px; background: transparent; color: rgba(255,255,255,0.85); font: inherit; font-size: 0.62rem; font-weight: 700; cursor: pointer; }
.rail-home:hover { background: rgba(255,255,255,0.12); }
.rail-home.on { background: #fff; color: #3C3489; }
body.rail-on .rail .tabs button[data-tab="dash"] { display: none !important; }
body:not(.rail-on) .rail-home { display: none; }
.tabs-row .tabs button[data-tab="dash"] { --ic: url("data:image/svg+xml;utf8,"); }
/* 参加者のボタンの印(待合室・✋の数)：下の帯の枠の内側に収める(上が切れていたため。2026-10-25) */
.zm-badge.wait { top: 1px; left: auto; right: 2px; transform: none; font-size: 0.68rem; height: 18px; min-width: 18px; padding: 0 5px; }
/* MTG のオン・オフの切り替え：両方を並べ、いまの方に色を付ける(押してもメニューは閉じない。2026-10-25) */
.mtg-sw { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; color: #eef3f1; font-size: 0.88rem; }
.mtg-sw-l { min-width: 0; }
.mtg-sw-g { flex: none; display: inline-flex; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; overflow: hidden; }
.mtg-sw-b { border: 0; background: transparent; color: rgba(238,243,241,0.6); font: inherit; font-size: 0.8rem; font-weight: 700; padding: 4px 12px; cursor: pointer; }
.mtg-sw-b:hover { background: rgba(255,255,255,0.1); }
.mtg-sw-b.on.cur { background: #2f9e5e; color: #fff; }
.mtg-sw-b.off.cur { background: #6b7270; color: #fff; }
.mtg-sw-b.cur { cursor: default; }
/* リアクション・挙手の流れるもの：絵文字・ハンコの下の行に名前(2026-10-25) */
.mtg-fly-stamp { flex-direction: column; align-items: center; gap: 0; }
.mtg-fly-stamp .mtg-fly-name.under { margin: 2px 0 0; }
/* MTG のコメントへの返信・反応(2026-10-25)。一覧の透けている所は後ろに届くが、ボタンだけは押せる */
.mtg-log .mtg-log-acts, .mtg-log .mtg-log-rx, .mtg-log .mtg-rx-pick { pointer-events: auto; }
.mtg-log-acts { margin-left: auto; display: inline-flex; gap: 2px; }
.mtg-log-act { border: 0; background: rgba(0,0,0,0.35); color: #fff; border-radius: 6px; font: inherit; font-size: 0.8rem; line-height: 1.5; padding: 0 6px; cursor: pointer; text-shadow: none; opacity: 0.8; }
.mtg-log-act:hover, .mtg-log-act:focus-visible { opacity: 1; background: rgba(255,255,255,0.2); }
.mtg-log-quote { font-size: 0.74rem; opacity: 0.88; border-left: 2px solid rgba(255,255,255,0.55); padding-left: 6px; margin: 2px 0 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtg-log-rx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.mtg-rx { border: 1px solid rgba(255,255,255,0.35); background: rgba(0,0,0,0.45); color: #fff; border-radius: 999px; font: inherit; font-size: 0.78rem; line-height: 1.6; padding: 0 8px; cursor: pointer; text-shadow: none; }
.mtg-rx.mine { border-color: #8fdcff; background: rgba(47,111,219,0.55); }
.mtg-rx.hk { color: #ffc2b8; font-weight: 700; }
.mtg-rx-pick { margin-top: 4px; background: rgba(20,26,27,0.95); border: 1px solid rgba(255,255,255,0.25); border-radius: 10px; padding: 6px; text-shadow: none; }
.mtg-rx-row { display: flex; flex-wrap: wrap; gap: 4px; }
.mtg-rx-row + .mtg-rx-row { margin-top: 6px; }
.mtg-rx-e { border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.mtg-rx-e:hover { background: rgba(255,255,255,0.15); }
.mtg-rx-hk { border: 1.5px solid #d63a26; color: #d63a26; background: #fff8f4; border-radius: 5px; font: inherit; font-size: 0.74rem; font-weight: 700; padding: 1px 6px; cursor: pointer; }
.mtg-reply-bar { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: #eef3f1; background: rgba(20,26,27,0.75); border-radius: 8px; padding: 4px 8px; text-shadow: none; }
.mtg-reply-q { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtg-reply-x { border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 1rem; padding: 0 4px; }
/* コメントの保存：相手を選ぶ・頼んでいる人(2026-10-25) */
.mtglog-req { color: #b45309; font-weight: 700; font-size: 0.9rem; }
.mtglog-pick { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.mtglog-pick-row { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9rem; cursor: pointer; }
.mtglog-pick .qa-submit { margin-left: auto; }
/* ホームの会議のコメント(2026-10-25) */
.dash-mtg-wrap .dash-mtg-req { border-top: 0; padding-left: 14px; }
.dash-mtg-req .dash-title { color: #b45309; }
.mtg-rx-pick { max-height: 170px; overflow-y: auto; }
.dash-card.dash-wide { grid-column: 1 / -1; }
.dash-mtg .dash-time { min-width: 100px; }
/* 🔔 通知の設定(2026-10-25)：⚙・チャットの一覧の上・ホームから開く */
.side-notify { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 6px 0 4px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font: inherit; font-size: 0.82rem; cursor: pointer; text-align: left; }
.side-notify:hover { border-color: var(--accent); }
.side-notify.notify-off, .side-notify.notify-denied, .side-notify.notify-ios-install { border-color: #f0b400; background: #fff8e1; color: #6b4e00; font-weight: 700; }
.side-notify-go { flex: none; color: var(--ink-soft); font-weight: 400; }
.notify-box { max-width: 560px; }
.notify-dev { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 6px 0 8px; }
.notify-dev.notify-on { border-color: #2f9e5e; background: rgba(47,158,94,0.06); }
.notify-dev.notify-off, .notify-dev.notify-denied, .notify-dev.notify-ios-install { border-color: #f0b400; background: #fff8e1; }
.notify-dev-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.notify-state { font-weight: 700; }
.notify-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.notify-acts:empty { display: none; }
.notify-h3 { font-size: 0.95rem; margin: 14px 0 4px; }
.notify-list { margin: 0; padding-left: 1.2em; font-size: 0.86rem; line-height: 1.6; color: var(--ink); }
.notify-list li + li { margin-top: 3px; }
.dash-notify { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border: 1px solid #f0b400; background: #fff8e1; color: #6b4e00; border-radius: 12px; font-weight: 700; font-size: 0.9rem; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .side-notify.notify-off, :root:not([data-theme="light"]) .side-notify.notify-denied, :root:not([data-theme="light"]) .side-notify.notify-ios-install,
:root:not([data-theme="light"]) .notify-dev.notify-off, :root:not([data-theme="light"]) .notify-dev.notify-denied, :root:not([data-theme="light"]) .notify-dev.notify-ios-install,
:root:not([data-theme="light"]) .dash-notify { background: #3a2f12; color: #ffe08a; }
}
/* 通知の設定：見ているときもスマホに届ける(2026-10-25) */
.notify-sw { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 6px 0; }
.notify-sw-l { min-width: 0; }
.notify-sw-l .sub { margin: 4px 0 0; }
.notify-sw-g { flex: none; display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-top: 2px; }
.notify-sw-b { border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 0.82rem; font-weight: 700; padding: 5px 14px; cursor: pointer; }
.notify-sw-b.on.cur { background: #2f9e5e; color: #fff; }
.notify-sw-b.off.cur { background: #6b7270; color: #fff; }
/* ⚙ のメニュー：カテゴリ → 中身 の2段(2026-10-25) */
.gear-level { display: flex; flex-direction: column; gap: 2px; }
.gear-level[hidden] { display: none; }
.userbar .gear-menu .gear-cat { display: flex; align-items: center; gap: 6px; font-weight: 700; position: relative; }
.gear-cat-go { margin-left: auto; color: var(--ink-faint); font-weight: 400; font-size: 1rem; }
.gear-cat .tab-badge { position: static; margin-left: 4px; }
.userbar .gear-menu .gear-back { color: var(--ink-soft); font-weight: 700; border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; margin-bottom: 4px; }
.gear-sep { height: 1px; background: var(--line); margin: 4px 6px; }
/* プロジェクトのダッシュボード(2026-10-25) */
.dash-home-link { font-size: 0.82rem; padding: 0; margin-bottom: 2px; }
.dash-proj { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dash-proj-mem { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1 1 260px; }
.dash-proj-names { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-proj-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* AI 秘書にできること(2026-10-26) */
.ai-can { max-width: 640px; margin: 12px auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.ai-can-head { font-weight: 800; margin-bottom: 6px; }
.ai-can-row { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.ai-can-head + .ai-can-row { border-top: 0; }
.ai-can-ic { flex: none; font-size: 1.2rem; line-height: 1.4; }
.ai-can-body { min-width: 0; }
.ai-can-body p { margin: 2px 0 4px; font-size: 0.86rem; color: var(--ink-soft); }
.ai-can-ex { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-can-ex .ai-ex { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; background: var(--bg, transparent); color: var(--ink); font-size: 0.8rem; }
.ai-can-no { margin: 8px 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.ai-can-box { max-width: 680px; }
.ai-can-box .ai-can { margin: 0; border: 0; padding: 0; background: transparent; }
.ai-examples .ai-can-btn { font-weight: 700; border-color: var(--accent); color: var(--accent); }
/* ダッシュボードの色(2026-10-26 ナカヤン：背景に色を付けて、全体を見やすく)。欄ごとに淡い色の背景と左の色の線 */
#mod-dash { --dc-cal: #2f6fdb; --dc-cal-bg: #eef4ff; --dc-todo: #2f9e5e; --dc-todo-bg: #edf8f1; --dc-chat: #c98a00; --dc-chat-bg: #fff7e3;
--dc-hw: #7a5ad8; --dc-hw-bg: #f4f0ff; --dc-mtg: #138a8a; --dc-mtg-bg: #e9f7f6; --dc-late: #d64545; --dc-late-bg: #fdf0f0;
background: linear-gradient(180deg, #f1efe9 0%, #f6f5f1 240px); border-radius: 18px; padding: 14px 16px 18px; }
#mod-dash .dash-card { border-left: 4px solid var(--dc, var(--line)); background: var(--dc-bg, var(--panel)); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
#mod-dash .dash-card .dash-card-h strong { color: var(--dc, var(--ink)); }
#mod-dash .dash-card .dash-row { border-top-color: rgba(0,0,0,0.06); }
#mod-dash .tone-cal { --dc: var(--dc-cal); --dc-bg: var(--dc-cal-bg); }
#mod-dash .tone-todo { --dc: var(--dc-todo); --dc-bg: var(--dc-todo-bg); }
#mod-dash .tone-chat { --dc: var(--dc-chat); --dc-bg: var(--dc-chat-bg); }
#mod-dash .tone-hw { --dc: var(--dc-hw); --dc-bg: var(--dc-hw-bg); }
#mod-dash .tone-mtg { --dc: var(--dc-mtg); --dc-bg: var(--dc-mtg-bg); }
#mod-dash .tone-late { --dc: var(--dc-late); --dc-bg: var(--dc-late-bg); }
#mod-dash .dash-stat { border-top: 4px solid var(--dc, var(--line)); background: var(--dc-bg, var(--panel)); }
#mod-dash .dash-stat .dash-stat-l { color: var(--dc, var(--ink-soft)); font-weight: 700; }
#mod-dash .dash-proj { background: linear-gradient(90deg, #3C3489 0%, #5b4fc4 100%); color: #fff; border: 0; }
#mod-dash .dash-proj .dash-stat-l, #mod-dash .dash-proj .dash-proj-names { color: #fff; }
#mod-dash .dash-proj .pw-send { background: #fff; color: #3C3489; border-color: #fff; }
/* ホームのカードの右上のボタン(＋ 貼る・カレンダーへ など)は1行で。紫の帯の中は白いボタンに */
#mod-dash .chat-link-btn { white-space: nowrap; }
#mod-dash .dash-proj .chat-link-btn { color: #3C3489; background: #fff; border-color: #fff; }
/* 紫の左の列(チャットの一覧)の中は、白の半透明のボタンに(緑の地では読みにくい) */
body.rail-on .chat-side .chat-link-btn { color: #fff; background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.4); }
body.rail-on .chat-side .chat-link-btn:hover { background: rgba(255,255,255,0.28); }
#mod-dash .dash-notify { border-left-width: 4px; }
@media (max-width: 640px) { #mod-dash { border-radius: 0; padding: 10px 10px 16px; } }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) #mod-dash { --dc-cal-bg: #18233a; --dc-todo-bg: #15291e; --dc-chat-bg: #2c2412; --dc-hw-bg: #221c36; --dc-mtg-bg: #132b2b; --dc-late-bg: #331a1a;
--dc-cal: #7fa8ff; --dc-todo: #6fd29a; --dc-chat: #f0c050; --dc-hw: #b9a2ff; --dc-mtg: #5fd0cc; --dc-late: #ff8a8a; background: linear-gradient(180deg, #17181c 0%, #121316 240px); }
:root:not([data-theme="light"]) #mod-dash .dash-card .dash-row { border-top-color: rgba(255,255,255,0.08); }
}
:root[data-theme="dark"] #mod-dash { --dc-cal-bg: #18233a; --dc-todo-bg: #15291e; --dc-chat-bg: #2c2412; --dc-hw-bg: #221c36; --dc-mtg-bg: #132b2b; --dc-late-bg: #331a1a;
--dc-cal: #7fa8ff; --dc-todo: #6fd29a; --dc-chat: #f0c050; --dc-hw: #b9a2ff; --dc-mtg: #5fd0cc; --dc-late: #ff8a8a; background: linear-gradient(180deg, #17181c 0%, #121316 240px); }
/* 相手のアイコンの色(自分の画面だけ。2026-10-26) */
.av-swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; }
.av-sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.av-sw.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--panel) inset; }
.av-sw.auto { width: auto; border-radius: 999px; padding: 0 10px; background: var(--panel); border: 1px solid var(--line); font: inherit; font-size: 0.78rem; color: var(--ink); }
.av-sw.auto.on { border: 2px solid var(--ink); }
.av-sw-prev { margin-left: 8px; width: 34px; height: 34px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.ai-can-box .ai-can-head { display: none; } /* 画面の見出しと重なるため */
/* ダッシュボード：右上の AI 秘書・読み直す、TODO のプロジェクトの色(2026-10-26) */
.dash-head-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.dash-ai-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #5b4fc4; background: #f3f1ff; color: #3C3489; font: inherit; font-size: 0.85rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.dash-ai-btn:hover { background: #e6e2ff; }
.dash-reload { width: 36px; height: 36px; flex: none; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); border-radius: 50%; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.dash-reload:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 640px) { .dash-ai-btn .dash-ai-l { display: none; } .dash-ai-btn { width: 36px; height: 36px; padding: 0; justify-content: center; font-size: 1.1rem; } .dash-head { align-items: flex-start; } }
#mod-dash .dash-todo { border-left: 4px solid var(--pc, transparent); padding-left: 8px; border-radius: 4px; }
.dash-proj-tag { flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--pc, var(--ink-faint)); border-radius: 999px; padding: 1px 8px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dash-ai-btn { background: #241f4a; color: #d9d4ff; border-color: #7b6ff0; } }
:root[data-theme="dark"] .dash-ai-btn { background: #241f4a; color: #d9d4ff; border-color: #7b6ff0; }
/* TODO の行：「✓ 完了」の文字のボタンと、右側の編集・削除(2026-10-26) */
.td-done-btn { flex: 0 0 auto; border: 1.5px solid #2e9e5b; color: #1f7a45; background: var(--panel); font: inherit; font-size: 0.8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; margin-top: 1px; }
.td-done-btn:hover { background: #2e9e5b; color: #fff; }
.td-done-btn.over { border-color: var(--overdue); color: var(--overdue); }
.td-done-btn.over:hover { background: var(--overdue); color: #fff; }
.td-done-btn.on { border-color: var(--line); color: var(--ink-soft); background: transparent; }
.td-row-acts { flex: 0 0 auto; display: flex; gap: 4px; align-items: center; margin-top: 1px; }
.td-act { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); font: inherit; font-size: 0.78rem; padding: 3px 8px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.td-act:hover { color: var(--accent); border-color: var(--accent); }
.td-act.del:hover { color: var(--overdue); border-color: var(--overdue); }
@media (max-width: 640px) { .td-act .td-act-l { display: none; } .td-act { padding: 4px 7px; } .td-row { gap: 8px; } }
/* 小さな画面の入力欄の大きさ(2026-10-26 ナカヤン：選ぶ欄が大きすぎる)。縦に並ぶ画面では「横幅150px」が高さに効いていたので止め、
選ぶ欄は中身に合わせた幅(最大 360px)にする。予定の登録の画面は今までどおり */
.guest-box .qa-select, .guest-box .qa-input { flex: 0 0 auto; }
.guest-box:not(.ev-box) select.qa-select, .guest-box:not(.ev-box) select.qa-input, .guest-box select.find-sel { width: auto; min-width: 180px; max-width: min(100%, 360px); align-self: flex-start; }
/* 保存などの決めるボタンは右下 */
.dlg-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
#mod-dash .dash-check.td-done-btn { width: auto; height: auto; border-radius: 999px; border: 1.5px solid #2e9e5b; background: var(--panel); }
#mod-dash .dash-check.td-done-btn.over { border-color: var(--overdue); }
#mod-dash .dash-check.td-done-btn:hover { background: #2e9e5b; color: #fff; }
.profile-first { background: #f3f1ff; border-left: 4px solid #5b4fc4; border-radius: 8px; padding: 8px 12px; font-size: 0.88rem; margin: 0 0 10px; }
/* 左の列のホームの下の「AI 秘書」(2026-10-26) */
.rail-ai .rail-ai-ic { font-size: 1.15rem; line-height: 1.1; }
.rail-home.rail-ai { margin-top: -2px; }
/* 知り合いを探す(チャットの左・ダッシュボード)と、選んでいるプロジェクトの参加者(2026-10-26) */
.side-find { display: flex; align-items: center; width: 100%; margin: 6px 0 2px; padding: 7px 10px; border: 1px dashed var(--accent); border-radius: 10px; background: transparent; color: var(--accent); font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; text-align: left; }
.side-find:hover { background: var(--accent-soft); }
body.rail-on .side-find { border-color: rgba(255,255,255,0.45); color: #fff; }
body.rail-on .side-find:hover { background: rgba(255,255,255,0.12); }
.side-proj-mem { display: flex; gap: 6px; align-items: baseline; font-size: 0.76rem; margin: -2px 2px 8px; min-width: 0; color: var(--ink-soft); }
body.rail-on .side-proj-mem { color: #CECBF6; }
.side-proj-mem-n { flex: none; font-weight: 700; }
.side-proj-mem-names { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-find-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 0.85rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.dash-find-btn:hover { border-color: var(--accent); color: var(--accent); }
.dash-find-btn .chat-unread-n { position: absolute; top: -6px; right: -6px; }
@media (max-width: 640px) { .dash-find-btn .dash-ai-l { display: none; } .dash-find-btn { width: 36px; height: 36px; padding: 0; justify-content: center; font-size: 1.05rem; } }
.contact-ai-hint .chat-link-btn { white-space: nowrap; }
/* 参加者の名前を押すと1対1(2026-10-26) */
.side-mem-btn { border: 0; background: transparent; color: inherit; font: inherit; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.35); text-underline-offset: 2px; }
.side-mem-btn:hover { color: #fff; text-decoration-color: #fff; }
.dash-proj-names { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; white-space: normal; }
.dash-mem { border: 1px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.12); color: #fff; font: inherit; font-size: 0.82rem; padding: 2px 10px; border-radius: 999px; cursor: pointer; }
.dash-mem:hover { background: #fff; color: #3C3489; }
.dash-mem.me { cursor: default; opacity: 0.85; }
/* チャット：一覧とやりとりの間の縦の線(ドラッグで一覧の幅を変える)と、長いプロジェクト名は2行まで(2026-10-26) */
.chat-wrap { grid-template-columns: var(--side-w, 200px) 8px minmax(0, 1fr); gap: 0; }
.chat-wrap > .chat-main { padding-left: 8px; }
body.rail-on .chat-wrap { grid-template-columns: var(--side-w, 264px) 6px minmax(0, 1fr); }
body.rail-on .chat-wrap > .chat-main { padding-left: 0; }
.chat-split { cursor: col-resize; position: relative; touch-action: none; background: transparent; outline: none; align-self: stretch; } /* 2026-10-27：上詰めの並びでも縦いっぱいに伸ばす(高さ0でつかめなかった) */
.chat-split::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: var(--line); transition: background .12s, width .12s; }
.chat-split:hover::after, .chat-split.on::after, .chat-split:focus-visible::after { width: 4px; background: var(--accent); }
body.rail-on .chat-split::after { background: rgba(60,52,137,0.25); }
@media (max-width: 640px) { .chat-wrap { grid-template-columns: 1fr; } .chat-split { display: none; } .chat-wrap > .chat-main { padding-left: 0; } }
body.chat-zoom .chat-split { display: none; }
body.chat-zoom .chat-wrap { grid-template-columns: 1fr; }
body.rail-on .side-proj-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; word-break: break-all; }
body.rail-on .side-proj { align-items: flex-start; }
body.rail-on .side-proj-caret { margin-top: 3px; }
/* アカウントの申請(ログインの画面)・管理者の申請の一覧・「メンバーが増えました」(2026-10-26) */
.login-signup-link { margin-top: 2px; font-weight: 700; }
.signup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup-check { display: flex; gap: 8px; align-items: flex-start; font-size: 0.82rem; color: var(--ink-soft); margin: 6px 0 4px; line-height: 1.5; }
.signup-check input { margin-top: 3px; }
.signup-req .signup-note { font-size: 0.86rem; color: var(--ink); margin-top: 2px; }
.member-msg { display: flex; justify-content: center; }
.member-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 560px; width: 100%; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid #e8aa30; border-radius: 12px; padding: 10px 12px; margin: 6px 0; }
.member-ic { font-size: 1.4rem; }
.member-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; font-size: 0.86rem; }
.member-body strong { font-size: 0.92rem; }
.login-form .signup-check { display: flex; flex-direction: row; text-align: left; }
.login-form .signup-check input { width: auto; flex: none; min-height: 0; padding: 0; margin: 3px 0 0; }
.signup-avail { margin: -2px 0 6px; font-size: 0.8rem; min-height: 1em; }
.signup-avail.ok { color: #1f7a45; }
.signup-avail.ng { color: var(--overdue); }
.member-body { text-align: left; }
/* TODO の対応者：表示名・押すとチャット(2026-10-26) */
.td-who { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.td-person { border: 1px solid var(--line); background: var(--panel); color: var(--accent); font: inherit; font-size: 0.78rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.td-person:hover { border-color: var(--accent); background: var(--accent-soft); }
.td-assignees { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; cursor: default; }
/* ログインの画面の飾り(2026-10-26 ナカヤン：色を付けて凝ったデザインに。Produced by BeeSide)。
紫の夜空にハチの巣の模様、はちみつ色の差し色。白いカードの上にフォーム */
#loginView { min-height: 100vh; min-height: 100dvh; background-color: #2b2566;
background-image:
radial-gradient(ellipse at 15% 10%, rgba(239,159,39,0.35) 0, rgba(239,159,39,0) 45%),
radial-gradient(ellipse at 90% 85%, rgba(123,111,240,0.55) 0, rgba(123,111,240,0) 50%),
url("data:image/svg+xml;utf8,"),
linear-gradient(160deg, #3C3489 0%, #2b2566 55%, #1d1947 100%);
background-size: auto, auto, 56px 97px, auto; color: #fff; }
#loginView .login-page { max-width: 400px; padding-top: min(12vh, 90px); padding-bottom: 32px; }
#loginView .login-logo { color: #fff; font-size: 2.1rem; justify-content: center; margin-bottom: 2px; }
#loginView .login-reading { margin: 0 0 10px; text-align: center; color: rgba(255,255,255,0.72); font-size: 0.82rem; letter-spacing: 0.12em; }
#loginView .login-logo .hive-mark { width: 56px; height: 56px; }
/* BeeXy の名前(2026-10-29 ナカヤン)：暗い地では生成り、X だけ朱。マークにも名前にも影・グラデーションは付けない */
#loginView .login-logo .bx-word { color: #EFEAE0; letter-spacing: 0.01em; }
#loginView .login-logo .bx-x { color: #A34B37; }
#loginView .login-tagline { color: #fff; text-align: center; font-size: 1.25rem; margin: 0 0 6px; letter-spacing: 0.04em; }
#loginView .login-sub { color: #d9d4ff; text-align: center; margin: 0; font-size: 0.86rem; }
#loginView .login-form { background: #fff; color: var(--ink); border: 0; border-top: 5px solid #EF9F27; border-radius: 16px; box-shadow: 0 18px 50px rgba(10,6,40,0.45); padding: 26px 24px 20px; }
#loginView .login-form .field-label { color: #4a4568; }
#loginView .login-form input { background: #f7f6fc; border: 1px solid #e2def5; color: #1b1838; }
#loginView .login-form input:focus { border-color: #5b4fc4; box-shadow: 0 0 0 3px rgba(91,79,196,0.18); }
#loginView .login-form button[type="submit"] { background: linear-gradient(135deg, #EF9F27 0%, #f3b54c 100%); color: #2b1a00; border-radius: 10px; box-shadow: 0 6px 16px rgba(239,159,39,0.35); }
#loginView .login-form button[type="submit"]:hover { opacity: 1; filter: brightness(1.05); }
#loginView .login-form .login-link { color: #5b4fc4; }
#loginView .login-form .login-signup-link { margin-top: 10px; padding-top: 12px; border-top: 1px dashed #e2def5; border-radius: 0; }
#loginView .login-form .sub, #loginView .login-form .signup-check { color: #6b6690; }
#loginView .login-lang { color: #d9d4ff; }
#loginView .login-lang select { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.3); }
#loginView .login-lang select option { color: #1b1838; }
.login-credit { text-align: center; margin: 22px 0 0; font-size: 0.82rem; color: #bfb8f2; letter-spacing: 0.06em; }
.login-credit strong { color: #EF9F27; font-weight: 800; letter-spacing: 0.08em; }
/* BeeXy に人を招待する(2026-10-26) */
.userbar .gear-menu .gear-invite { font-weight: 700; color: #3C3489; }
.invite-box .invite-text { width: 100%; margin: 8px 0; font-size: 0.86rem; line-height: 1.6; resize: vertical; }
@media (max-width: 640px) { .dash-head-acts { gap: 6px; } }
#loginView { position: fixed; inset: 0; overflow-y: auto; z-index: 5; }
#loginView .login-form .login-link { color: #5b4fc4 !important; }
#loginView .login-form .login-signup-link { padding-top: 12px !important; font-weight: 700; }
/* ログイン画面のリンク(パスワードを忘れたとき・← ログインに戻る・アカウントを申請する)も、押せると分かる丸いボタンに(2026-10-29 ナカヤン)。
画面の紫に合わせる。「アカウントを持っていない方は」は文のまま、「アカウントを申請する」だけをボタンに */
#loginView .login-form .login-link:not(.login-signup-link), #loginView .login-form .login-signup-link .login-signup-go {
display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: #5b4fc4 !important;
background: #f3f1ff !important; border: 1px solid #c9c2f0 !important; border-radius: 999px; padding: 6px 18px !important; min-height: 36px; box-sizing: border-box; font-weight: 700; }
#loginView .login-form .login-link:not(.login-signup-link) { margin-top: 10px; }
#loginView .login-form .login-signup-link { text-decoration: none; }
#loginView .login-form .login-signup-link .login-signup-go { margin-top: 6px; }
#loginView .login-form .login-link:not(.login-signup-link):hover, #loginView .login-form .login-signup-link:hover .login-signup-go { background: #5b4fc4 !important; color: #fff !important; }
/* プロジェクトのダッシュボード：参加者とボタンの2段・日程調整・資料・リンク(2026-10-26) */
#mod-dash .dash-proj { flex-direction: column; align-items: stretch; gap: 10px; }
.dash-proj-mem { display: flex; align-items: flex-start; gap: 10px; }
.dash-proj-lab { flex: none; white-space: nowrap; font-weight: 700; font-size: 0.85rem; padding-top: 4px; color: #fff; }
.dash-proj-names { flex: 1 1 auto; }
.dash-proj-acts { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 10px; }
.dash-proj-btn { border: 1px solid rgba(255,255,255,0.55); background: #fff; color: #3C3489; font: inherit; font-size: 0.85rem; font-weight: 700; padding: 6px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.dash-proj-btn:hover { background: #f3f1ff; }
#mod-dash { --dc-poll: #c2410c; --dc-poll-bg: #fff3ea; --dc-link: #475569; --dc-link-bg: #f1f5f9; }
#mod-dash .tone-poll { --dc: var(--dc-poll); --dc-bg: var(--dc-poll-bg); }
#mod-dash .tone-link { --dc: var(--dc-link); --dc-bg: var(--dc-link-bg); }
.dash-join.quiet { background: transparent; color: #1a73e8; border: 1px solid #1a73e8; }
/* 資料・リンクの名前は、押せると分かるようにボタンの形に(2026-10-29 ナカヤン：黒い字だけでは押せると分からない)。
中身が長いときは「…」で切る。行の残りいっぱいには伸ばさず、名前の長さまで(flex の伸びを止める) */
.dash-link-a { flex: 0 1 auto; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
border-radius: 8px; padding: 6px 12px; min-height: 34px; box-sizing: border-box; line-height: 20px; text-decoration: none; font-weight: 700; }
.dash-link-a:hover, .dash-link-a:active { background: var(--accent); color: #fff; }
.dash-link-del { flex: none; border: 1px solid var(--line); background: var(--panel); color: var(--ink-faint); cursor: pointer; font-size: 0.9rem; min-width: 32px; min-height: 32px; padding: 2px 6px; border-radius: 8px; }
.dash-link-del:hover { color: var(--overdue); background: rgba(0,0,0,0.05); }
/* 名前を直す(✏)・外す(✕)は右に寄せる。スマホでは「◯◯が貼った」を隠して、名前を長く見せる */
.dash-link-row .dash-link-edit { margin-left: auto; }
@media (max-width: 640px) { .dash-link-row .dash-meta { display: none; } }
.dash-link-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dash-link-form .qa-input { flex: 1 1 180px; min-width: 0; }
/* 「貼る」と「やめる」を同じ行に(2026-10-29) */
.dash-link-btns { display: flex; gap: 8px; align-items: center; width: 100%; }
/* 小さな欄(予約送信・絵文字)の下の「やめる」「閉じる」と、メニューの最後の「✕ 閉じる」(2026-10-29) */
.pop-close-row { display: flex; justify-content: flex-end; margin-top: 6px; }
.act-menu .act-close { border-top: 1px solid var(--line); color: var(--ink-soft); }
.dash-link-btns .qa-submit { flex: 1 1 auto; }
.dash-link-btns .icon-btn { flex: none; white-space: nowrap; min-height: 40px; padding: 4px 18px; }
.dash-who { flex: none; display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 45%; }
.dash-who-n { font-size: 0.78rem; color: var(--ink-soft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #mod-dash { --dc-poll-bg: #33200f; --dc-poll: #ffab70; --dc-link-bg: #1c2430; --dc-link: #a8b8cc; } }
:root[data-theme="dark"] #mod-dash { --dc-poll-bg: #33200f; --dc-poll: #ffab70; --dc-link-bg: #1c2430; --dc-link: #a8b8cc; }
/* SNS(プロフィール・コンタクト・1対1の見出し) */
.sns-box { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.sns-box > summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; }
.sns-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.sns-k { flex: none; width: 110px; font-size: 0.84rem; }
.sns-row .qa-input { flex: 1 1 auto; min-width: 0; }
.sns-links { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 3px 0; }
.sns-link { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 0.74rem; padding: 1px 8px; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.sns-link:hover { border-color: var(--accent); color: var(--accent); }
.chat-title .sns-links { margin: 0 6px; }
#mod-dash .dash-proj .dash-proj-mem, #mod-dash .dash-proj .dash-proj-acts { flex: 0 0 auto; }
@media (max-width: 640px) {
#mod-dash .dash-head { flex-direction: column-reverse; align-items: stretch; gap: 6px; }
#mod-dash .dash-head-acts { justify-content: flex-end; }
#mod-dash .dash-hello { font-size: 1.15rem; word-break: break-all; }
}
/* 会議が終わったときの短い知らせ(しばらくすると消える。2026-10-26) */
.mtg-notice { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; width: min(560px, calc(100vw - 24px));
display: flex; align-items: center; gap: 10px; background: #2b2566; color: #fff; border-left: 5px solid #EF9F27; border-radius: 12px; padding: 12px 12px 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); font-size: 0.88rem; line-height: 1.5;
animation: mtgNoticeIn .25s ease-out; }
@keyframes mtgNoticeIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.mtg-notice-text { flex: 1 1 auto; min-width: 0; }
.mtg-notice-btn { flex: none; border: 0; background: #EF9F27; color: #2b1a00; font: inherit; font-weight: 700; font-size: 0.8rem; padding: 6px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.mtg-notice-x { flex: none; border: 0; background: transparent; color: #d9d4ff; font-size: 1.2rem; cursor: pointer; padding: 0 4px; }
@media (max-width: 640px) { .mtg-notice { bottom: calc(80px + env(safe-area-inset-bottom)); flex-wrap: wrap; } }
/* タスクを登録する画面(2026-10-26 ナカヤン：縦に並べて見やすく・色を付ける) */
#addView .add-card { display: flex; flex-direction: column; align-items: stretch; gap: 16px; max-width: 640px; background: var(--panel); border: 1px solid var(--line); border-top: 5px solid #2f9e5e; border-radius: 16px; padding: 20px 22px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
#addView .add-row { display: flex; flex-direction: column; gap: 6px; }
#addView .add-lab { font-size: 0.82rem; font-weight: 800; color: var(--ink-soft); }
#addView .add-card .qa-select, #addView .add-card .qa-input { flex: 0 0 auto; width: 100%; max-width: none; }
#addView .add-text { font-size: 1.05rem; padding: 12px 14px; }
#addView .add-due { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#addView .add-due button { border: 1.5px solid var(--dc, var(--line)); background: var(--panel); color: var(--dc, var(--ink)); font: inherit; font-weight: 700; font-size: 0.9rem; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
#addView .add-due button.sel { background: var(--dc, var(--ink)); color: #fff; }
#addView .add-due .due-today { --dc: #d64545; }
#addView .add-due .due-tomorrow { --dc: #e8890c; }
#addView .add-due .due-week { --dc: #2f6fdb; }
#addView .add-due .due-none { --dc: #6b7280; font-weight: 600; font-size: 0.8rem; padding: 6px 12px; }
#addView .due-pick { display: inline-flex; align-items: center; gap: 6px; border: 1.5px dashed #7a5ad8; color: #7a5ad8; border-radius: 999px; padding: 4px 6px 4px 14px; font-weight: 700; font-size: 0.88rem; }
#addView .due-pick input { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.9rem; padding: 4px; }
#addView .due-pick:has(input.sel) { background: #f4f0ff; border-style: solid; }
#addView .add-assignees .due-control { display: flex; flex-wrap: wrap; gap: 8px; }
#addView .add-assignees .due-control button { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #c9c2f2; background: #f7f5ff; color: #3C3489; font: inherit; font-weight: 700; font-size: 0.88rem; padding: 6px 14px 6px 6px; border-radius: 999px; cursor: pointer; }
#addView .add-assignees .due-control button::before { content: '👤'; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #e6e2ff; font-size: 0.75rem; }
#addView .add-assignees .due-control button.sel { background: #5b4fc4; border-color: #5b4fc4; color: #fff; }
#addView .add-assignees .due-control button.sel::before { content: '✓'; background: #fff; color: #5b4fc4; font-weight: 800; }
#addView .add-assignees .due-control .add-person { border-style: dashed; background: transparent; color: var(--ink-soft); padding-left: 12px; }
#addView .add-assignees .due-control .add-person::before { content: none; }
#addView .add-ai-note { margin: 0; font-size: 0.82rem; color: #7a5ad8; background: #f4f0ff; border-radius: 8px; padding: 8px 12px; }
#addView .add-foot { display: flex; justify-content: flex-end; }
#addView .add-submit { font-size: 1rem; padding: 10px 26px; border-radius: 999px; background: #2f9e5e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #addView .add-assignees .due-control button { background: #241f4a; color: #d9d4ff; border-color: #4a4290; } :root:not([data-theme="light"]) #addView .add-ai-note, :root:not([data-theme="light"]) #addView .due-pick:has(input.sel) { background: #241f4a; } }
/* チャンネル・部屋・コンタクトの丸いアイコン(ダイレクトの人と同じ大きさ。2026-10-26) */
.chat-item .side-ic { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.05rem; font-weight: 800; }
.chat-item .side-ic.ic-ch { background: #e6e2ff; color: #5b4fc4; font-size: 1.2rem; }
.chat-item .side-ic.ic-mtg { background: #d8ecff; }
.chat-item .side-ic.ic-call { background: #d9f5e3; }
.chat-item .side-ic.ic-contact { background: #ffe3d6; }
.voice-item.with-av .chat-item-name, .contact-item.with-av .chat-item-name { flex: 1 1 auto; }
.chat-item.with-av > .chat-item-name { font-size: 0.95rem; }
.chat-item .side-ic.ic-group { background: #fde7f1; }
/* 会話の見出しの右上：アイコンだけ(2026-10-26) */
.chat-head .head-ic { min-width: 34px; justify-content: center; }
.chat-head .head-ic .fs-ic { font-weight: 800; font-size: 0.9rem; letter-spacing: -0.02em; }
.chat-row-btn.row-more { font-weight: 800; font-size: 1rem; line-height: 1; }
/* 「完了にする」ボタン(2026-10-26 ナカヤン：「✓ 完了」が済みに見える)。ふだんは灰色の枠と空の四角、乗せると緑でチェックが入る */
.td-done-btn, #mod-dash .dash-check.td-done-btn { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); color: var(--ink-soft); background: var(--panel); font-weight: 700; padding: 4px 11px 4px 8px; }
.td-done-btn:not(.on)::before { content: ''; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; box-sizing: border-box; border: 2px solid #9aa3ad; border-radius: 4px; background: #fff; font-size: 11px; line-height: 1; color: #fff; }
.td-done-btn:not(.on):hover, #mod-dash .dash-check.td-done-btn:hover { border-color: #2e9e5b; color: #1f7a45; background: #eefaf2; }
.td-done-btn:not(.on):hover::before { content: '✓'; border-color: #2e9e5b; background: #2e9e5b; }
.td-done-btn.over, #mod-dash .dash-check.td-done-btn.over { border-color: var(--line); color: var(--ink-soft); }
.td-done-btn.over::before { border-color: var(--overdue); }
.td-done-btn.over:hover, #mod-dash .dash-check.td-done-btn.over:hover { border-color: #2e9e5b; color: #1f7a45; background: #eefaf2; }
.td-done-btn.on { border-color: var(--line); color: var(--ink-soft); background: transparent; padding: 4px 11px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .td-done-btn:not(.on)::before { background: transparent; } :root:not([data-theme="light"]) .td-done-btn:not(.on):hover { background: #173524; color: #9fe0b8; } }
/* 「← 戻る」をすべて大きく・色付きに(2026-10-26 ナカヤン)。横いっぱいの帯にせず、文字の幅だけ */
.back-btn { display: inline-flex; align-items: center; gap: 4px; width: auto; max-width: max-content; border: 1.5px solid #c9c2f2; background: #efecff; color: #4b3fb0; border-radius: 999px; padding: 9px 18px; font: inherit; font-size: 0.95rem; font-weight: 800; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.back-btn:hover { background: #5b4fc4; border-color: #5b4fc4; color: #fff; }
.back-btn.panel-back { display: inline-flex; align-self: flex-start; width: max-content; margin: 0 0 10px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .back-btn { background: #2b2566; border-color: #4a4290; color: #d9d4ff; } :root:not([data-theme="light"]) .back-btn:hover { background: #5b4fc4; color: #fff; } }
:root[data-theme="dark"] .back-btn { background: #2b2566; border-color: #4a4290; color: #d9d4ff; }
/* 入力欄が右に長くなりすぎないように(2026-10-26 ナカヤン)。文字は 560px、選ぶ欄は 360px、長文は 720px まで */
.contact-find { max-width: 640px; }
.chat-main .mtg-section input[type="text"], .chat-main .mtg-section input[type="search"], .chat-main .mtg-section input[type="url"], .chat-main .mtg-section input:not([type]),
#wsView input[type="text"], #wsView input[type="email"], #wsView input:not([type]), #pwView input[type="password"], #pwAdminView input[type="text"], #pwAdminView input[type="password"], #pwAdminView input:not([type]) { max-width: 560px; box-sizing: border-box; }
.chat-main .mtg-section select, #wsView select, #pwAdminView select, #addView .add-card select.qa-select { max-width: 360px; }
.chat-main .mtg-section textarea, #wsView textarea, #pwAdminView textarea { max-width: 720px; box-sizing: border-box; }
/* Google カレンダー：どのアカウントか(2026-10-26) */
.gcal-feed-acct { display: block; font-size: 0.82rem; color: var(--ink-soft); overflow-wrap: anywhere; margin-top: 2px; }
/* ベータ版の印と、改善の要望・全員へのお知らせ(2026-10-26) */
.beta-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #EF9F27; color: #2b1a00; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.02em; vertical-align: middle; line-height: 1.5; }
.rail-logo .rail-beta { margin: 2px 0 0; padding: 0 6px; font-size: 0.62rem; }
.gear-feedback { font-weight: 700; }
.fb-box { max-width: 620px; }
.fb-kinds, .fb-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.fb-kind { border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 0.88rem; font-weight: 700; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.fb-kind.on { background: #5b4fc4; border-color: #5b4fc4; color: #fff; }
.fb-text, .fb-note { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.6; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); resize: vertical; }
.fb-note { font-size: 0.9rem; }
.fb-foot { align-items: center; justify-content: space-between; }
.fb-h { font-size: 0.95rem; margin: 18px 0 6px; }
.fb-mine, .fb-admin-body { display: flex; flex-direction: column; gap: 8px; }
.fb-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel); }
.fb-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.85rem; }
.fb-item-text { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.fb-item-note { margin: 6px 0 0; font-size: 0.86rem; color: #4b3fb0; background: #f4f0ff; border-radius: 8px; padding: 6px 10px; white-space: pre-wrap; }
.fb-item-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; align-items: flex-start; }
.fb-item-acts .fb-note { max-width: none; }
.fb-tell { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; }
.fb-st { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 800; background: #eceff3; color: #4b5563; }
.fb-st-new { background: #fff1d6; color: #8a5a00; }
.fb-st-later { background: #e6f0ff; color: #1e4fa8; }
.fb-st-doing { background: #ede9ff; color: #4b3fb0; }
.fb-st-done { background: #dcf5e6; color: #17703f; }
.fb-st-no { background: #eceff3; color: #6b7280; }
/* ログインの画面：説明の文(ハチの巣の色)と申請の案内の改行(2026-10-26 ナカヤン) */
#loginView .login-sub { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 2px 0 0; text-align: center; color: inherit; }
#loginView .login-what { font-size: 0.98rem; font-weight: 800; letter-spacing: 0.03em; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere;
background: linear-gradient(90deg, #F5B53A 0%, #FFD966 50%, #F29A1E 100%); -webkit-background-clip: text; background-clip: text; color: #FFC94D; -webkit-text-fill-color: transparent; }
#loginView .login-please { font-size: 0.84rem; color: #FFE4A8; }
#loginView .login-signup-link { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-left: auto; margin-right: auto; }
#loginView .login-signup-q { font-size: 0.8rem; font-weight: 500; text-decoration: none; color: var(--ink-soft, #6b6b80); }
#loginView .login-signup-go { font-weight: 800; text-decoration: underline; }
#loginView .login-signup-link { text-decoration: none !important; }
/* 「← 一覧」はスマホだけ(「← 戻る」の形を変えたときに PC でも出ていたのを直す。2026-10-26) */
.back-btn.chat-back { display: none; }
@media (max-width: 640px) { .back-btn.chat-back { display: inline-flex; } body.chat-zoom .back-btn.chat-back { display: none; } }
/* 別の画面から飛んできたときの「← 〇〇に戻る」(チャットは見出し、ほかは画面の下) */
.chat-head .jump-back { flex: 0 0 auto; padding: 7px 14px; font-size: 0.9rem; }
.jump-back-pill { left: auto; right: 16px; }
@media (min-width: 900px) { body.rail-on .jump-back-pill { left: 96px; right: auto; } }
.chat-msg.found .chat-bubble { box-shadow: 0 0 0 3px #EF9F27, 0 0 0 7px rgba(239,159,39,0.25); transition: box-shadow .3s; }
.jump-spacer { flex: none; }
/* ダッシュボードの TODO：マウスを載せると概要。プロジェクトのダッシュボードは名前を1行目いっぱいに、期限と担当を2行目に(2026-10-26) */
.dash-hovercard { position: fixed; z-index: 120; width: min(360px, calc(100vw - 16px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-top: 4px solid #2f9e5e; border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); font-size: 0.86rem; line-height: 1.55; pointer-events: none; }
.dash-hc-title { font-weight: 800; font-size: 0.95rem; margin-bottom: 6px; overflow-wrap: anywhere; }
.dash-hc-line { display: flex; gap: 8px; }
.dash-hc-k { flex: 0 0 6.5em; white-space: nowrap; color: var(--ink-soft); }
.dash-hc-v { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dash-hc-line.late .dash-hc-v { color: var(--overdue); font-weight: 700; }
.dash-hc-memo { margin-top: 8px; padding: 8px 10px; background: var(--bg, #f7f7f5); border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: hidden; }
.dash-hc-none { margin-top: 6px; color: var(--ink-soft); font-size: 0.8rem; }
#mod-dash .dash-todo.scoped { flex-wrap: wrap; row-gap: 4px; }
#mod-dash .dash-todo.scoped .dash-title { flex: 1 1 calc(100% - 140px); min-width: 0; }
#mod-dash .dash-todo.scoped .dash-meta { margin-left: 128px; }
#mod-dash .dash-todo.scoped .dash-who { flex: 1 1 auto; }
/* ダッシュボードのカード：残っているものの数のバッジ(左上。2026-10-26) */
#mod-dash .dash-card { position: relative; }
.dash-cbadge { position: absolute; top: -10px; left: -10px; z-index: 2; min-width: 26px; height: 26px; box-sizing: border-box; padding: 0 7px; border-radius: 13px; border: 2px solid #fff;
display: inline-flex; align-items: center; justify-content: center; background: #EF9F27; color: #2b1a00; font-size: 0.82rem; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.dash-cbadge.urgent { background: #d64545; color: #fff; }
/* 予定：プロジェクトの全員に知らせる(2026-10-26) */
.ev-notify-ws { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.88rem; font-weight: 700; color: #4b3fb0; }
/* ダッシュボード：5件(会議のコメントは3件)より多い分をたたむ(2026-10-26) */
#mod-dash .dash-row[hidden], #mod-dash .dash-mtg-wrap[hidden] { display: none !important; }
.dash-fold { display: block; width: 100%; margin: 6px 0 0; border: 1.5px dashed var(--line); background: transparent; color: #4b3fb0; font: inherit; font-size: 0.86rem; font-weight: 800; padding: 7px 10px; border-radius: 10px; cursor: pointer; }
.dash-fold:hover { background: #efecff; border-color: #c9c2f2; }
/* 会議のコメント：消す(主催者)・外す(ほかの人)。2026-10-26 */
.dash-mtg-del { flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); font: inherit; font-size: 0.78rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.dash-mtg-del:hover { border-color: var(--overdue); color: var(--overdue); background: #fff4f4; }
/* ダッシュボード：読んだ自分あての呼びかけは薄く(2026-10-26) */
#mod-dash .dash-link.is-read { opacity: 0.6; }
#mod-dash .dash-link.is-read .dash-at { filter: grayscale(1); }
/* 設定まわりの画面(プロジェクトの設定・パスワード・利用者とパスワード・ゴミ箱)：余白を詰め、「追加」「変更」を縦にそろえる(2026-10-26 ナカヤン) */
#wsView .mtg-section, #pwView .mtg-section, #pwAdminView .mtg-section, #trashView .mtg-section { margin: 14px 0; }
#wsView .mtg-section h2, #pwView .mtg-section h2, #pwAdminView .mtg-section h2 { margin-bottom: 6px; padding-bottom: 4px; }
#wsView .mtg-section .sub, #pwAdminView .mtg-section .sub { margin: 2px 0 8px; }
#wsView .add-header, #pwView .add-header, #pwAdminView .add-header, #trashView .add-header { margin-bottom: 8px; }
#wsView .quickadd, #pwView .quickadd, #pwAdminView .quickadd { background: transparent; border: 0; padding: 0; margin: 6px 0 0; flex-wrap: nowrap; align-items: center; }
#wsView .quickadd > input, #wsView .quickadd > select, #pwView .quickadd > input, #pwAdminView .quickadd > input, #pwAdminView .quickadd > select { flex: 0 1 440px; width: 440px; max-width: 440px; min-width: 0; box-sizing: border-box; }
#wsView .quickadd > .qa-submit, #pwView .quickadd > .qa-submit, #pwAdminView .quickadd > .qa-submit { flex: 0 0 auto; min-width: 72px; }
#wsView .empty, #pwAdminView .empty, #trashView .empty { padding: 6px 0; text-align: left; }
@media (max-width: 640px) { #wsView .quickadd > input, #wsView .quickadd > select, #pwView .quickadd > input, #pwAdminView .quickadd > input, #pwAdminView .quickadd > select { flex: 1 1 auto; width: auto; } }
/* 参加者の札：チャットと同じ丸いアイコン＋表示名 */
#wsView .chip-row { gap: 8px; }
.ws-mem { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 0.92rem; }
.ws-mem-av { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 0.8rem; object-fit: cover; flex: none; }
.ws-mem-n { font-weight: 700; }
.ws-mem-tag { font-size: 0.72rem; font-weight: 800; color: #4b3fb0; background: #efecff; border-radius: 999px; padding: 1px 8px; }
.ws-mem .chip-x { border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 1rem; padding: 0 2px; }
.ws-admins { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ws-admin-row { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.92rem; cursor: pointer; }
.ws-leave { margin-top: 10px; }
.dash-join-url { text-decoration: none; display: inline-flex; align-items: center; }
/* ダッシュボード：左右の列をそれぞれ上から詰める(カードが隣の高さまで伸びない。2026-10-26) */
.dash-grid.stacked { align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* 「知り合いを探す」に届いた申請の数(「コンタクト」の行を消したため。2026-10-26) */
.side-find .side-find-n { margin-left: auto; }
.side-find.active { background: rgba(255,255,255,0.14); border-style: solid; }
/* ダッシュボードのカード：「－」でたたむ・「＋」で開く(2026-10-26) */
.dash-card-h > strong { margin-right: auto; }
.dash-collapse { flex: none; width: 28px; height: 28px; margin-left: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink-soft); font: inherit; font-size: 1rem; font-weight: 800; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dash-collapse:hover { border-color: #5b4fc4; color: #4b3fb0; background: #efecff; }
.dash-card.collapsed > :not(.dash-card-h):not(.dash-cbadge) { display: none !important; }
.dash-card.collapsed > .dash-card-h { margin-bottom: 0; }
/* 「知り合いを探す・申請」をボタンらしく(ハチミツ色で塗る・影。2026-10-26 ナカヤン) */
.side-find, body.rail-on .side-find { border: 0; background: linear-gradient(180deg, #FFD36B 0%, #F5B53A 100%); color: #2b1a00; font-weight: 800; padding: 10px 12px; border-radius: 12px; box-shadow: 0 3px 0 rgba(120, 70, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.15); transition: transform .08s, box-shadow .08s, filter .15s; }
.side-find:hover, body.rail-on .side-find:hover { filter: brightness(1.06); }
.side-find:active, body.rail-on .side-find:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(120, 70, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15); }
.side-find.active, body.rail-on .side-find.active { outline: 2px solid #fff; outline-offset: 1px; }
/* ダッシュボードのカードの見出しは1行に(折れると左右の高さがずれる。2026-10-26 ナカヤン) */
.dash-card-h > strong { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-card-h .dash-more { flex: none; white-space: nowrap; }
/* ダッシュボード：「今日の予定」と TODO の1行の高さをそろえる(5件ずつのとき、左右のカードの長さが同じになる。2026-10-27 ナカヤン) */
#mod-dash .tone-cal .dash-row, #mod-dash .tone-todo .dash-row:not(.scoped) { min-height: 44px; box-sizing: border-box; align-items: center; }
/* TODO：同じ期限の中で並べ替える「↑」「↓」(2026-10-27 ナカヤン) */
.td-move { flex: none; align-self: center; display: flex; flex-direction: column; gap: 2px; margin-right: 4px; }
.td-move button { width: 24px; height: 20px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink-soft, #5b6470); font: inherit; font-size: 0.78rem; font-weight: 800; line-height: 1; cursor: pointer; }
/* マウスのある端末だけ(2026-10-28 ナカヤン：スマホで動かすと、指の下に来た別のタスクの ↑↓ の色が変わって見えた) */
@media (hover: hover) { .td-move button:hover:not(:disabled) { background: var(--accent-soft); color: #5b4fc4; border-color: #b9b1ef; } }
.td-row.td-moved { animation: td-moved 0.7s ease 1; }
@keyframes td-moved { from { background: color-mix(in srgb, #5b4fc4 18%, transparent); } to { background: transparent; } }
.td-move button:disabled { opacity: 0.25; cursor: default; }
/* マウスを載せている行に色(2026-10-27 ナカヤン)。指で触る端末では付けない */
@media (hover: hover) { .td-row:not(.td-edit):hover { background: color-mix(in srgb, #5b4fc4 7%, transparent); border-radius: 8px; } }
.td-row.td-nogrip { padding-left: 42px; }
@media (max-width: 640px) { .td-move button { width: 30px; height: 26px; font-size: 0.9rem; } .td-row.td-nogrip { padding-left: 46px; } }
.sort-filter .chip.sort-opt { border: 0; background: none; font: inherit; font-size: 0.86rem; text-align: left; cursor: pointer; color: var(--ink); }
.sort-filter .chip.sort-opt.active { background: var(--accent-soft); font-weight: 700; }
/* チャット：入力欄の上の縁をつまんで高さを変える(PC だけ。2026-10-27 ナカヤン) */
.chat-resize { display: flex; justify-content: center; align-items: center; height: 12px; margin: -6px -8px 0; cursor: ns-resize; touch-action: none; user-select: none; }
.chat-resize::before { content: ''; width: 40px; height: 4px; border-radius: 4px; background: var(--line); transition: background 0.15s; }
.chat-resize:hover::before, .chat-resize.on::before { background: var(--accent); }
@media (min-width: 641px) { .chat-composer-box .chat-input.sized { height: var(--ta-h); max-height: none; } }
@media (max-width: 640px) { .chat-resize { display: none; } }
body.zl-side .chat-main > .chat-composer-box .chat-resize { display: none; }
/* TODO：まとめて編集(2026-10-27 ナカヤン) */
.td-sel { flex: none; align-self: center; width: 22px; height: 22px; margin: 0 4px 0 2px; accent-color: #5b4fc4; cursor: pointer; }
.td-row.td-picked { background: color-mix(in srgb, #5b4fc4 9%, transparent); border-radius: 8px; }
.td-row.td-nogrip:has(> .td-sel) { padding-left: 2px; }
#listView.bulk-on { padding-bottom: 96px; }
.bulk-bar { position: sticky; bottom: 12px; z-index: 20; margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,0.16); padding: 10px 12px; }
.bulk-bar[hidden] { display: none; }
.bulk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bulk-n { font-weight: 800; font-size: 0.92rem; }
.bulk-sp { flex: 1; }
.bulk-all { border: 0; background: none; color: #5b4fc4; font: inherit; font-size: 0.84rem; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 4px; }
.bulk-act { border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; font-size: 0.86rem; font-weight: 700; padding: 7px 13px; cursor: pointer; white-space: nowrap; }
.bulk-act:hover:not(:disabled), .bulk-act.on { background: var(--accent-soft); border-color: #b9b1ef; }
.bulk-act:disabled, .bulk-all:disabled { opacity: 0.4; cursor: default; }
.bulk-panel { border-bottom: 1px solid var(--line); padding: 2px 0 12px; margin-bottom: 10px; }
.bulk-panel[hidden] { display: none; }
.bulk-panel-t { font-weight: 700; font-size: 0.86rem; margin-bottom: 6px; }
.bulk-panel .qa-select { max-width: 320px; }
.bulk-note { margin: 0; color: var(--ink-soft); font-size: 0.86rem; }
.bulk-panel-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.bulk-cancel, .bulk-apply { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; font-size: 0.88rem; font-weight: 700; padding: 8px 16px; cursor: pointer; }
.bulk-apply { background: #5b4fc4; border-color: #5b4fc4; color: #fff; }
.bulk-apply:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 640px) {
.bulk-bar { bottom: calc(72px + env(safe-area-inset-bottom)); padding: 8px 10px; }
.bulk-sp { display: none; }
.bulk-act { padding: 7px 11px; font-size: 0.82rem; }
}
/* 管理者の画面：バックアップが止まったときの知らせ(2026-10-27) */
.pw-err { color: var(--overdue); font-weight: 700; font-size: 0.88rem; }
/* 退会する(2026-10-27) */
.wd-warn { margin: 4px 0 10px; color: var(--overdue); font-weight: 800; }
.wd-list { margin: 2px 0 10px; padding-left: 1.3em; font-size: 0.9rem; line-height: 1.7; }
.wd-agree { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: 0.92rem; cursor: pointer; }
.wd-agree input { width: 18px; height: 18px; }
.qa-submit.wd-go { background: var(--overdue); border-color: var(--overdue); color: #fff; }
.qa-submit.wd-go:disabled { opacity: 0.4; cursor: default; }
/* 入力画面の下：登録の左にキャンセル(2026-10-27 ナカヤン) */
.form-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 12px; align-self: stretch; flex-wrap: wrap; }
.form-cancel { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 10px 22px; font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.form-cancel:hover { background: var(--accent-soft); }
#addView .add-foot { gap: 10px; align-items: center; }
.pw-foot > button { flex: 1; margin: 0; }
.dlg-foot .form-cancel { padding: 8px 18px; font-size: 0.9rem; }
.login-form .form-foot .form-cancel, #pwForm .form-cancel { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
/* 連絡先メール(2026-10-27) */
.email-gate { z-index: 120; background: rgba(20,16,50,0.72); }
.pw-mailcount { margin: 2px 0 8px; font-size: 0.88rem; font-weight: 700; color: var(--ink-soft); }
/* 予定への返事(2026-10-27 ナカヤン)：自分の返事で見え方を変える。未回答＝点線の枠・薄い、未定＝斜線、不参加＝薄く取り消し線 */
.cal-chip.event.rsvp-none { background: var(--panel) !important; border: 1.5px dashed var(--lc, #2f6fdb) !important; border-left-width: 3px !important; opacity: 0.9; }
.cal-chip.event.rsvp-maybe { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.75) 0 5px, transparent 5px 10px) !important; }
.cal-chip.event.rsvp-no { opacity: 0.45; }
.cal-chip.event.rsvp-no .t { text-decoration: line-through; }
.rsvp-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rsvp-btn { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; }
.rsvp-btn:hover { background: var(--accent-soft); }
.rsvp-btn.on.rsvp-b-yes { background: #e6f4ea; border-color: #2f9e5b; color: #1e6b3d; }
.rsvp-btn.on.rsvp-b-no { background: #fdecec; border-color: #d0302a; color: #9b1c1c; }
.rsvp-btn.on.rsvp-b-maybe { background: #fff6e0; border-color: #d9a400; color: #7a5a00; }
.gp-person.rsvp-p-no > div:last-child > div:first-child { text-decoration: line-through; opacity: 0.6; }
.gp-person.rsvp-p-none .gp-muted { color: var(--ink-faint); }
/* 空いている時間 */
.ev-busy { margin-top: 2px; }
.ev-busy-head { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 4px; }
.ev-busy-row { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 6px; margin: 3px 0; }
.ev-busy-name { font-size: 0.8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-busy-row.clash .ev-busy-name { color: var(--overdue); }
.ev-busy-scale { position: relative; height: 14px; font-size: 0.66rem; color: var(--ink-faint); }
.ev-busy-scale span { position: absolute; transform: translateX(-50%); font-family: var(--mono); }
.ev-busy-track { position: relative; height: 16px; background: var(--paper, #f3f2ee); border-radius: 4px; overflow: hidden; }
.ev-busy-blk { position: absolute; top: 2px; bottom: 2px; background: #8a8fa0; border-radius: 3px; }
.ev-busy-blk.allday { background: repeating-linear-gradient(135deg, #b8bcc8 0 4px, #9ea3b2 4px 8px); }
.ev-busy-pick { position: absolute; top: 0; bottom: 0; border: 2px solid #5b4fc4; border-radius: 4px; background: rgba(91,79,196,0.12); box-sizing: border-box; }
.ev-busy-na { font-size: 0.75rem; color: var(--ink-faint); }
.stamp-e.stamp-art { display: inline-flex; align-items: center; justify-content: center; height: 59px; } /* 描き起こした絵のスタンプ */
.stamp-e.stamp-art svg { width: 78px; height: 60px; display: block; }
.stamp-pick .stamp-e.stamp-art { height: auto; } .stamp-pick .stamp-e.stamp-art svg { width: 44px; height: 37px; }
.stamp-t.stamp-pop { font-size: 1.32rem; line-height: 1.12; letter-spacing: -0.06em; } /* なんでやねん！！！：大きくカラフルに(2026-10-27) */
.stamp-pop .pop-ch { display: inline-block; transform: rotate(var(--r, 0deg)); font-weight: 900; -webkit-text-stroke: 1.2px #1b1b1b; paint-order: stroke fill; text-shadow: 1px 1px 0 #1b1b1b; }
.stamp-pick .stamp-t.stamp-pop { font-size: 0.95rem; }
/* みんなのスタンプ(2026-10-27 ナカヤン) */
.stamp-img { width: 64px; height: 64px; object-fit: contain; display: block; }
.stamp-pick .stamp-img { width: 40px; height: 40px; }
.stamp-e.stamp-imgw { height: auto; }
.cst-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cst-make { border: 1px solid var(--line); background: var(--panel); color: #5b4fc4; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer; }
.cst-make:hover { background: var(--accent-soft); }
.cst-cell { position: relative; }
.cst-cell .stamp-pick { width: 100%; }
.cst-del { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); font-size: 0.75rem; line-height: 1; cursor: pointer; padding: 0; }
.cst-del:hover { background: #fdecec; color: #9b1c1c; }
.cst-empty { margin: 4px 2px 10px; font-size: 0.82rem; color: var(--ink-soft); }
.cst-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cst-fields { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.cst-fields .qa-input { width: 100%; box-sizing: border-box; min-height: 40px; }
.cst-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.cst-color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.cst-color.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--panel) inset; }
.cst-emojis { display: flex; flex-wrap: wrap; gap: 4px; }
.cst-em { width: 36px; height: 36px; font-size: 1.3rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; padding: 0; }
.cst-em.on { border-color: #5b4fc4; background: var(--accent-soft); }
.cst-imgrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.cst-note { flex: 1; min-width: 200px; font-size: 0.78rem; }
/* 🧩 みんなのスタンプの確認(管理者)：AI が隠したもの・確認に回したもの */
.cst-review { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.cst-review-img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: #fff; flex: 0 0 auto; }
.cst-review-body { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.cst-review-tag { margin-left: 8px; font-size: 0.75rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #fff4d6; color: #7a5600; }
.cst-review-tag.hidden { background: #fdecec; color: #9b1c1c; }
.cst-review-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pw-send.danger { color: #9b1c1c; border-color: #e7b4b4; }
/* みんなのスタンプ：文字の形と大きさ・画像だけ・色を自由に(2026-10-27) */
.stamp-card .stamp-t.st-cus { font-size: calc(0.95rem * var(--fs, 1)); }
.stamp-pick .stamp-t.st-cus { font-size: calc(0.66rem * var(--fs, 1)); }
.stamp-card.st-notext { background: transparent; border-color: transparent; padding: 0; width: auto; }
.stamp-card.st-notext .stamp-img { width: 120px; height: 120px; }
.stamp-pick.st-notext .stamp-img { width: 52px; height: 52px; }
.cst-colors { max-width: 100%; }
.cst-free { position: relative; overflow: hidden; display: inline-block; background: conic-gradient(#e53935, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935); }
.cst-free-in { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.cst-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.cst-opt { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 4px 10px; font-size: 0.9rem; cursor: pointer; min-height: 32px; }
.cst-opt.on { border-color: #5b4fc4; background: var(--accent-soft); box-shadow: 0 0 0 1px #5b4fc4 inset; }
/* 招待の QR コード(2026-10-28) */
.invite-qr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.invite-qr-pic { padding: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: zoom-in; line-height: 0; flex: none; }
.invite-qr-pic svg { width: 132px; height: 132px; display: block; }
.invite-qr-txt { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 4px; }
.invite-qr-big { position: fixed; inset: 0; z-index: 120; background: #fff; color: #222; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; text-align: center; }
.invite-qr-big-pic svg { width: min(78vw, 70vh, 420px); height: auto; display: block; }
.invite-qr-url { font-size: 0.85rem; color: #555; word-break: break-all; margin: 0; }
/* ステータスのランプ(2026-10-28 ナカヤン：Slack のようにアイコンの右下)。🟢 アクティブ・🟡 離席中・🔴 会議中・📅 予定あり */
.chat-item .side-av, .pres-wrap, .me-status-btn { position: relative; }
.pres-wrap { display: inline-flex; flex: none; }
.pres-dot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; pointer-events: auto; }
.pres-dot.pres-none { display: none; }
.pres-dot.pres-active { background: #2eb67d; }
.pres-dot.pres-away { background: #f2c037; }
.pres-dot.pres-call { background: #e01e5a; }
.pres-dot.pres-busy { background: #7c5cc4; }
.pres-st { font-weight: 400; }
.me-status-btn { background: transparent; border: 0; padding: 2px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.me-status-btn .chat-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 0.85rem; }
.st-now { display: flex; align-items: center; gap: 10px; }
.st-now .chat-avatar { width: 40px; height: 40px; flex-basis: 40px; }
.st-row { display: flex; align-items: center; gap: 8px; }
.st-row .qa-input { flex: 1; min-height: 40px; }
.st-emoji-now { font-size: 1.6rem; width: 40px; text-align: center; flex: none; }
body.rail-on .rail .me-status-btn, .userbar .me-status-btn { background: transparent; border: 0; box-shadow: none; padding: 2px; min-width: 0; width: auto; height: auto; }
/* 招待のボタン：同じ大きさに並べる(2026-10-28 ナカヤン) */
.invite-box .pw-send-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.invite-box .pw-send-btns > * { width: 100%; min-height: 50px; margin: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; text-align: center; border-radius: 999px; }
/* 左下の自分のアイコンと ⚙ を中央に(2026-10-28 ナカヤン) */
body.rail-on .rail .gear-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
/* カレンダー：ほかの人の予定(空き時間)を並べる(2026-10-28 ナカヤン)。中身は見えない「予定あり」だけ */
.cal-person-sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.cal-person-name { flex: 1 1 auto; min-width: 0; }
.cal-person-x { border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 1rem; padding: 0 4px; }
.cal-person-x:hover { color: #9b1c1c; }
.cal-person-add { margin-top: 4px; border: 1px dashed var(--line); background: transparent; color: #5b4fc4; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; text-align: left; }
.cal-person-add:hover { background: var(--accent-soft); }
.cal-people-note { margin: 4px 0 0; font-size: 0.74rem; color: var(--ink-soft); line-height: 1.4; }
.cal-pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.cal-pick-row { display: flex; align-items: baseline; gap: 8px; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 8px 10px; font: inherit; cursor: pointer; }
.cal-pick-row:hover { border-color: #5b4fc4; background: var(--accent-soft); }
.tg-who { display: block; font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-dh-person { display: flex; align-items: center; justify-content: center; gap: 6px; border-bottom: 3px solid var(--pc); }
.tg-dh-person .tg-who { color: var(--ink); font-size: 0.9rem; }
.tg-person-sw { width: 10px; height: 10px; border-radius: 3px; background: var(--pc); flex: none; }
.tg-col-person { background-color: color-mix(in srgb, var(--pc) 4%, transparent); } /* 時間の線(background-image)は残す */
.tg-busy { position: absolute; left: 4px; right: 4px; border-radius: 6px; box-sizing: border-box; padding: 2px 6px; overflow: hidden; pointer-events: none; z-index: 2; font-size: 0.76rem; line-height: 1.3;
border: 1px solid color-mix(in srgb, var(--pc) 55%, #fff); color: color-mix(in srgb, var(--pc) 80%, #000);
background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pc) 22%, #fff) 0 6px, color-mix(in srgb, var(--pc) 10%, #fff) 6px 12px); }
.tg-busy-t { display: block; font-weight: 700; }
.tg-busy-ad { font-size: 0.74rem; font-weight: 700; padding: 2px 6px; border-radius: 6px; color: color-mix(in srgb, var(--pc) 80%, #000); background: color-mix(in srgb, var(--pc) 16%, #fff); }
.tg-busy-stripe { position: absolute; width: 5px; border-radius: 3px; background: var(--pc); opacity: 0.85; z-index: 3; }
/* ステータスの窓：アクティブ／離席中を2つ並べる(2026-10-28 ナカヤン) */
.st-away-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-away-btn { min-height: 46px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.st-away-btn:hover { border-color: #5b4fc4; }
.st-away-btn.on { border-color: #2f6f5e; background: #e3f2ec; color: #1f5747; box-shadow: 0 0 0 1px #2f6f5e inset; }
/* スマホのカレンダー：日の表示を大きく・左右になぞって前後へ(2026-10-28 ナカヤン) */
@media (max-width: 640px) {
.tg-day .tg-ev .t { font-size: 0.95rem; line-height: 1.3; word-break: normal; overflow-wrap: anywhere; }
.tg-day .tg-ev-time { display: block; font-size: 0.8rem; }
.tg-day .tg-ev { padding: 4px 6px !important; }
.tg-day .tg-hl { font-size: 0.8rem; }
.tg-day .tg-allday { font-size: 0.9rem; }
.tg-day .tg-busy { font-size: 0.9rem; }
}
.cal-swipe-next { animation: cal-swipe-next 0.22s ease; }
.cal-swipe-prev { animation: cal-swipe-prev 0.22s ease; }
@keyframes cal-swipe-next { from { transform: translateX(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes cal-swipe-prev { from { transform: translateX(-40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cal-swipe-next, .cal-swipe-prev { animation: none; } }
/* スマホのカレンダーは、時刻と天気の欄を出さない(2026-10-28 ナカヤン) */
@media (max-width: 640px) { .cal-controls .cal-now { display: none !important; } }
/* TODO の上のボタン(未完了・表示・並び・まとめて編集)を同じ大きさに(2026-10-28 ナカヤン)。PC は横1列でいちばん長いものに合わせ、スマホは2列 */
#mod-tasks .filters-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: max-content; max-width: 100%; }
#mod-tasks .filters-row > * { min-width: 0; }
#mod-tasks .filters-row .state-filter, #mod-tasks .filters-row .state-filter-btn { width: 100%; box-sizing: border-box; }
#mod-tasks .filters-row .state-filter-btn { text-align: center; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
#mod-tasks .filters-row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; }
#mod-tasks .filters-row .state-filter-btn { min-height: 46px; }
}
/* スマホの TODO の行：期限・大項目などを左下の空き(「完了にする」の下)に出し、タスクの文が下まで使えるように(2026-10-28 ナカヤン) */
@media (max-width: 640px) {
.td-row:not(.td-edit) { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "mv done text acts" "mv sub text acts" "open open open open"; grid-template-rows: auto 1fr auto; column-gap: 8px; row-gap: 4px; align-items: start; } /* 長い文の高さは下の段で受ける */
.td-row:not(.td-edit) .td-main { display: contents; }
.td-row:not(.td-edit) .td-move, .td-row:not(.td-edit) .td-sel { grid-area: mv; align-self: start; }
.td-row:not(.td-edit) .td-done-btn { grid-area: done; }
.td-row:not(.td-edit) .td-text { grid-area: text; }
.td-row:not(.td-edit) .td-sub { grid-area: sub; contain: inline-size; width: 100%; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 0; font-size: 0.76rem; min-height: 0; }
.td-row:not(.td-edit) .td-sub > * { max-width: 100%; }
.td-row:not(.td-edit) .td-sub .td-tag { margin-left: 0; }
.td-row:not(.td-edit) .td-row-acts { grid-area: acts; }
.td-row:not(.td-edit) .td-open { grid-area: open; }
}
/* スマホの ⚙／あなた のメニュー：後ろに幕をかけて透けないように(2026-10-28 ナカヤン) */
.gear-backdrop { display: none; }
@media (max-width: 640px) { .gear-backdrop.on { display: block; position: fixed; inset: 0; z-index: 79; background: #1c1936; } }
/* スマホの ⚙／あなた のメニューを画面いっぱいに・大きく(2026-10-28 ナカヤン) */
@media (max-width: 640px) {
.gear-menu { left: 0; right: 0; top: env(safe-area-inset-top); bottom: calc(76px + env(safe-area-inset-bottom)); max-height: none; border-radius: 0 0 16px 16px; padding: 12px 10px; gap: 4px; }
.userbar .gear-menu button, .userbar .gear-menu .gear-cat { font-size: 1.06rem; padding: 15px 14px; min-height: 54px; }
.userbar .gear-menu .gear-sep { margin: 6px 0; }
}
/* TODO の「表示するプロジェクト」：すべて(2026-10-28) */
.proj-opt-all { border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 2px; font-weight: 700; }
/* 資料の出す期間(2026-10-28 ナカヤン) */
.dash-link-span-l { width: 100%; font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px; }
.dash-link-spans { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.dash-link-span { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.dash-link-span.on { border-color: #5b4fc4; background: var(--accent-soft); color: #3c3489; box-shadow: 0 0 0 1px #5b4fc4 inset; }
.dash-link-range { display: flex; align-items: center; gap: 6px; width: 100%; }
.dash-link-range .qa-input { flex: 1; min-width: 0; }
.dash-link-until { font-size: 0.78rem; color: #7a5cc4; font-weight: 700; white-space: nowrap; }
/* スマホの入力まわり(2026-10-28 ナカヤン：キーボード・入力欄が大きく会話や「登録しました」が見えない) */
.add-submit-top { display: none; }
#addView .add-confirm { margin: 0 0 10px; }
@media (max-width: 640px) {
#addView .add-header { display: flex; align-items: center; gap: 8px; }
#addView .add-header h1 { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
#addView .add-header .back-btn { flex: 0 0 auto; white-space: nowrap; }
#addView .add-submit-top { display: inline-flex; align-items: center; justify-content: center; width: auto !important; min-width: 0; margin: 0 0 0 auto; padding: 8px 16px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; }
#addView .add-foot { display: none; }
.chat-composer-box .chat-input { min-height: 40px; padding-top: 9px; padding-bottom: 7px; }
/* AI 秘書の例文：1行で横にずらす。書いている間は隠す */
.ai-examples { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ai-examples::-webkit-scrollbar { display: none; }
.ai-examples > * { flex: 0 0 auto; white-space: nowrap; }
.chat-composer-box:focus-within .ai-examples { display: none; }
}
/* スマホ：指で触った行に「マウスを載せたとき」の色が残り、開いていた会話と2つ選ばれているように見えた(2026-10-28 ナカヤン)。
色を変えるのはマウスのある端末だけ */
@media (hover: none) {
body:not(.rail-on) .chat-item:not(.active):hover { background: none; color: var(--ink-soft); }
body.rail-on .chat-side .chat-item:not(.active):hover { background: transparent; }
}
/* スマホ：「この端末の通知」の表示と「設定」ボタンを大きく(2026-10-28 ナカヤン)。高さ 33px → 46px 前後、文字 13px → 15px */
@media (max-width: 640px) {
.side-notify { min-height: 46px; margin: 8px 0 6px; padding: 7px 8px 7px 12px; font-size: 0.95rem; border-radius: 12px; }
.side-notify-go { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--accent); font-size: 0.9rem; font-weight: 700; white-space: nowrap; }
}
/* スマホのプロジェクトの選び方(2026-10-28 ナカヤン：チャットのプロジェクトの選ぶ欄を分かりやすく・ダッシュボードへの行き方)
・チャットの画面：上の帯の選ぶ欄は出さず、一覧のいちばん上に「📁 プロジェクト名 ▾」と「📊 ダッシュボード」を並べる(選んでもチャットのまま)
・ホーム：いちばん上にチャットと同じ「📁 プロジェクト名 ▾」(🏠 ホームと共有プロジェクトから選ぶ)。「← ホーム」はその代わりに出さない */
.side-proj-row { display: flex; gap: 8px; align-items: stretch; margin: 0 0 8px; }
.side-proj-row .side-proj { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); font: inherit; font-size: 1rem; font-weight: 800; text-align: left; cursor: pointer; }
.side-proj-row .side-proj-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-proj-row .side-proj-caret { flex: none; color: var(--ink-soft); font-size: 0.85rem; }
.side-proj-dash { display: flex; align-items: center; gap: 3px; flex: none; min-height: 44px; padding: 6px 10px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 0.86rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
body:not(.rail-on) .side-proj-ic { flex: none; }
body.rail-on .side-proj-ic { display: none; }
.dash-proj-row { margin: 0 0 12px; }
@media (max-width: 640px) {
body.tab-chat #appView > .userbar #workspaceSelect { display: none; }
#mod-dash .dash-proj-row ~ .dash-head .dash-home-link { display: none; }
}
/* 背景とエフェクト：アイコンのボタン(エフェクト・イラスト)は小さく(2026-10-28 ナカヤン：ボタンが大きい)。正方形 → 高さ 58px ほど、1列に4つ以上。
写真の背景と、表示の「顔の位置」はそのまま */
.fx-grid:has(> .fx-tile.icon:not(.pos)) { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.fx-tile.icon:not(.pos) { aspect-ratio: auto; min-height: 58px; padding: 6px 4px; gap: 3px; border-radius: 10px; }
.fx-tile.icon:not(.pos) .fx-ic { font-size: 1.15rem; }
.fx-tile.icon:not(.pos) .fx-cap { font-size: 0.74rem; line-height: 1.25; }
/* 通話・オンラインMTGの最中に読み込み直したとき、入り直すまでの幕(js/resume-early.js。2026-10-28 ナカヤン)
後ろの画面を押せないように全体をおおう。入り直せたら「✅ 戻りました」を少し見せて消える */
.voice-resume-cover { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px;
background: rgba(16, 18, 20, 0.88); color: #fff; touch-action: none; }
.voice-resume-cover .vrc-box { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; max-width: 420px; }
.voice-resume-cover .vrc-title { font-size: 1.15rem; font-weight: 800; line-height: 1.5; }
.voice-resume-cover .vrc-sub { font-size: 0.9rem; opacity: 0.8; }
.voice-resume-cover .vrc-spin { width: 36px; height: 36px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.25); border-top-color: #EF9F27; animation: vrc-spin 0.9s linear infinite; }
.voice-resume-cover.done .vrc-spin { display: none; }
@keyframes vrc-spin { to { transform: rotate(360deg); } }
/* ふつうの更新(オンラインMTG・通話の外)の幕は少し薄く。つながったら 0.2秒で消す */
.voice-resume-cover.reload { background: rgba(16, 18, 20, 0.72); transition: opacity 0.2s; }
.voice-resume-cover.reload.out { opacity: 0; }
/* 「入力欄(または選ぶ欄)＋ボタン1つ」の .quickadd は、スマホでも1行に(2026-10-28 ナカヤン：「アカウントを選ぶ」の枠が大きすぎる)
幅480px以下の .quickadd は縦並びになり、プロジェクトの設定の選ぶ欄は直接書いていた幅 200px が高さとして効いて 200px の箱になっていた。
ほかの同じ形(プロジェクトの名前・対応者の名簿・プロフィールの表示名とひとこと・チャンネルやグループの名前)も、入力欄の下に全幅のボタンが付いていた。
入力欄は残りの幅いっぱい・ボタンは文字の幅にし、高さは 44px にそろえる(指で押しやすく、iPhone で拡大されない 16px)。
項目の多い入力(TODO の登録・.form-col)は、これまでどおり縦に並べる */
@media (max-width: 640px) {
.quickadd:not(.form-col):has(> :first-child:is(input, select)):has(> .qa-submit:nth-child(2):last-child) { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
.quickadd:not(.form-col):has(> :first-child:is(input, select)):has(> .qa-submit:nth-child(2):last-child) > :first-child { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; min-height: 44px; font-size: 16px; box-sizing: border-box; }
.quickadd:not(.form-col):has(> :first-child:is(input, select)):has(> .qa-submit:nth-child(2):last-child) > .qa-submit { flex: 0 0 auto; width: auto; min-width: 72px; min-height: 44px; padding: 0 16px; }
/* 参加者の札の「×」・チェックは、指で押せる大きさに */
.ws-mem .chip-x { min-width: 32px; min-height: 32px; margin: -4px -6px -4px 0; font-size: 1.1rem; }
#wsView input[type=checkbox] { width: 20px; height: 20px; flex: none; }
#wsView .icon-btn { min-height: 40px; padding: 0 14px; }
}
/* プロフィールの窓の「表示名・ひとこと＋保存」は、設定の画面と同じく枠なしに(枠の中に枠が重なって見えるため) */
.guest-modal .quickadd:not(.form-col) { background: transparent; border: 0; padding: 0; }
/* 二段階認証の設定の窓(2026-10-29 ナカヤン) */
.tfa-box .tfa-on { font-weight: 800; color: var(--accent); }
.tfa-box .tfa-admin { background: #fff4e0; border: 1px solid #f0c27a; border-radius: 8px; padding: 8px 10px; font-size: 0.86rem; }
.tfa-box .tfa-steps { margin: 6px 0 10px; padding-left: 1.3em; font-size: 0.88rem; line-height: 1.7; }
.tfa-box .tfa-qr { display: flex; justify-content: center; margin: 8px 0; }
.tfa-box .tfa-qr svg { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 8px; }
.tfa-box .tfa-secret { font-family: var(--mono); font-size: 1rem; letter-spacing: 0.06em; background: var(--bg); border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; word-break: break-all; user-select: all; }
.tfa-box .tfa-fields { display: flex; flex-direction: column; gap: 6px; }
.tfa-box .tfa-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.tfa-box .tfa-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 8px 0; }
.tfa-box .tfa-codes code { font-family: var(--mono); font-size: 0.98rem; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; text-align: center; }
.tfa-box .tfa-danger { background: var(--overdue) !important; }
.pw-tfa { color: #2f6f5e; }
/* ==== ログイン画面：E「余白と線」(2026-10-29 ナカヤン決定。BeeXy のトンマナ：墨 #22201D・朱 #A34B37・生成り #EFEAE0 の3色だけ) ====
生成りの地に薄い六角の線、細い墨の線の枠だけ。角を丸めない・影もグラデーションも付けない。マークは明るい地用、名前は墨で X だけ朱 */
#loginView { background-color: #EFEAE0 !important; background-image: url("data:image/svg+xml;utf8,") !important; background-size: 56px 97px !important; color: #22201D; }
#loginView .login-page { padding-top: min(9vh, 64px) !important; }
#loginView .login-logo { flex-direction: column; gap: 8px; font-size: 2.2rem; }
#loginView .login-logo .hive-mark { width: 72px; height: 72px; }
#loginView .login-logo .bx-word { color: #22201D; }
#loginView .login-logo .bx-x { color: #A34B37; }
#loginView .login-reading { color: #6b655c; letter-spacing: 0.3em; }
#loginView .login-tagline { color: #22201D; font-size: 1.1rem; font-weight: 600; }
#loginView .login-what { background: none !important; -webkit-text-fill-color: #4a453d !important; color: #4a453d !important; font-weight: 600; }
#loginView .login-please { color: #6b655c; }
#loginView .login-form { background: transparent; border: 1px solid #22201D; border-radius: 0; box-shadow: none; }
#loginView .login-form .field-label { color: #22201D; }
#loginView .login-form .sub, #loginView .login-form .signup-check { color: #6b655c; }
#loginView .login-form input { background: #fff; border-color: #22201D; border-radius: 0; color: #22201D; }
#loginView .login-form input:focus { border-color: #A34B37; box-shadow: 0 0 0 2px rgba(163,75,55,0.18); }
#loginView .login-form button[type="submit"] { background: #22201D; color: #EFEAE0; border-radius: 0; box-shadow: none; }
#loginView .login-form button[type="submit"]:hover { filter: none; background: #3a3631; }
#loginView .login-form .login-signup-link { border-top-color: #cfc8ba !important; }
#loginView .login-signup-q { color: #6b655c; }
#loginView .login-error { color: #A34B37; }
#loginView .login-lang { color: #6b655c; }
#loginView .login-lang select { background: transparent; border-color: #22201D; color: #22201D; border-radius: 0; }
#loginView .login-lang select option { color: #22201D; }
.login-credit { color: #8a8378; }
.login-credit strong { color: #22201D; }
.login-credit .credit-s { color: #A34B37; } /* S だけ朱(2026-10-29 トンマナ正典 v0.6。BeeXy の X だけ朱と同じ決まり)。2026-11-04 BeeSide → BeeStudio */
/* BeeStudio のハチ(beestudio.page の .bee-flap と同じ絵。2コマを切り替えて羽だけ羽ばたく。2026-11-04 ナカヤン) */
.login-credit .credit-bee { --s: 22px; display: inline-block; width: var(--s); height: var(--s); margin-right: 6px; vertical-align: -5px;
background: url("/credit-bee-flap.png") 0 0 / calc(var(--s) * 2) var(--s) no-repeat; animation: credit-bee-flap 0.2s steps(1) infinite; }
@keyframes credit-bee-flap { 50% { background-position: calc(var(--s) * -1) 0; } }
@media (prefers-reduced-motion: reduce) { .login-credit .credit-bee { animation: none; } }
#loginView .login-form .login-link:not(.login-signup-link), #loginView .login-form .login-signup-link .login-signup-go { color: #22201D !important; background: transparent !important; border-color: #22201D !important; border-radius: 0 !important; }
#loginView .login-form .login-link:not(.login-signup-link):hover, #loginView .login-form .login-signup-link:hover .login-signup-go { color: #EFEAE0 !important; background: #22201D !important; }
#loginView input[type="checkbox"] { accent-color: #22201D; }
/* エフェクトのタブ：5つを1行に(2026-10-29 ナカヤン：セピアを足した。ボタンを少し小さく) */
.fx-grid.fx-grid-5:has(> .fx-tile.icon:not(.pos)) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fx-grid-5 .fx-tile.icon:not(.pos) { min-height: 52px; padding: 5px 2px; }
.fx-grid-5 .fx-tile.icon:not(.pos) .fx-ic { font-size: 1.05rem; }
.fx-grid-5 .fx-tile.icon:not(.pos) .fx-cap { font-size: 0.7rem; white-space: nowrap; }
/* チャンネルの見出しのプロジェクト名の札(2026-10-29 ナカヤン：どのプロジェクトか目立つように) */
.chat-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-title-row > strong { flex: 0 1 auto; min-width: 0; }
.chat-proj-pill { flex: 0 1 auto; min-width: 0; display: inline-block; padding: 4px 14px; border-radius: 999px; color: #fff; font-weight: 800; font-size: 0.95rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 3px rgba(0,0,0,0.18); text-shadow: 0 1px 1px rgba(0,0,0,0.22); }
.chat-proj-pill.light { color: #22201D; text-shadow: none; }
@media (min-width: 641px) { .chat-title-row { flex: 0 1 auto; } .chat-title-row > strong { flex-shrink: 0; } .chat-proj-pill { max-width: 460px; } }
/* スマホは見出しが狭く札がつぶれるので出さない(送り先は入力欄の案内で見せる) */
@media (max-width: 640px) { .chat-proj-pill { display: none; } }
/* みんなのスタンプの「✏ 直す」(左上。右上の × と同じ形。2026-10-29 ナカヤン) */
.cst-edit { position: absolute; top: -4px; left: -4px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); font-size: 0.7rem; line-height: 1; cursor: pointer; padding: 0; z-index: 1; }
.cst-edit:hover { background: #eef4ff; color: #1a4fb0; }
/* 利用者の一覧：ふつう｜チャットだけ(無料) の切り替え。いまの方に色(2026-10-29 ナカヤン) */
.pw-user-row .pw-co-seg { margin-left: auto; display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
.pw-co-opt { border: 0; background: var(--panel); color: var(--ink-soft); font: inherit; font-size: 0.85rem; font-weight: 700; padding: 6px 14px; cursor: pointer; white-space: nowrap; }
.pw-co-opt + .pw-co-opt { border-left: 1px solid var(--line); }
.pw-co-opt:hover:not(.on) { background: #eef4f1; color: var(--ink); }
.pw-co-opt.on { background: #2f6f5e; color: #fff; cursor: default; }
.pw-co-opt.on:last-child { background: #1d5a96; }
/* ⚙ のメニューを開いているあいだは、左下に浮かぶ「← 〇〇に戻る」を隠す(メニューと重なるため。2026-10-29 ナカヤン) */
body.gear-open .memo-back-btn { display: none !important; }
/* 「🔎 知り合いを探す・申請」は1行に。届いた申請の数は、ボタンの右上の角に重ねる(文字の幅を取らない。2026-10-29 ナカヤン) */
.side-find { position: relative; }
.side-find > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.side-find .side-find-n { position: absolute; top: -7px; right: -5px; margin: 0; }
/* 左の列のプロジェクトの四角：未読の数を右上の角に(2026-10-30 ナカヤン) */
.rail-proj { position: relative; }
.rail-proj-n { position: absolute; top: -5px; right: -7px; min-width: 18px; padding: 1px 5px; box-sizing: border-box; border-radius: 10px; background: var(--overdue); color: #fff; font-size: 0.68rem; font-weight: 800; line-height: 1.4; letter-spacing: 0; text-align: center; box-shadow: 0 0 0 2px #26215C; pointer-events: none; }
body.rail-on .rail-projects { padding: 7px 8px 6px; }
/* ダッシュボードの「💬 # 全体」：未読の数を右上の角に(2026-10-30 ナカヤン) */
.dash-main-btn { position: relative; }
.dash-main-btn .chat-unread-n { position: absolute; top: -7px; right: -6px; margin: 0; }
/* オンラインMTG：参加者のタイル(2026-10-30 ナカヤン：全員の顔を小さく。共有中は共有画面の横に小さく) */
.mtg-tiles { display: flex; gap: 6px; z-index: 4; }
.mtg-tiles.grid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -58%); flex-wrap: wrap; justify-content: center; width: min(92%, 640px); }
.mtg-tiles.strip { position: absolute; right: 8px; top: 8px; flex-direction: column; max-height: calc(100% - 16px); overflow-y: auto; scrollbar-width: none; }
.mtg-tile { position: relative; width: 150px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #1f2a2c; border: 2px solid rgba(255,255,255,0.18); flex: 0 0 auto; transition: border-color 0.15s; }
.mtg-tiles.grid.n1 .mtg-tile, .mtg-tiles.grid.n2 .mtg-tile { width: 220px; }
.mtg-tiles.strip .mtg-tile { width: 120px; }
.mtg-tile.speaking { border-color: #4ade80; }
.mtg-tile-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mtg-tile-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: #cfe0da; background: #2b3a3d; }
.mtg-tile-name { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 3px; padding: 2px 6px; font-size: 0.72rem; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.65)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtg-tile-name .voice-chip-mic svg { width: 1.1em; height: 1.1em; }
.mtg-screen > .mtg-empty { position: absolute; left: 0; right: 0; bottom: 14%; margin: 0 auto; padding: 8px 16px; font-size: 0.85rem; }
.mtg-stage.size-s .mtg-tile, .mtg-stage.size-s .mtg-tiles.strip .mtg-tile { width: 84px; }
@media (max-width: 640px) {
.mtg-tiles.grid { width: 96%; }
.mtg-tile, .mtg-tiles.grid.n1 .mtg-tile, .mtg-tiles.grid.n2 .mtg-tile { width: calc(50% - 4px); }
.mtg-tiles.strip { right: 6px; left: 6px; top: auto; bottom: 6px; flex-direction: row; overflow-x: auto; max-height: none; }
.mtg-tiles.strip .mtg-tile { width: 88px; }
}
/* コンタクト：項目ごとの枠(2026-10-30 ナカヤン：境目を分かりやすく・ボタンの右端をそろえる) */
.contacts-panel { max-width: 920px; }
.cbox { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 12px 16px; margin: 0 0 14px; }
.cbox-h { display: flex; align-items: center; gap: 8px; font-size: 0.98rem; margin: 0 0 8px; }
.cbox-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; background: var(--overdue); color: #fff; font-size: 0.78rem; font-weight: 800; }
.cbox-sub { margin: -4px 0 4px; }
.cbox-set { background: #f4f3f0; }
.cbox-set .find-box { margin: 0; justify-content: space-between; }
.cbox-alert { background: #fff8e1; border: 2px solid #e8b021; box-shadow: 0 2px 10px rgba(232, 176, 33, 0.18); }
.cbox-alert .cbox-h { font-size: 1.05rem; color: #7a4b00; }
.cbox-alert .person-row { border-bottom-color: #f0dca8; }
.cbox .person-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.cbox-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.cbox-row > .sub { margin: 0; flex: 1 1 auto; min-width: 0; }
.cbox-row > button { flex: 0 0 auto; white-space: nowrap; }
.cbox .contact-find { max-width: none; margin: 8px 0 4px; padding: 0; border: 0; background: transparent; }
.person-acts { margin-left: auto; }
@media (max-width: 640px) {
.cbox { padding: 10px 12px; }
.cbox-row { flex-direction: column; align-items: stretch; gap: 6px; }
.cbox-row > button { align-self: flex-end; }
}
.mtg-screen.tiles-strip { padding-right: 140px; box-sizing: border-box; }
.mtg-stage.size-s .mtg-screen.tiles-strip { padding-right: 100px; }
@media (max-width: 640px) { .mtg-screen.tiles-strip { padding-right: 0; padding-bottom: 64px; } }
.cbox .contact-find .contact-q { max-width: none; } /* 探す欄も枠の右端までのばす(右端の線をそろえる) */
@media (max-width: 640px) { .cbox-set .find-sel { width: 100%; } }
/* 「入力欄＋ボタン」の行(.quickadd)：入力欄を行いっぱいにのばし、ボタンの右端を見出しの線・ほかの欄の右端にそろえる(2026-10-30 ナカヤン：縦の線をそろえる)
プロジェクトの設定・パスワード・利用者の一覧(前は入力欄 440px で止めていた)と、窓の中(プロフィールの表示名・ひとことなど) */
#wsView .quickadd > input, #wsView .quickadd > select, #pwView .quickadd > input, #pwAdminView .quickadd > input, #pwAdminView .quickadd > select { flex: 1 1 auto; width: auto; max-width: none; }
.guest-modal .quickadd:not(.form-col) { display: flex; gap: 8px; align-items: center; }
.guest-modal .quickadd:not(.form-col) > :first-child:is(input, select) { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
.guest-modal .quickadd:not(.form-col) > .qa-submit:last-child { flex: 0 0 auto; }
/* 2026-10-30 ナカヤン：画面の点検で見つかった、そろっていない所 */
/* タイムラインの「投稿する」は右端(入力欄の右端にそろえる。.qa-submit の左の余白に負けていた) */
.fp-compose .fp-tools .fp-post-btn { margin-left: auto; }
/* Google カレンダー連携の「アドレスを作る」は「つなぐ」と同じ幅いっぱい */
.gcal-full { display: block; width: 100%; }
@media (max-width: 640px) {
/* 「← 〇〇に戻る」は下の帯(ホーム・TODO…)の上に出す(帯にかぶっていた) */
body:not(.chat-focus) .memo-back-btn { bottom: calc(70px + env(safe-area-inset-bottom)); }
/* 窓の下のボタン(キャンセル｜保存 など)は1行に同じ幅で並べる(キャンセルが上・保存が下に分かれていた) */
.dlg-foot { flex-wrap: nowrap; }
.dlg-foot > button { flex: 1 1 0; width: auto; min-width: 0; min-height: 44px; margin: 0; }
}
/* MTG：送る画質の試し(管理者だけ)と、タイルの届いている画質(2026-10-30 ナカヤン：上限を上げたときと見比べる) */
.fx-bps-row { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: #b9c7c2; }
.fx-bps-range { flex: 1 1 auto; min-width: 0; accent-color: #7be0aa; }
.fx-bps-now { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 0.85rem; color: #eef3f1; }
.fx-bps-now .chat-link-btn { margin-left: auto; }
.fx-bps-est { color: #b9c7c2; font-size: 0.78rem; }
.fx-bps-stats { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 0.8rem; color: #eef3f1; line-height: 1.5; }
.mtg-tile-stat { position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.66rem; font-weight: 700; font-family: var(--mono); pointer-events: none; }
/* チャットの一覧：# 全体の後ろのプロジェクト名(2026-10-30 ナカヤン) */
.chat-item-name .ch-proj { font-weight: 600; opacity: 0.85; }
/* 発言のメニュー：削除を編集のすぐ下に(2026-10-30 ナカヤン)。上下に線を引いて、ほかの操作と分ける */
.act-menu .act-item.danger { border-radius: 0; }
.act-menu .act-item.danger + .act-item { border-top: 1px solid var(--line); border-radius: 0; margin-top: 2px; }
.act-sheet .act-item.danger:not(:last-child) { border-bottom: 1px solid var(--line); }
/* 左の列：隠れたプロジェクトの四角に未読があるときの札(2026-10-30 ナカヤン) */
.rail-more { position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border: 0; border-radius: 10px; background: var(--overdue); color: #fff; font: inherit; font-size: 0.62rem; font-weight: 800; line-height: 1.3; white-space: nowrap; cursor: pointer; box-shadow: 0 0 0 2px #26215C, 0 2px 6px rgba(0,0,0,0.35); }
.rail-more:hover, .rail-more:focus-visible { filter: brightness(1.1); outline: none; }
/* オンラインMTG：相手の顔を、自分の顔(小窓)より大きく(2026-10-31 ナカヤン：共有中、PC で自分の枠が大きく、相手の枠が小さかった) */
.mtg-selfcam { width: min(160px, 26%); }
.mtg-tiles.strip .mtg-tile { width: 200px; }
.mtg-screen.tiles-strip { padding-right: 216px; }
.mtg-stage.size-s .mtg-selfcam { width: 84px; }
@media (max-width: 640px) {
.mtg-selfcam { width: 96px; }
.mtg-tiles.strip .mtg-tile { width: 128px; }
.mtg-screen.tiles-strip { padding-right: 0; padding-bottom: 84px; }
}
/* ゲストの画面のボタン：暗い背景に埋もれないよう、明るい緑に(2026-10-31 ナカヤン) */
.guest-card .qa-submit { background: #7be0aa; color: #10231a; border-radius: 10px; box-shadow: 0 4px 14px rgba(123,224,170,0.25); }
.guest-card .qa-submit:hover, .guest-card .qa-submit:focus-visible { background: #93ecbd; outline: none; }
.guest-card .qa-submit:disabled { background: #4b5a56; color: #c9d4d0; box-shadow: none; cursor: default; }
/* オンラインMTG の下の帯(2026-10-31 ナカヤン：スマホで小さくて押しにくい・オンオフが分かりにくい) */
/* マイク・ビデオ：オン＝緑の地、オフ＝赤の地。アイコンの右上に「オン」「オフ」の札 */
.zm-btn.tg-on { background: rgba(61,220,132,0.16); }
.zm-btn.tg-on .zm-ic { color: #3ddc84; }
.zm-btn.tg-off { background: rgba(255,90,95,0.18); }
.zm-btn.tg-on:hover { background: rgba(61,220,132,0.24); }
.zm-btn.tg-off:hover { background: rgba(255,90,95,0.26); }
.zm-state { position: absolute; top: 3px; left: calc(50% + 8px); padding: 0 4px; border-radius: 999px; font-size: 0.6rem; font-weight: 800; line-height: 1.45; white-space: nowrap; pointer-events: none; }
.zm-state.tg-on { background: #3ddc84; color: #0b2a18; }
.zm-state.tg-off { background: #ff5a5f; color: #fff; }
/* 設定を開く「^」(2026-10-31 ナカヤン：PC で押しづらい)：幅 18px → 30px、薄い地を付けてボタンに見えるように */
.zm-caret { width: 30px; height: 58px; padding: 0; display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; background: rgba(255,255,255,0.06); color: #dfe7e4; border-radius: 8px; }
.zm-caret:hover, .zm-caret:focus-visible { background: rgba(255,255,255,0.16); color: #fff; outline: none; }
.zm-caret svg { display: block; }
/* 開いているメニュー(チャット・参加者など)は、上に緑の線 */
.zm-btn.on { background: rgba(255,255,255,0.14); box-shadow: inset 0 3px 0 #3ddc84; }
@media (max-width: 640px) {
.zm-btn, .zm-bar.small .zm-btn { height: 64px; padding: 4px 1px 2px; gap: 4px; border-radius: 10px; }
.zm-btn .zm-ic { height: 26px; }
.zm-btn .zm-ic svg { width: 26px; height: 26px; }
.zm-btn .zm-label, .zm-bar.small .zm-label { font-size: 0.7rem; font-weight: 700; max-width: 100%; overflow: hidden; }
.zm-bar.small { gap: 2px; }
.zm-caret { display: none; }
.zm-state { top: 2px; left: calc(50% + 6px); font-size: 0.62rem; }
}
/* オンラインMTG：キーボードが出ても、チャットの入力欄と「送る」を見えるところに残す(2026-10-31 ナカヤン)
2. 高さは 100vh ではなく 100dvh(キーボード・アドレスバーを除いた高さ)。iPhone は voice.js が visualViewport の高さ(--mtg-vh)を入れる。
映す所(.mtg-screen)は flex: 1 と min-height: 0 で縮み、チャットの欄はその下の端に付いたまま */
.mtg-stage:not(.size-s) { inset: auto 0 auto 0; top: var(--mtg-vtop, 0px); height: 100vh; height: 100dvh; height: var(--mtg-vh, 100dvh); }
.mtg-stage .mtg-screen { flex: 1 1 auto; min-height: 0; }
.mtg-stage.size-s { max-height: calc(var(--mtg-vh, 100dvh) - 32px); }
/* 4. チャットに書いている間は、下の帯を隠す(スマホ・タブレット) */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
body.mtg-typing .mtg-stage .mtg-foot { display: none; }
}
/* 左の列：隠れているプロジェクトの数の札(未読が無いとき。2026-10-31 ナカヤン：画面を小さくすると、ほかのプロジェクトがあることが分からない) */
.rail-more.plain { background: #7F77DD; color: #fff; }
/* オンラインMTG のチャット：送るの横の「閉じる」(スマホ・タブレットだけ。2026-10-31 ナカヤン：書いたあと、チャットを消して画面に戻りたい) */
.mtg-log-hide { display: none; }
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
.mtg-log-hide { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 28px; padding: 0 12px; margin-left: 2px; border: 1px solid rgba(255,255,255,0.45); border-radius: 999px; background: rgba(20,26,27,0.75); color: #fff; font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; text-shadow: none; }
.mtg-log .mtg-log-close { font-size: 1.5rem; padding: 2px 10px; }
}
@media (max-width: 640px) { .mtg-screen.log-open .mtg-empty { visibility: hidden; } }
/* MTG(2026-10-31 ナカヤン)
・PC で自分の映像を相手の映像の枠の下へ動かすと、マウスでつかめなくなった(自分の映像 z-index 2 が枠 4 の下)。
自分の映像を枠より上に。チャットの欄は自分の映像より上のまま。画面の中の重なりは画面の中だけで決まるように(isolation)。
画面の外(上の帯・下の帯・下の帯から出るメニュー)には影響しない(画面は overflow: hidden で外に出ない)
・スマホで指2本で拡大されないように(MTG を大きく開いている間。画面共有の拡大は画面の + − で) */
.mtg-stage .mtg-screen { isolation: isolate; }
.mtg-stage .mtg-selfcam { z-index: 5; }
.mtg-stage .mtg-log, .mtg-stage .mtg-zoom { z-index: 6; }
.mtg-stage:not(.size-s) { touch-action: pan-x pan-y; }
/* 左の列(2026-10-31 ナカヤン)：画面の高さを小さくすると、プロジェクトの欄だけが縮み、メニューは縮まなかった。
両方を同じ割合で縮め(元の高さに比例)、それぞれ上下に動かせるようにする。どちらも最低1つは見える。隠れた分は「▲／▼ ほか N」 */
@media (min-width: 900px) {
body.rail-on .rail .rail-projects { flex: 0 1 auto; min-height: 44px; }
body.rail-on .rail .tabs-row { flex: 0 1 auto; min-height: 58px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; justify-content: flex-start; flex-wrap: nowrap; }
body.rail-on .rail .tabs-row::-webkit-scrollbar { display: none; }
body.rail-on .rail .tabs-row > * { flex: 0 0 auto; }
}
/* 2026-10-31 ナカヤン：スマホで TODO を完了にすると、下のタスクの「完了にする」が選ばれた見た目(緑・✓)になった。
iPhone は指を離したあとも :hover が残り、消えた行の場所に上がってきたボタンに当たっていた。マウスの無い端末では、載せたときの見た目を出さない */
@media (hover: none) {
.td-done-btn:not(.on):hover, .td-done-btn.over:hover, #mod-dash .dash-check.td-done-btn:hover, #mod-dash .dash-check.td-done-btn.over:hover { border-color: var(--line); color: var(--ink-soft); background: var(--panel); }
.td-done-btn:not(.on):hover::before { content: ''; border-color: #9aa3ad; background: #fff; }
.td-done-btn.over:not(.on):hover::before { border-color: var(--overdue); }
}
@media (hover: none) and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .td-done-btn:not(.on):hover { background: var(--panel); color: var(--ink-soft); }
}
/* 会社の枠(2026-10-31 ナカヤン)：⚙ の「🏢 会社」の小窓と、プロジェクトの設定の「会社」の欄 */
.co-line { margin: 0 0 4px; font-weight: 700; }
.co-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; }
.co-pick > select { flex: 0 0 auto; min-width: 240px; max-width: 100%; }
.co-lab { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); margin-top: 4px; }
.co-sec h2 { display: flex; align-items: center; gap: 8px; }
.co-del { margin-top: 10px; border-color: var(--overdue); color: var(--overdue); }
.guest-modal .co-body .mtg-section { margin: 12px 0 0; }
/* 同じ部屋(2026-10-31 ナカヤン) */
.mtg-same-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; margin: 2px 0 6px; border-radius: 8px; background: rgba(61,220,132,0.14); font-size: 0.85rem; font-weight: 700; }
.mtg-same-btn { white-space: nowrap; }
.mtg-ear-btn.on { background: #3ddc84; color: #0b2a18; border-color: #3ddc84; }
.mtg-ear-btn.suggest { box-shadow: 0 0 0 2px #f5c542; }
.mtg-same-me { flex: 1 0 100%; font-weight: 400; font-size: 0.8rem; opacity: 0.9; }
/* 同じ部屋のガイド(2026-10-31 ナカヤン) */
.same-guide { z-index: 95; }
.same-guide-lead { margin: 10px 0 4px; padding: 8px 10px; border-radius: 8px; background: #fff4d6; color: #5a4300; font-weight: 700; font-size: 0.92rem; }
.same-guide-list { margin: 8px 0 12px; padding-left: 1.2em; line-height: 1.7; }
.same-guide-list li { margin: 2px 0; }
.same-guide-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.mtg-same-help { align-self: flex-start; }
/* テーマ管理と定例(PoC・手元だけ。2026-10-31 ナカヤン) */
.th-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.th-head h1 { margin: 0; font-size: 1.3rem; }
.th-poc { font-size: 0.75rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #fff4d6; color: #7a5b00; }
.th-seg { margin-left: auto; display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.th-seg button { border: 0; background: var(--panel); padding: 6px 14px; font: inherit; font-weight: 700; cursor: pointer; color: var(--ink-soft); }
.th-seg button.on { background: #534AB7; color: #fff; }
.th-note { margin: 6px 0 10px; }
.th-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.th-bar .sub { margin: 0; }
.th-empty { padding: 18px; border: 1px dashed var(--line); border-radius: 10px; text-align: center; }
.th-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; }
.th-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.th-table th { text-align: left; font-size: 0.78rem; color: var(--ink-soft); background: var(--paper); padding: 8px 8px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.th-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.th-table tr:last-child td { border-bottom: 0; }
.th-table tr.st-3 td { color: var(--ink-faint); }
.th-c { text-align: center; }
.th-no { color: var(--ink-soft); }
.th-title { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; white-space: normal; min-width: 12em; }
.th-title:hover { text-decoration: underline; }
.th-phase { font-size: 0.82rem; }
.th-due.late { color: var(--overdue); font-weight: 800; }
.th-lv { display: inline-block; min-width: 1.8em; padding: 1px 6px; border-radius: 6px; font-size: 0.8rem; font-weight: 800; text-align: center; }
.th-lv.lv-3 { background: #fde2e1; color: #b3261e; }
.th-lv.lv-2 { background: #fff1cc; color: #7a5b00; }
.th-lv.lv-1 { background: #e6f0ff; color: #2a5bb8; }
.th-st { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: var(--paper); }
.th-st.st-1 { background: #e3f6ea; color: #1f7a45; }
.th-st.st-2 { background: #f1ecff; color: #534AB7; }
.th-doc { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; cursor: pointer; padding: 1px 6px; font-size: 1rem; }
.th-doc.none { border: 0; background: transparent; color: var(--ink-faint); cursor: default; }
.th-form { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.th-row { display: flex; flex-direction: column; gap: 4px; }
.th-row .sub { margin: 0; }
.th-lab { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.th-no-in { max-width: 6em; }
.th-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.th-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.th-del { border-color: var(--overdue); color: var(--overdue); margin-right: auto; }
.th-mlist { display: flex; flex-direction: column; gap: 6px; }
.th-mrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font: inherit; text-align: left; cursor: pointer; flex-wrap: wrap; }
.th-mrow .sub { margin: 0 0 0 auto; }
.th-mdate { font-weight: 800; }
.th-gh { font-size: 1rem; margin: 16px 0 6px; }
.th-ag { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0 0 8px; background: var(--panel); }
.th-ag-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.th-ag-top .sub { margin: 0 0 0 auto; }
.th-ag-title { font-weight: 800; }
.th-ag-ctl { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px; font-size: 0.85rem; align-items: center; }
.th-ag-ctl label { display: inline-flex; align-items: center; gap: 4px; }
.th-mini { width: auto; min-width: 0; padding: 3px 6px; font-size: 16px; }
.th-todos { margin: 6px 0 4px; padding-left: 0; list-style: none; font-size: 0.9rem; }
.th-todos li.done { color: var(--ink-faint); text-decoration: line-through; }
.th-todo-add { margin-top: 4px; }
.th-todo-form { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.th-todo-form .qa-input:first-child { flex: 1 1 240px; }
.th-addag { margin-top: 12px; }
.th-ag-ctl label { white-space: nowrap; }
.th-prev { margin: 6px 0 2px; padding: 6px 10px; border-radius: 8px; background: #fff8e6; }
.th-prev-h { font-size: 0.8rem; font-weight: 800; color: #7a5b00; }
.th-prev .th-todos { margin: 2px 0 0; }
.th-bar .qa-submit { width: auto; flex: 0 0 auto; }
/* パスキー・メールの番号でログイン(2026-10-31 ナカヤン) */
.login-alt { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; }
#loginView .login-form .login-alt-btn { background: #fff !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; font-weight: 700; }
#loginView .login-form .login-alt-btn:hover { background: #f3f1ea !important; }
.pk-list { display: flex; flex-direction: column; gap: 6px; }
.pk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.pk-row .sub { margin: 0; flex: 1 1 auto; }
.pk-name { font-weight: 700; }
.pk-del { border-color: var(--overdue); color: var(--overdue); }
.pk-h { font-size: 0.95rem; margin: 14px 0 6px; }
/* 一番上に戻る(2026-10-31 ナカヤン) */
.to-top { position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 69; border: 0; border-radius: 999px; background: #26215C; color: #fff; font: inherit; font-size: 0.9rem; font-weight: 800; padding: 10px 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.25); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 0.15s, transform 0.15s; }
.to-top.on { opacity: 1; pointer-events: auto; transform: none; }
body.gear-open .to-top, body.mtg-open .to-top { display: none; }
.to-top.stack { bottom: calc(132px + env(safe-area-inset-bottom)); }
@media (max-width: 640px) { .to-top { bottom: calc(80px + env(safe-area-inset-bottom)); right: 12px; } .to-top.stack { bottom: calc(132px + env(safe-area-inset-bottom)); } }
/* パスキーを一番上に(2026-10-31 ナカヤン：主の位置へ) */
.login-pk { margin: 0 0 4px; }
#loginView .login-form .login-pk-btn { width: 100%; margin-top: 0; background: #A34B37; color: #fff; border-radius: 0; box-shadow: none; }
#loginView .login-form .login-pk-btn:hover { opacity: 1; background: #8e3f2d; }
.login-pk-note { font-size: 0.8rem; color: #6b655c; margin: 6px 0 0; line-height: 1.5; }
.login-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 2px; font-size: 0.8rem; color: #6b655c; }
.login-or::before, .login-or::after { content: ""; flex: 1; border-top: 1px solid #cfc8ba; }
.login-pk-note span { display: inline-block; }
/* パスキーへの切り替え(段階2)：ボタンが3つになるので縦に並べ、ログアウトは一番下 */
.pk-switch .dlg-foot { flex-wrap: wrap !important; }
.pk-switch .dlg-foot > button { flex: 1 1 100% !important; }
.pk-switch .dlg-foot > .pk-sw-logout { order: 9; }
/* 1対1の会話の上の相手の名前：押すとその人のメニュー(呼び名・メモ・外す・ブロック。2026-11-01) */
.chat-title-btn { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.chat-title-btn:hover strong { text-decoration: underline; }
.chat-title-caret { font-size: 0.75em; opacity: 0.6; }
.chat-title-warn { display: block; font-size: 0.8rem; color: var(--overdue, #A34B37); margin-top: 2px; }
/* スマホの下の帯の「その他」：下から出る板。上に帯に出ないタブ(アイコン)、下に あなた・並びを変える */
.mob-more-overlay { position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,0.35); display: flex; align-items: flex-end; }
.mob-more-sheet { width: 100%; max-height: 80vh; overflow-y: auto; background: var(--panel); border-radius: 16px 16px 0 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0,0,0,0.18); }
.mob-more-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.mob-more-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px 8px; border: 0; border-radius: 12px; background: none; color: var(--ink-soft); font-family: var(--body); font-size: 0.74rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.mob-more-item.active { color: #3C3489; background: var(--accent-soft); }
.mob-more-ic { width: 26px; height: 26px; background: currentColor; -webkit-mask: var(--ic) no-repeat center / contain; mask: var(--ic) no-repeat center / contain; }
.mob-more-item .tab-badge { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; }
.mob-more-rows { display: flex; flex-direction: column; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.mob-more-row { text-align: left; padding: 12px 8px; border: 0; border-radius: 8px; background: none; color: var(--ink); font-family: var(--body); font-size: 0.95rem; font-weight: 700; cursor: pointer; }
.mob-more-row:active, .mob-more-item:active { background: var(--accent-soft); }
.tab-order-note.tab-order-bar { color: #3C3489; font-weight: 700; }
/* 規約・ポリシーへのリンク(2026-11-02)：⚙ の中は他の項目(button)と同じ見た目、ログインの前の画面は小さく下に並べる */
.userbar .gear-menu a.gear-link { display: block; white-space: nowrap; padding: 9px 12px; font-family: var(--sans, inherit); font-size: 0.88rem; color: var(--ink); border-radius: 6px; text-decoration: none; }
.userbar .gear-menu a.gear-link:hover { background: var(--accent-soft); }
@media (max-width: 640px) { .userbar .gear-menu a.gear-link { font-size: 1.06rem; padding: 15px 14px; min-height: 54px; box-sizing: border-box; } }
.login-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 14px 0 0; font-size: 0.8rem; }
.login-legal a { color: #8a8378; text-decoration: underline; text-underline-offset: 2px; }
.login-legal a:hover { color: #22201D; }
/* 入力欄の上の小さな欄(絵文字・予約送信)を開いている間は、会話の見出しより前に出す(2026-11-03 ナカヤン：切り替えが見出しに隠れた) */
.chat-composer-box.pop-open { z-index: 8 !important; }
/* オンラインMTGのビデオの大きさの段(管理者だけ。全員に効く。2026-11-03 ナカヤン) */
.fx-cam { display: flex; flex-direction: column; gap: 6px; }
.fx-cam .fx-group-h { margin-bottom: 2px; }
.fx-cam-row { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: #eef3f1; border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 0.88rem; cursor: pointer; text-align: left; }
.fx-cam-row.on { border-color: #7be0aa; background: rgba(123,224,170,0.14); }
.fx-cam-name { font-weight: 700; white-space: nowrap; }
.fx-cam-cost { margin-left: auto; color: #b9c7c2; font-size: 0.8rem; white-space: nowrap; }
.fx-cam-row.on .fx-cam-cost { color: #c9f3dc; }
/* オンラインMTG：ビデオの大きさの段に合わせて、顔の枠も大きく(2026-11-03 ナカヤン。--cam-s は voice.js が段から入れる：当初1・1段1.4・2段1.8・3段2.2。PC だけ。小(右下の小窓)はそのまま) */
@media (min-width: 641px) {
.mtg-stage .mtg-selfcam { width: min(calc(160px * var(--cam-s, 1)), 45%); }
.mtg-stage .mtg-tile { width: calc(150px * var(--cam-s, 1) * var(--tile-z, 1)); max-width: 46%; }
.mtg-stage .mtg-tiles.grid.n1 .mtg-tile, .mtg-stage .mtg-tiles.grid.n2 .mtg-tile { width: calc(220px * var(--cam-s, 1) * var(--tile-z, 1)); }
.mtg-stage .mtg-tiles.grid { width: min(92%, calc(640px * var(--cam-s, 1) * var(--tile-z, 1))); }
.mtg-stage .mtg-tiles.strip .mtg-tile { width: min(calc(200px * var(--cam-s, 1) * var(--tile-z, 1)), calc(34vw * var(--tile-z, 1))); max-width: none; }
.mtg-stage .mtg-screen.tiles-strip { padding-right: calc(min(calc(200px * var(--cam-s, 1) * var(--tile-z, 1)), calc(34vw * var(--tile-z, 1))) + 16px); }
.mtg-stage.size-s .mtg-selfcam, .mtg-stage.size-s .mtg-tile, .mtg-stage.size-s .mtg-tiles.strip .mtg-tile { width: 84px; }
.mtg-stage.size-s .mtg-screen.tiles-strip { padding-right: 100px; }
}
/* オンラインMTG：相手の窓の大きさ 小・中・大(2026-11-04 ナカヤン：見ている人が相手の顔を大きくしたい。この端末だけ。--tile-z は voice.js が入れる：小0.7・中1・大1.8。PC の幅は上の段の指定に掛ける) */
.mtg-head-tools .mtg-tilez .mtg-sizes-label, .mtg-stage .mtg-head .mtg-tilez .mtg-sizes-label { font-size: 0.76rem; color: #b9c7c2; padding: 0 4px 0 12px; white-space: nowrap; }
/* 大きくしても画面からはみ出さないよう、並びの高さに上限を付け、あふれた分は縦に動かす */
.mtg-stage .mtg-tiles.grid { max-height: 84%; overflow-y: auto; scrollbar-width: thin; }
/* 4人のときは 2×2 に並べる(2026-11-04 ナカヤン：横に3人＋1人より正方形に。スマホはもともと2列) */
@media (min-width: 641px) {
.mtg-stage .mtg-tiles.grid.n4 { width: min(92%, calc(2 * 150px * var(--cam-s, 1) * var(--tile-z, 1) + 6px)); }
.mtg-stage .mtg-tiles.grid.n4 .mtg-tile { max-width: calc(50% - 3px); }
}
@media (max-width: 640px) {
.mtg-stage[data-tile-z="S"] .mtg-tiles.grid .mtg-tile { width: calc(33.3% - 4px); }
.mtg-stage[data-tile-z="L"] .mtg-tiles.grid .mtg-tile { width: 100%; }
.mtg-stage .mtg-tiles.strip .mtg-tile { width: calc(128px * var(--tile-z, 1)); }
}