:root {
  --ink: #1e1f24;
  --muted: #7b7f8c;
  --line: #e7e8eb;
  --paper: #fff;
  --canvas: #f7f8fa;
  --rail: #f2f3f5;
  --primary: #4f46e5;
  --primary-dark: #3730a3;
  --success: #12a36d;
  --danger: #db4261;
  font-family: Inter, "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

/* Deep-gray theme: dark without using a pure-black canvas. */
:root { color-scheme: dark; --ink: #e9eaf0; --muted: #a4a8b3; --line: #3d414b; --paper: #292c33; --canvas: #1d2025; --rail: #25282f; --primary: #938bff; --primary-dark: #756df0; --success: #38c98b; --danger: #f1788d; }
:root { --theme-primary: var(--primary); }
body, .app-shell { color: var(--ink) !important; background: var(--canvas) !important; }
.topbar, .auth-card, .workspace-layout, .main-workspace { border-color: var(--line) !important; background: var(--paper) !important; }
.icon-button, .secondary-button { border-color: #4a4d59 !important; background: #37354f !important; color: var(--primary) !important; }
.auth-card input, .sidebar-search, .compose-row input, .task-form input, .task-form textarea, .post-form input, .post-form textarea, .post-form select { border-color: #474b56 !important; background: #30333a !important; color: var(--ink) !important; }
.auth-card input[readonly] { cursor: not-allowed; color: var(--muted) !important; background: var(--surface-alt) !important; }
.app-rail { border-color: var(--line) !important; background: var(--rail) !important; }.rail-button:hover, .rail-button.active { background: #37354f !important; }.workspace-sidebar { border-color: var(--line) !important; background: #25282f !important; }
.workspace-nav-item, .chat-room { color: var(--muted) !important; }.workspace-nav-item:hover, .workspace-nav-item.active, .chat-room:hover, .chat-room.active { background: #343941 !important; color: var(--ink) !important; }.nav-item-icon, .sidebar-section-heading, .small-plus, .sidebar-note { color: var(--muted) !important; }
.header-icon, .room-header-action { color: var(--muted) !important; }.header-icon:hover, .room-header-action:hover { background: #37354f !important; color: var(--primary) !important; }
.category-search { border-color: #4a4d59 !important; background: #30333a !important; }.category-search button:hover { background: #37354f !important; }
.schedule-card, .home-card, .post, .task { border-color: #444852 !important; background: #30333a !important; }.schedule-calendar-button, .refresh-button, .home-link, .module-add { border-color: #4b4d66 !important; background: #393752 !important; color: var(--primary) !important; }.schedule-item { border-color: #41454f !important; }
.home-card-icon, .home-notice-icon, .room-icon, .room-header-avatar { background: #3b3858 !important; color: var(--primary) !important; }.home-notice { background: #30313f !important; }.message p { background: #383c45 !important; }.post-category, .post-delete { background: #3a3d46 !important; color: var(--muted) !important; }
.task .check { border-color: #707684 !important; background: #343840 !important; }.task.done strong { color: #858a98 !important; }.delete { color: #a8adba !important; }.more-menu { border-color: #4a4d59 !important; background: #25282f !important; }.more-menu button { color: var(--muted) !important; }.mobile-nav { border-color: var(--line) !important; background: #24272d !important; }.compose-row { background: linear-gradient(0deg, var(--paper) 72%, transparent) !important; }.filter.active-filter, .board-filter:hover, .board-filter.active-board-filter, .global-search-category { background: #393752 !important; }.global-search-item:hover { background: #30333a !important; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; background: var(--canvas); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; }
button:disabled { cursor: default; opacity: .55; }
.app-shell { width: 100%; min-height: 100vh; }
.topbar { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 12px 28px; border-bottom: 1px solid var(--line); background: var(--paper); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark, .auth-brand .brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(140deg, var(--theme-primary), var(--primary-dark)); color: #fff; font-size: 19px; font-weight: 800; box-shadow: 0 7px 15px color-mix(in srgb, var(--primary) 18%, transparent); }
.brand h1 { margin: 0; font-size: 17px; }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.icon-button { width: 35px; height: 35px; border-radius: 9px; color: var(--primary); background: #f1f1ff; font-size: 20px; }

.auth-card { width: min(100% - 30px, 410px); margin: 62px auto; display: grid; gap: 13px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 12px 35px #1d24400e; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.auth-brand > div { display: grid; gap: 2px; }.auth-brand strong { font-size: 15px; }.auth-brand span { color: var(--muted); font-size: 11px; }
.auth-card h2 { margin: 5px 0 0; font-size: 22px; }.auth-card > p { margin: -5px 0 5px; color: var(--muted); font-size: 13px; line-height: 1.5; }
#auth-form { display: grid; gap: 11px; }.auth-card label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }.auth-card input { width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 10px; outline-color: var(--primary); color: var(--ink); background: var(--paper); }.auth-card form button { min-height: 46px; margin-top: 3px; border-radius: 11px; background: var(--primary); color: #fff; font-weight: 700; }.auth-card form button:hover { background: var(--primary-dark); }
.auth-username-field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.auth-username-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.auth-username-row input { min-width: 0; }
.auth-card form .auth-username-check { min-height: 43px !important; margin: 0 !important; padding: 0 11px; border: 1px solid var(--accent-border) !important; border-radius: 9px !important; background: var(--accent-surface) !important; color: var(--ink) !important; font-size: 11px; white-space: nowrap; }
.auth-card form .auth-username-check:disabled { opacity: .65; }
.auth-username-status { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.auth-username-status[data-state="available"] { color: var(--success); }
.auth-username-status[data-state="taken"], .auth-username-status[data-state="error"] { color: var(--danger); }
.auth-password-hint { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.4; }
.email-verification-field { display: grid; gap: 6px; }
.email-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 5px; }
.email-code-row input { min-width: 0; }
.email-code-row button { min-height: 43px !important; margin-top: 0 !important; padding: 0 9px; border-radius: 9px; font-size: 10px; white-space: nowrap; }
.email-verification-status { min-height: 16px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.email-verification-status.verified { color: var(--success); font-weight: 800; }
.email-verification-help { min-height: 15px; margin: -5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; text-align: center; }
.kakao-button { width: 100%; min-height: 46px; margin-top: -1px; border: 0; border-radius: 11px; color: #191919; background: #fee500; font-weight: 800; }.kakao-button:hover { background: #f3d900; }.kakao-button:disabled { cursor: default; opacity: .78; }
.google-login-button { width: 100%; min-height: 46px; margin-top: -1px; border-radius: 11px; font-weight: 700; }
.kakao-verification-status { min-height: 16px; margin: 2px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; text-align: center; }.kakao-verification-status.verified { color: var(--success); font-weight: 800; }
.auth-invite-note { padding: 9px 10px; border: 1px solid var(--accent-border, var(--line)); border-radius: 9px; color: var(--primary); background: var(--accent-surface, transparent); font-size: 11px; line-height: 1.4; }
.text-button { width: fit-content; padding: 7px 2px; color: var(--primary); background: transparent; font-size: 12px; font-weight: 700; }.secondary-button { padding: 7px 9px; border: 1px solid #d9dcf0; border-radius: 8px; background: #f5f5ff; color: var(--primary); font-size: 11px; font-weight: 700; }

#app-content { width: 100%; }
.workspace-layout { display: grid; grid-template-columns: 62px 272px minmax(0, 1fr); min-height: calc(100vh - 68px); background: var(--paper); }
.app-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-right: 1px solid var(--line); background: var(--rail); }
.rail-logo { display: grid; place-items: center; width: 37px; height: 37px; margin-bottom: 15px; border-radius: 12px; background: var(--primary); color: #fff; font-size: 18px; font-weight: 800; }
.rail-button { position: relative; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 12px; color: #8d919c; background: transparent; font-size: 19px; }.rail-button:hover, .rail-button.active { color: var(--primary); background: #e4e4ff; }.rail-icon { line-height: 1; }.rail-count { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 1px 3px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 9px; text-align: center; }.rail-spacer { flex: 1; }
.workspace-sidebar { display: flex; flex-direction: column; min-width: 0; padding: 21px 14px 14px; border-right: 1px solid var(--line); background: #fbfbfc; }
.workspace-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 18px; }.workspace-heading > div { display: grid; gap: 4px; }.workspace-kicker, .content-kicker, .module-header span { color: #a0a4ae; font-size: 10px; font-weight: 800; letter-spacing: .08em; }.workspace-heading strong { font-size: 17px; }.more-button { color: var(--muted); background: transparent; font-size: 18px; }
.sidebar-search { display: flex; align-items: center; gap: 7px; min-height: 35px; margin-bottom: 13px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: #f5f5f7; font-size: 13px; }.sidebar-search span { flex: 1; font-size: 12px; }.sidebar-search kbd { color: #a4a7b0; font-size: 9px; }
.workspace-nav { display: grid; gap: 3px; }.workspace-nav-item { display: flex; align-items: center; gap: 10px; min-height: 39px; padding: 0 10px; border-radius: 8px; color: #626671; background: transparent; text-align: left; font-size: 13px; }.workspace-nav-item:hover, .workspace-nav-item.active { color: var(--ink); background: #e9f0f6; font-weight: 700; }.nav-item-icon { width: 18px; color: #979ba5; text-align: center; font-size: 17px; }.workspace-nav-item.active .nav-item-icon { color: var(--primary); }.nav-count { margin-left: auto; color: var(--primary); font-size: 11px; font-weight: 800; }
.sidebar-section { margin-top: 25px; }.sidebar-section-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 9px 7px; color: #9296a0; font-size: 11px; font-weight: 800; }.small-plus { color: #9a9ea8; background: transparent; font-size: 17px; }.chat-room { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 37px; padding: 0 9px; border-radius: 8px; color: #5e626d; background: transparent; text-align: left; font-size: 13px; }.chat-room:hover, .chat-room.active { color: var(--ink); background: #edf1f5; font-weight: 700; }.room-icon, .room-header-avatar { display: grid; place-items: center; flex: none; width: 25px; height: 25px; border-radius: 8px; background: #dddafe; color: var(--primary); font-size: 12px; font-weight: 800; }.room-name { flex: 1; }.room-count { color: var(--primary); font-size: 10px; }.muted-section { margin-top: 17px; }.sidebar-note { margin: 4px 9px; color: #b1b4bd; font-size: 11px; line-height: 1.5; }
.sidebar-spacer { flex: 1; min-height: 20px; }.identity-card { position: relative; display: grid; grid-template-columns: 31px 1fr; gap: 8px; align-items: center; margin-top: 13px; padding: 10px 7px; border-top: 1px solid var(--line); }.member-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: #e2e1ff; color: var(--primary); font-weight: 800; }.member-copy { display: grid; min-width: 0; gap: 2px; }.member-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.member-copy span { color: var(--muted); font-size: 10px; }.member-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding-top: 4px; }.invite-result { grid-column: 1 / -1; width: 100%; margin: 2px 0 0; padding-top: 8px; border-top: 1px solid var(--line); color: var(--primary); font-size: 11px; font-weight: 700; }

.main-workspace { min-width: 0; padding: 0 32px 30px; background: var(--paper); }.content-header { display: flex; align-items: center; justify-content: space-between; min-height: 78px; border-bottom: 1px solid var(--line); }.content-header > div:first-child { display: grid; gap: 4px; }.content-header h2 { margin: 0; font-size: 20px; }.content-actions { display: flex; gap: 5px; }.header-icon, .room-header-action { width: 32px; height: 32px; border-radius: 8px; color: #858994; background: transparent; font-size: 19px; }.header-icon:hover, .room-header-action:hover { color: var(--primary); background: #f0f1ff; }
body.calendar-page .main-workspace > .content-header { display: none; }
.category-search { display: flex; align-items: center; gap: 8px; margin: 12px 0 -1px; padding: 0 11px; border: 1px solid #d9dcf0; border-radius: 9px; color: var(--primary); background: #fafaff; }.category-search input { min-width: 0; flex: 1; padding: 10px 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }.category-search input::placeholder { color: #a4a7b0; }.category-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }.category-search button { width: 24px; height: 24px; border-radius: 50%; color: var(--muted); background: transparent; font-size: 17px; }.category-search button:hover { color: var(--primary); background: #ededff; }
.schedule-card { margin: 18px 0 17px; padding: 15px 17px; border: 1px solid #e3e6f3; border-radius: 13px; background: #fcfcff; box-shadow: 0 3px 11px #2536600b; }.section-heading { display: flex; align-items: center; justify-content: space-between; }.section-heading > div:first-child { display: grid; gap: 3px; }.section-heading span { color: var(--muted); font-size: 10px; font-weight: 800; }.section-heading h2 { margin: 0; font-size: 16px; }.schedule-actions { display: flex; align-items: center; gap: 6px; }.schedule-calendar-button { min-height: 30px; padding: 0 10px; border-radius: 8px; background: #e5e4ff; color: var(--primary); font-size: 11px; font-weight: 800; }.refresh-button { width: 30px; height: 30px; border-radius: 8px; background: #f0f1ff; color: var(--primary); font-size: 18px; }.schedule-list { margin-top: 9px; max-height: 110px; overflow: auto; }.schedule-group + .schedule-group { margin-top: 9px; }.schedule-group h3 { margin: 0 0 4px; color: var(--primary); font-size: 11px; }.schedule-item { display: flex; gap: 12px; padding: 7px 4px; border-top: 1px solid #eef0f5; }.schedule-item time { width: 43px; flex: none; color: var(--muted); font-size: 10px; }.schedule-item strong { display: block; font-size: 12px; }.schedule-item span { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }.schedule-card .empty { margin: 10px 0 1px; }

.panel { display: none; }.active-panel { display: block; }.room-header { display: flex; align-items: center; gap: 10px; padding: 7px 0 16px; border-bottom: 1px solid var(--line); }.room-header > div:nth-child(2) { flex: 1; }.room-header h3 { margin: 0 0 3px; font-size: 15px; }.room-header p { margin: 0; color: var(--muted); font-size: 11px; }.room-header-action { flex: none; }
.home-header { align-items: center; }.home-header p strong { color: var(--primary); }.home-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 18px; }.home-card { display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 86px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); text-align: left; box-shadow: 0 4px 13px #25366008; transition: transform .15s, border-color .15s, box-shadow .15s; }.home-card:hover { border-color: #cfd1f5; box-shadow: 0 7px 17px #25366012; transform: translateY(-1px); }.home-card-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: #e7e6ff; color: var(--primary); font-size: 18px; font-weight: 800; }.home-card > span:last-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-width: 0; gap: 2px 9px; }.home-card small { grid-column: 1; color: var(--muted); font-size: 10px; font-weight: 700; }.home-card strong { grid-column: 2; grid-row: 1 / span 2; font-size: 23px; line-height: 1.1; }.home-card em { grid-column: 1; color: var(--primary); font-size: 10px; font-style: normal; font-weight: 700; }.home-notice { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 14px; border-radius: 11px; background: #f7f7ff; }.home-notice-icon { display: grid; place-items: center; flex: none; width: 21px; height: 21px; border-radius: 50%; background: #dedcff; color: var(--primary); font-size: 12px; font-weight: 800; }.home-notice strong { font-size: 12px; }.home-notice p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.home-task-section { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }.home-link { padding: 6px 8px; border-radius: 7px; color: var(--primary); background: #f0f1ff; font-size: 11px; font-weight: 800; }.home-task-list { max-height: 190px; margin-top: 9px; padding-right: 4px; overflow: auto; }.home-task { margin: 7px 0; padding: 10px 12px; }.home-task .task-info { margin-top: 3px; }
.home-search-results { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }.search-result-count { color: var(--muted); font-size: 11px; }.global-search-group { margin-top: 14px; }.global-search-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }.global-search-heading > span { color: var(--muted); font-size: 10px; }.global-search-category { padding: 5px 8px; border-radius: 6px; color: var(--primary); background: #e9e8ff; font-size: 11px; font-weight: 800; }.global-search-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; width: 100%; margin: 5px 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--paper); text-align: left; }.global-search-item:hover { border-color: #cfd1f5; background: #fafaff; }.global-search-item strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.global-search-item span { grid-column: 1 / -1; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.global-search-item small { color: var(--muted); font-size: 10px; }
.messages { min-height: 350px; padding: 8px 3px; }.message { display: flex; gap: 10px; max-width: 780px; margin: 16px 0; animation: appear .2s ease-out; }.avatar { display: grid; place-items: center; flex: none; width: 33px; height: 33px; border-radius: 10px; background: #e2e1ff; color: var(--primary); font-size: 12px; font-weight: 800; }.message-body { min-width: 0; }.message-meta { display: flex; align-items: baseline; gap: 8px; }.message strong { font-size: 13px; }.message time { color: var(--muted); font-size: 10px; }.message-time { display: block; margin-top: 4px; padding: 0 8px; text-align: left; }.message.mine .message-time { text-align: right; }.message p { width: fit-content; max-width: min(650px, calc(100vw - 155px)); margin: 5px 0 0; padding: 11px 13px; border-radius: 3px 12px 12px; background: #f5f6f8; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; font-size: 13px; }.compose-row { position: sticky; bottom: 0; display: flex; gap: 7px; padding-top: 10px; background: linear-gradient(0deg, #fff 72%, transparent); }.compose-row input { min-width: 0; flex: 1; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; outline-color: var(--primary); background: var(--paper); font-size: 13px; }.compose-row button, .task-form > button { min-height: 43px; padding: 0 16px; border-radius: 9px; background: var(--primary); color: #fff; font-weight: 700; font-size: 12px; }.file-button { display: grid; place-items: center; width: 43px; flex: none; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--primary); font-size: 22px; }.file-button input { display: none; }.attachment-name { min-height: 17px; padding: 3px; color: var(--muted); font-size: 11px; }.attachment { display: block; width: min(380px, 100%); margin-top: 7px; border-radius: 9px; overflow: hidden; }.attachment img, .attachment video { display: block; width: 100%; max-height: 320px; object-fit: cover; background: #202333; }.attachment-link { display: block; width: fit-content; margin-top: 7px; color: var(--primary); font-size: 12px; text-decoration: none; }

.module-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 8px 0 19px; border-bottom: 1px solid var(--line); }.module-header > div:first-child { display: grid; gap: 5px; }.module-header h3 { margin: 0; font-size: 18px; }.module-header p { margin: 0; color: var(--muted); font-size: 11px; }.module-add { padding: 9px 12px; border: 1px solid #dbddf3; border-radius: 8px; color: var(--primary); background: #f5f5ff; font-size: 11px; font-weight: 800; }
.panel-actions { display: flex; justify-content: flex-end; margin-top: 13px; }
.task-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 17px; }.task-form input, .task-form textarea, .post-form input, .post-form textarea, .post-form select { min-width: 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 9px; outline-color: var(--primary); background: var(--paper); font-size: 12px; }.task-form > textarea { min-height: 82px; max-height: 180px; resize: vertical; overflow-y: auto; line-height: 1.45; }.task-fields { display: flex; grid-column: 1 / -1; gap: 8px; }.task-fields input { width: 50%; }.task-fields > #task-assignee { flex: 0 0 46%; width: 46%; }.task-fields > .date-field { position: relative; flex: 1; min-width: 0; }.task-fields > .date-field input { width: 100%; }.date-field::before { content: "날짜"; position: absolute; top: 50%; left: 13px; z-index: 1; padding-right: 5px; transform: translateY(-50%); color: #a4a7b0; background: var(--paper); font-size: 12px; pointer-events: none; }.date-field:focus-within::before, .date-field.has-value::before { display: none; }.task-toolbar { display: flex; flex-wrap: wrap; gap: 5px; margin: 16px 0 8px; }.filter { padding: 7px 10px; border-radius: 99px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; }.filter.active-filter { color: var(--primary); background: #e7e6ff; }.tasks { min-height: 250px; }.task { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }.check { flex: none; width: 20px; height: 20px; margin-top: 1px; border: 2px solid #bec4d5; border-radius: 6px; background: #fff; }.task.done .check { border-color: var(--success); background: var(--success); }.task.done .check::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 800; }.task-main { flex: 1; min-width: 0; }.task-main strong { display: block; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 13px; }.task.done strong { color: #9aa2b7; text-decoration: line-through; }.task-info { margin-top: 5px; color: var(--muted); font-size: 10px; }.task-info span { display: inline-block; margin-right: 9px; }.task-info .overdue { color: var(--danger); font-weight: 700; }.delete { width: 24px; height: 24px; border-radius: 7px; color: #9ca4b8; background: transparent; font-size: 18px; }
.board-layout { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 18px; margin-top: 18px; }.board-nav { padding: 0 9px; border-right: 1px solid var(--line); }.board-filter { display: block; width: 100%; margin-bottom: 3px; padding: 10px; border-radius: 8px; color: var(--muted); background: transparent; text-align: left; font-size: 12px; font-weight: 700; }.board-filter:hover, .board-filter.active-board-filter { color: var(--primary); background: #e7e6ff; }.board-content { min-width: 0; }.post-form { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }.post-fields { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; }.post-form textarea { min-height: 105px; resize: vertical; line-height: 1.5; }.post-form button { min-height: 41px; border-radius: 9px; background: var(--primary); color: #fff; font-weight: 700; font-size: 12px; }.post { position: relative; margin: 12px 0; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }.post-meta { display: flex; align-items: baseline; gap: 7px; padding-right: 42px; }.post-category { padding: 4px 6px; border-radius: 5px; background: #f0f1f8; color: var(--muted); font-size: 10px; }.post-meta strong { font-size: 13px; }.post-meta time { color: var(--muted); font-size: 10px; }.post p { margin: 9px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; font-size: 12px; }.post-delete { position: absolute; top: 11px; right: 11px; padding: 5px 7px; border-radius: 7px; color: var(--muted); background: #f2f3f8; font-size: 10px; }
.empty { color: var(--muted); font-size: 12px; }.toast { position: fixed; left: 50%; bottom: 22px; z-index: 15; transform: translate(-50%, 20px); padding: 10px 14px; border-radius: 9px; background: #222b43; color: #fff; opacity: 0; pointer-events: none; transition: .2s; font-size: 12px; box-shadow: 0 6px 20px #18213a45; }.toast.visible { opacity: 1; transform: translate(-50%, 0); }.mobile-nav { display: none; }.more-menu { position: fixed; top: 78px; right: 9px; z-index: 14; display: grid; width: 185px; padding: 9px; border: 1px solid var(--line); border-radius: 13px; background: #fffffff7; box-shadow: 0 10px 30px #1d24402b; backdrop-filter: blur(12px); }.more-menu strong { padding: 5px 9px 8px; color: var(--muted); font-size: 11px; }.more-menu button { display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 9px; border-radius: 8px; color: #616572; background: transparent; text-align: left; font-size: 12px; }.more-menu button:hover { color: var(--primary); background: #f0f1ff; }.more-menu button span { flex: 1; }
@keyframes appear { from { opacity: 0; transform: translateY(4px); } }
.more-menu button small { margin-left: auto; min-width: 16px; color: var(--primary); font-size: 9px; font-weight: 800; text-align: right; }

@media (max-width: 760px) {
  .topbar { height: 58px; padding: 10px 15px; }.brand-mark, .auth-brand .brand-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; }.brand h1 { font-size: 15px; }
  .auth-card { max-height: calc(var(--keyboard-viewport-height, 100vh) - 82px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); min-height: 0; margin: 12px auto; overflow-y: auto; padding: 18px; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scroll-padding-block: 16px; }
  .workspace-layout { display: block; min-height: calc(100vh - 58px); }.app-rail, .workspace-sidebar { display: none; }.main-workspace { padding: 0 14px 89px; }.content-header { min-height: 64px; }.content-header h2 { font-size: 18px; }.category-search { margin-top: 9px; }.schedule-card { margin-top: 12px; padding: 13px; }.schedule-list { max-height: 140px; }.room-header { padding-top: 3px; }.messages { min-height: calc(100vh - 390px); padding: 5px 0; }.message p { max-width: calc(100vw - 84px); }.task-form { grid-template-columns: 1fr; }.task-form > button { width: 100%; }.module-header { padding-top: 3px; }.board-layout { grid-template-columns: 1fr; gap: 9px; }.board-nav { display: flex; gap: 4px; overflow-x: auto; padding: 0 0 8px; border-right: 0; border-bottom: 1px solid var(--line); }.board-filter { width: auto; margin: 0; white-space: nowrap; }.post-fields { grid-template-columns: 1fr; }.home-task-section { margin-top: 13px; padding-top: 12px; }.home-search-results { margin-top: 13px; padding-top: 12px; }.global-search-item { padding: 9px 10px; }.home-task-list { max-height: 160px; }.home-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }.home-card { display: flex; align-items: center; gap: 6px; min-height: 62px; padding: 9px 6px; text-align: left; }.home-card-icon { width: 28px; height: 28px; font-size: 15px; }.home-card > span:last-child { grid-template-columns: minmax(0, 1fr) auto; gap: 1px 4px; }.home-card small { font-size: 8px; }.home-card strong { font-size: 17px; }.home-card em { font-size: 8px; }.home-header .module-add { padding: 8px 9px; font-size: 10px; }.home-notice { margin-top: 11px; }.mobile-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 13; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 7px 4px max(7px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #ffffffee; backdrop-filter: blur(12px); }.mobile-nav button { display: grid; gap: 2px; justify-items: center; min-width: 0; padding: 5px 1px; color: var(--muted); background: transparent; font-size: 17px; }.mobile-nav button.active { color: var(--primary); }.mobile-nav .home-nav-action { color: #5d60d9; }.mobile-nav .home-nav-action.active span { display: grid; place-items: center; width: 28px; height: 28px; margin-top: -4px; border-radius: 50%; background: var(--primary); color: #fff; box-shadow: 0 4px 9px #4f46e53d; }.mobile-nav small { overflow: hidden; max-width: 100%; font-size: 9px; font-weight: 700; white-space: nowrap; }.more-menu { top: 65px; right: 7px; bottom: auto; }.toast { bottom: 78px; }
}

/* Keep the home task actions compact and aligned with the section heading. */
.home-task-actions { display: flex; align-items: center; gap: 6px; }
.home-task-actions .home-link { white-space: nowrap; }

/* Keep the three home summary cards at the bottom of the available workspace. */
.main-workspace.home-view { padding-bottom: 0; }
.main-workspace.home-view #home-panel.active-panel { display: flex; flex-direction: column; height: calc(100vh - 68px - 78px); min-height: 0; overflow: hidden; }
.main-workspace.home-view #home-task-section { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; padding-bottom: 4px; }
.main-workspace.home-view #home-task-section .home-task-list { flex: 1 1 auto; min-height: 0; max-height: none; }
.main-workspace.home-view #home-panel.active-panel .home-cards { flex-shrink: 0; margin-top: auto; margin-bottom: 4px; }
.main-workspace.home-view #home-panel.active-panel .home-cards .home-card { min-height: 104px; }
@media (max-width: 760px) {
  .main-workspace.home-view { padding-bottom: var(--home-nav-space, 56px); }
  .main-workspace.home-view #home-panel.active-panel { height: calc(100vh - 58px - 64px - var(--home-nav-space, 56px)); min-height: 0; }
  .main-workspace.home-view #home-panel.active-panel .home-cards .home-card { min-height: 74px; }
}

/* Chat stays as a full-height conversation, with the composer always visible. */
#chat-panel.active-panel { position: relative; display: flex; flex-direction: column; height: calc(100vh - 68px - 78px - 30px); min-height: 0; overflow: hidden; }
#chat-panel.active-panel .messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#chat-panel.active-panel .attachment-name { flex: 0 0 auto; min-height: 0; padding: 0; }
#chat-panel.active-panel .attachment-name:not(:empty) { padding: 3px; }
#chat-panel.active-panel .compose-row { position: relative; flex: 0 0 auto; padding-bottom: 2px; }
.attachment-menu { position: absolute; right: 0; bottom: 64px; z-index: 12; display: grid; gap: 6px; min-width: 176px; padding: 8px; border: 1px solid var(--accent-border, var(--line)); border-radius: 12px; background: var(--surface-card, var(--paper)); box-shadow: 0 10px 25px #0005; }
.attachment-menu button { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--accent-border, var(--line)); border-radius: 8px; color: var(--ink); background: var(--surface-strong, var(--paper)); text-align: left; font-size: 12px; }
.attachment-menu button:hover, .attachment-menu button:focus-visible { border-color: var(--primary); color: var(--primary); background: var(--accent-surface, var(--paper)); outline: none; }

/* A date reveals a separate 12-hour reminder time picker. */
.task-due-time-fields { display: flex; align-items: center; grid-column: 1 / -1; gap: 6px; padding: 0 3px; color: var(--muted); font-size: 11px; }
.task-due-time-fields select { min-height: 36px; padding: 0 8px; border: 1px solid #474b56; border-radius: 8px; color: var(--ink); background: #30333a; font-size: 11px; }
.task-due-time-fields select:first-of-type { min-width: 58px; }
.task-due-time-fields select:nth-of-type(2) { min-width: 44px; }
.task-due-time-fields select:nth-of-type(3) { min-width: 52px; }
.task-info .due-date { color: var(--ink); font-weight: 700; }

/* Board picker, all-board pinning, and the floating new-post action. */
#board-panel.active-panel { position: relative; min-height: calc(100vh - 68px - 78px - 30px); }
.board-topbar { position: relative; margin-top: 14px; }
.board-picker-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--paper); font-size: 13px; font-weight: 800; }
.board-picker-toggle span { color: var(--muted); font-size: 15px; }
.board-picker-menu { position: absolute; top: 43px; left: 0; z-index: 11; display: grid; min-width: 190px; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); box-shadow: 0 10px 25px #0005; }
.board-picker-menu > strong { padding: 5px 8px 7px; color: var(--muted); font-size: 10px; }
.board-picker-option, .board-picker-manage { min-height: 35px; padding: 0 9px; border-radius: 7px; color: var(--ink); background: transparent; text-align: left; font-size: 12px; }
.board-picker-option:hover, .board-picker-option.active-board-filter { color: var(--primary); background: #393752; }
.board-picker-manage { margin-top: 5px; border-top: 1px solid var(--line); border-radius: 0; color: var(--primary); font-weight: 700; }
.board-content-view { min-width: 0; margin-top: 13px; }
.board-directory { margin-top: 15px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #30333a; }
.board-directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.board-directory-heading > div { display: grid; gap: 4px; }
.board-directory-heading span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.board-directory-heading h3 { margin: 0; font-size: 17px; }
.board-directory > p { margin: 7px 0 13px; color: var(--muted); font-size: 11px; }
.board-directory-list { display: grid; gap: 7px; }
.board-directory-option { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--paper); font-size: 12px; font-weight: 700; }
.board-directory-option input { width: 18px; height: 18px; accent-color: var(--primary); }
.board-compose-fab { position: fixed; right: 28px; bottom: 28px; z-index: 10; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--accent-border); border-radius: 50%; color: #fff; background: var(--primary); box-shadow: 0 8px 20px #0006; font-size: 25px; }
.board-compose-fab:hover { background: var(--primary-dark); }
.board-compose-sheet { position: fixed; right: 28px; bottom: 90px; z-index: 12; width: min(460px, calc(100vw - 40px)); padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 14px 40px #0008; }
.board-compose-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.board-compose-heading strong { font-size: 15px; }
.board-compose-heading .text-button { color: var(--muted); font-size: 20px; }
.post-form { padding-bottom: 0; border-bottom: 0; }
.post-board-field { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.post-board-field select { width: 100%; color: var(--ink); background: #30333a; }
.post-form-actions { display: flex; justify-content: flex-end; gap: 7px; }
.post-form-actions .secondary-button { min-height: 41px; }

@media (max-width: 760px) {
  #chat-panel.active-panel { height: calc(100vh - 58px - 64px - var(--home-nav-space, 89px)); }
  #board-panel.active-panel { min-height: calc(100vh - 58px - 64px - var(--home-nav-space, 89px)); }
  .board-compose-fab { right: 17px; bottom: calc(var(--home-nav-space, 89px) + 15px); width: 48px; height: 48px; }
  .board-compose-sheet { right: 12px; bottom: calc(var(--home-nav-space, 89px) + 72px); width: calc(100vw - 24px); }
}

/* Workspace switcher and the category-wide notification bell. */
.main-workspace { position: relative; }
.workspace-switcher { position: absolute; top: 0; left: 50%; z-index: 9; transform: translateX(-50%); }
.workspace-switcher-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--paper); font-size: 12px; font-weight: 800; }
.workspace-switcher-toggle > span:last-child { color: var(--muted); font-size: 15px; }
.workspace-switcher-menu { position: absolute; top: 43px; left: 50%; z-index: 15; display: grid; width: 235px; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); box-shadow: 0 10px 25px #0006; transform: translateX(-50%); }
.workspace-switcher-menu > strong { padding: 5px 8px 7px; color: var(--muted); font-size: 10px; }
.workspace-option, .workspace-create { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 0 9px; border-radius: 7px; color: var(--ink); background: transparent; text-align: left; font-size: 12px; }
.workspace-option:hover, .workspace-option.active-workspace { color: var(--primary); background: #393752; }
.workspace-option small { color: var(--muted); font-size: 10px; }
.workspace-create { justify-content: flex-start; margin-top: 5px; border-top: 1px solid var(--line); border-radius: 0; color: var(--primary); font-weight: 700; }
.notification-button { position: relative; }
.notification-badge { position: absolute; top: 2px; right: 1px; min-width: 14px; height: 14px; padding: 0 3px; border: 1px solid var(--danger-contrast, #24212d); border-radius: 99px; color: var(--danger-contrast, #24212d); background: var(--danger); box-shadow: 0 0 0 1px var(--paper); font-size: 8px; font-weight: 900; line-height: 12px; }
.notification-panel { position: absolute; top: 69px; right: 32px; z-index: 14; width: min(350px, calc(100vw - 24px)); max-height: calc(100vh - 96px); overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: 0 12px 30px #0007; }
.notification-heading { display: flex; align-items: center; justify-content: space-between; padding: 3px 5px 8px; border-bottom: 1px solid var(--line); }
.notification-heading-actions { display: flex; align-items: center; gap: 6px; }
.notification-heading strong { font-size: 13px; }
.notification-item { display: grid; gap: 5px; width: 100%; margin-top: 7px; padding: 11px 12px; border-radius: 9px; color: var(--ink); background: transparent; text-align: left; }
.notification-item:hover { background: #393752; }
.notification-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.notification-item span { color: var(--muted); font-size: 11px; }
.notification-item[role="button"] { cursor: pointer; }
.notification-invite { border: 1px solid var(--accent-border); background: var(--accent-surface); }
.notification-invite strong { color: var(--ink); }
.notification-action { justify-self: start; min-height: 29px; margin-top: 3px; padding: 0 10px; border: 1px solid var(--accent-border); border-radius: 7px; color: #fff; background: var(--primary); font-size: 10px; font-weight: 800; }
.notification-action:hover { background: var(--primary-dark); }
.notification-panel .empty { margin: 12px 5px 7px; }
.task.notification-target { border-color: var(--primary); box-shadow: 0 0 0 2px #938bff33; }

/* Account sheet. */
.profile-sheet { position: fixed; top: 50%; left: 50%; z-index: 20; width: min(420px, calc(100vw - 30px)); max-height: calc(100vh - 30px); overflow: auto; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 18px 55px #0009; transform: translate(-50%, -50%); }
.profile-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.profile-heading > div { display: grid; gap: 4px; }
.profile-heading span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.profile-heading h2 { margin: 0; font-size: 19px; }
.profile-heading .text-button { color: var(--muted); font-size: 22px; }
.profile-onboarding-notice { margin: -5px 0 14px; padding: 10px 11px; border: 1px solid var(--accent-border); border-radius: 9px; color: var(--primary); background: var(--accent-surface); font-size: 11px; line-height: 1.5; }
.profile-photo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.profile-avatar, .member-avatar { background-position: center; background-size: cover; background-repeat: no-repeat; }
.profile-avatar { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 17px; color: var(--primary); background-color: #3b3858; font-size: 23px; font-weight: 800; }
.profile-photo-row p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.profile-form { display: grid; gap: 10px; }
.profile-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.profile-form input { width: 100%; padding: 11px 12px; border: 1px solid #474b56; border-radius: 9px; color: var(--ink); background: #30333a; font-size: 12px; }
.profile-email-row, .profile-email-code-row, .profile-phone-row, .profile-phone-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.profile-email-row button, .profile-email-code-row button, .profile-phone-row button, .profile-phone-code-row button { min-height: 40px; padding: 0 10px; border-radius: 9px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.profile-email-code-row, .profile-phone-code-row { margin-top: 2px; }
.profile-email-status, .profile-phone-status { min-height: 16px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.profile-email-status.verified, .profile-phone-status.verified { color: var(--success); font-weight: 800; }
.profile-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin-top: 5px; }
.profile-actions > button:last-child { min-height: 37px; padding: 0 14px; border-radius: 8px; color: #fff; background: var(--primary); font-size: 11px; font-weight: 700; }
.profile-invite-result { grid-column: 1 / -1; margin: 0; padding: 9px 10px; border-radius: 8px; color: var(--primary); background: #393752; font-size: 10px; font-weight: 700; }
.auth-recovery-actions { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: -3px; color: var(--muted); font-size: 11px; }
.auth-recovery-actions .text-button { padding: 0; color: var(--muted); font-size: 11px; }
.auth-recovery-actions .text-button:hover { color: var(--primary); }
.auth-mode-actions { display: flex; justify-content: center; gap: 18px; }

@media (max-width: 760px) {
  .workspace-switcher { top: 1px; }
  .workspace-switcher-toggle { max-width: 155px; min-height: 34px; padding: 0 9px; }
  .workspace-switcher-toggle > span:first-child { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .notification-panel { top: 61px; right: 12px; width: min(350px, calc(100vw - 24px)); max-height: calc(100vh - 82px); }
}

/* KakaoTalk-style chat room list with a short last-message preview. */
#chat-panel.active-panel .chat-room-list-view { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.chat-list-heading { display: flex; align-items: center; justify-content: space-between; padding: 7px 0 15px; border-bottom: 1px solid var(--line); }
.chat-list-heading > div { display: grid; gap: 4px; }
.chat-list-heading span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.chat-list-heading h3 { margin: 0; font-size: 19px; }
.chat-room-list { min-width: 0; }
.chat-room-list-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 72px; padding: 10px 5px; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.chat-room-list-item:hover { background: #343941; }
.chat-room-list-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: var(--primary); background: #3b3858; font-size: 15px; font-weight: 800; }
.chat-room-list-body { display: grid; min-width: 0; gap: 5px; }
.chat-room-list-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.chat-room-list-body > span { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.chat-room-list-item time { align-self: start; padding-top: 3px; color: var(--muted); font-size: 9px; white-space: nowrap; }
#chat-room-view:not([hidden]) { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.chat-back-button { width: 28px; height: 30px; border-radius: 7px; color: var(--muted); background: transparent; font-size: 27px; line-height: 1; }
.chat-back-button:hover { color: var(--primary); background: #393752; }
.chat-room-view { position: relative; }
.chat-room-menu { position: absolute; top: 47px; right: 0; z-index: 12; display: grid; width: 170px; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: 0 12px 30px #0008; }
.chat-room-menu button { min-height: 35px; padding: 0 10px; border-radius: 8px; color: var(--ink); background: transparent; text-align: left; font-size: 11px; font-weight: 700; }
.chat-room-menu button:hover { color: var(--primary); background: #393752; }
.modal-sheet-backdrop,
.chat-sheet-backdrop { position: fixed; inset: 0; display: block; background: #10131a66; cursor: pointer; }
.modal-sheet-backdrop[hidden],
.chat-sheet-backdrop[hidden] { display: none; }
.modal-sheet-backdrop { z-index: 19; }
#board-compose-backdrop { z-index: 11; }
.chat-sheet-backdrop { z-index: 20; }
/* A chat sheet should dim the conversation without blurring or re-rendering
   the messages behind it. Other modal types keep their own blur treatment. */
.chat-sheet-backdrop { background: color-mix(in srgb, var(--canvas) 72%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
.chat-room-sheet { position: fixed; top: 50%; left: 50%; z-index: 21; width: min(390px, calc(100vw - 30px)); max-height: calc(100vh - 30px); overflow: auto; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 18px 55px #0009; transform: translate(-50%, -50%); }
.chat-room-sheet-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.chat-room-sheet-heading > div { display: grid; gap: 4px; }
.chat-room-sheet-heading span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.chat-room-sheet-heading h3 { margin: 0; font-size: 18px; }
.chat-participant-list, .chat-drawer-list { display: grid; gap: 6px; }
.chat-participant-row, .chat-drawer-item { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #30333a; font-size: 11px; }
.chat-participant-avatar { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; color: var(--primary); background: #3b3858; font-size: 10px; font-weight: 800; }
.chat-participant-row span:last-child, .chat-drawer-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-room-sheet-action { width: 100%; min-height: 40px; margin-top: 12px; border-radius: 9px; color: #fff; background: var(--primary); font-size: 12px; font-weight: 800; }
.chat-drawer-tabs { display: flex; gap: 5px; margin-bottom: 10px; overflow-x: auto; }
.chat-drawer-tabs button { flex: none; min-height: 34px; padding: 0 10px; border-radius: 8px; color: var(--muted); background: #30333a; font-size: 11px; font-weight: 800; }
.chat-drawer-tabs button.active-drawer-tab { color: var(--primary); background: #393752; }
.chat-drawer-item { text-decoration: none; }
.chat-drawer-item:hover { border-color: var(--primary); }

/* Compact task controls: assignee, date, and the always-available time stay on one line. */
.task-fields { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(118px, 1fr) auto; align-items: center; gap: 7px; min-width: 0; }
.task-fields > #task-assignee, .task-fields > .date-field { width: 100%; min-width: 0; }
.task-fields > #task-assignee { flex: none; }
.task-fields > .date-field { flex: none; }
.task-due-time-fields { grid-column: auto; gap: 3px; padding: 0; white-space: nowrap; }
.task-due-time-fields select { min-height: 36px; padding: 0 5px; font-size: 10px; }
.task-due-time-fields select:first-of-type { min-width: 48px; }
.task-due-time-fields select:nth-of-type(2) { min-width: 36px; }
.task-due-time-fields select:nth-of-type(3) { min-width: 44px; }

/* The task add action follows the user while the task list scrolls. */
#tasks-panel.active-panel { position: relative; min-height: calc(100vh - 68px - 78px - 30px); }
#tasks-panel.active-panel .tasks { max-height: calc(100vh - 68px - 78px - 250px); overflow-y: auto; }
.task-compose-fab { position: fixed; right: 28px; bottom: 28px; z-index: 10; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--accent-border); border-radius: 50%; color: #fff; background: var(--primary); box-shadow: 0 8px 20px #0006; font-size: 25px; }
.task-compose-fab:hover { background: var(--primary-dark); }

/* Board tabs remain in one horizontal row and can be swiped on narrow screens. */
.board-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.board-filter-row { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.board-filter-row .board-filter { flex: none; width: auto; margin: 0; padding: 9px 10px; white-space: nowrap; text-align: center; }
.board-top-actions { display: flex; flex: none; align-items: center; gap: 7px; }
.board-top-actions .text-button { white-space: nowrap; font-size: 10px; }

@media (max-width: 760px) {
  .task-fields { grid-template-columns: minmax(78px, .85fr) minmax(94px, 1fr) auto; gap: 5px; }
  .task-due-time-fields { gap: 2px; }
  .task-due-time-fields > span:first-child { font-size: 9px; }
  .task-due-time-fields select { min-height: 34px; padding: 0 3px; font-size: 9px; }
  .task-due-time-fields select:first-of-type { min-width: 43px; }
  .task-due-time-fields select:nth-of-type(2) { min-width: 31px; }
  .task-due-time-fields select:nth-of-type(3) { min-width: 39px; }
  #tasks-panel.active-panel { min-height: calc(100vh - 58px - 64px - var(--home-nav-space, 89px)); }
  #tasks-panel.active-panel .tasks { max-height: calc(100vh - 58px - 64px - 275px - var(--home-nav-space, 89px)); }
  .task-compose-fab { right: 17px; bottom: calc(var(--home-nav-space, 89px) + 15px); width: 48px; height: 48px; }
  .board-topbar { align-items: flex-start; }
  .board-filter-row { flex: 1 1 auto; }
  .board-top-actions { gap: 4px; }
  .board-top-actions .text-button { padding-left: 0; padding-right: 0; font-size: 9px; }
}

/* Final header alignment and task/board control refinements. */
.workspace-switcher { top: 18px; }
.notification-button { color: var(--primary) !important; }
.bell-icon { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#task-subject, #task-title { grid-column: 1 / -1; }
.task-fields > #task-assignee { height: 40px; padding: 0 12px; border: 1px solid #474b56; border-radius: 9px; color: var(--ink); background: #30333a; font-size: 12px; }
.task-fields > .date-field input { height: 40px; padding: 0 12px; border-radius: 9px; }
.task-due-time-fields select { height: 40px; }
.task-details { margin: 5px 0 0; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; line-height: 1.4; }
.board-directory-actions { display: flex; align-items: center; gap: 10px; }

@media (max-width: 760px) {
  .workspace-switcher { top: 14px; }
  .task-fields > #task-assignee, .task-fields > .date-field input, .task-due-time-fields select { height: 38px; }
}

/* A conversation gets the full phone viewport; the category bar stays on lists only. */
@media (max-width: 760px) {
  .app-shell.chat-room-active .mobile-nav { display: none; }
  .app-shell.chat-room-active .main-workspace { padding-bottom: 0; }
  .app-shell.chat-room-active #chat-panel.active-panel { height: calc(100vh - 58px - 64px); }
}

/* Keep the conversation composer above Android's system navigation area. */
@media (max-width: 760px) {
  .app-shell.chat-room-active #chat-room-view {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .app-shell.chat-room-active #message-form {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: var(--paper);
  }
}

/* Select people before creating a direct or group chat room. */
.chat-room-create-sheet {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 21;
  width: min(390px, calc(100vw - 30px));
  max-height: calc(100vh - 30px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 18px 55px #0009;
  transform: translate(-50%, -50%);
}
.chat-room-create-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.chat-room-create-heading > div { display: grid; gap: 4px; }
.chat-room-create-heading span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.chat-room-create-heading h3 { margin: 0; font-size: 18px; }
.chat-room-create-heading .text-button { color: var(--muted); font-size: 22px; }
.chat-room-create-sheet > p { margin: 12px 0 9px; color: var(--muted); font-size: 11px; }
.chat-member-picker { display: grid; gap: 6px; }
.chat-member-option { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #30333a; cursor: pointer; font-size: 12px; font-weight: 700; }
.chat-member-option:has(input:checked) { border-color: var(--primary); background: #393752; }
.chat-member-option input { width: 17px; height: 17px; accent-color: var(--primary); }
.chat-member-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--primary); background: #3b3858; font-size: 11px; font-weight: 800; }
.chat-room-create-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 14px; }
.chat-room-create-actions > button:last-child { min-height: 39px; padding: 0 13px; border-radius: 8px; color: #fff; background: var(--primary); font-size: 11px; font-weight: 700; }

/* Keep the composer close to the Android navigation bar without hiding it behind the bar. */
@media (max-width: 760px) {
  .app-shell.chat-room-active #chat-room-view { padding-bottom: 0; }
  .app-shell.chat-room-active #message-form {
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    margin-bottom: 9px;
    background: var(--paper);
  }
}

/* In a direct chat the purple badge carries the complete other-person name. */
.room-header-avatar {
  width: auto;
  min-width: 42px;
  max-width: 100%;
  padding: 0 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

/* Rebalance the task controls: a slightly smaller date box leaves room for time. */
.task-fields { grid-template-columns: minmax(0, 70px) minmax(0, 94px) minmax(150px, 1fr); }
.task-fields > .date-field { justify-content: center; }
.task-fields > .date-field .date-field-display { width: 100%; text-align: center; }
.task-due-time-fields { min-width: 0; gap: 5px; }
.task-due-time-fields select { padding-left: 7px; padding-right: 7px; }
.task-due-time-fields select:first-of-type { min-width: 52px; }
.task-due-time-fields select:nth-of-type(2) { min-width: 40px; }
.task-due-time-fields select:nth-of-type(3) { min-width: 46px; }
.task-info .due-date.no-date { color: var(--muted); font-weight: 400; }
.task-edit { min-height: 30px; margin-top: 3px; padding: 4px 8px; font-size: 11px; }

@media (max-width: 760px) {
  .task-fields { grid-template-columns: minmax(0, 62px) minmax(0, 82px) minmax(150px, 1fr); }
  .task-fields > .date-field { height: 38px; }
  .task-due-time-fields { height: 38px; gap: 4px; }
  .task-due-time-fields select:first-of-type { min-width: 50px; }
  .task-due-time-fields select:nth-of-type(2) { min-width: 38px; }
  .task-due-time-fields select:nth-of-type(3) { min-width: 44px; }
}

/* This must remain last: the task controls need enough room for four characters. */
.task-fields { grid-template-columns: minmax(0, 108px) minmax(0, 82px) minmax(150px, 1fr) !important; }
.task-fields > #task-assignee {
  width: 100%;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 8px;
}
@media (min-width: 761px) {
  .task-fields { grid-template-columns: minmax(0, 108px) minmax(0, 94px) minmax(150px, 1fr) !important; }
}

/* Task creation belongs to the page flow. The list must not become a
   separate scrolling box that leaves the add form permanently at the top. */
#tasks-panel.active-panel .tasks {
  max-height: none !important;
  overflow-y: visible !important;
}

/* Replace browser-native prompt/confirm boxes with the app's dark rounded
   dialog so workspace and destructive actions look consistent on Android. */
.app-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: #0d1018b8;
  backdrop-filter: blur(5px);
}
.app-dialog {
  width: min(360px, 100%);
  max-height: min(520px, calc(100vh - 36px));
  overflow: auto;
  padding: 20px;
  border: 1px solid #4b4d66;
  border-radius: 18px;
  color: var(--ink);
  background: #30333a;
  box-shadow: 0 18px 55px #000b;
}
.app-dialog-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}
.app-dialog h2 { margin: 0; font-size: 18px; }
.app-dialog p { margin: 9px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.app-dialog-form { display: grid; gap: 14px; }
.app-dialog-choice-list { display: grid; gap: 8px; }
.app-dialog-choice { display: grid; gap: 4px; width: 100%; padding: 13px 14px; border: 1px solid #4b4d66; border-radius: 11px; color: var(--ink); background: #25282f; text-align: left; }
.app-dialog-choice strong { color: var(--ink); font-size: 13px; }
.app-dialog-choice span { color: var(--muted); font-size: 10px; line-height: 1.4; }
.app-dialog-choice:hover, .app-dialog-choice:focus-visible { border-color: var(--primary); background: var(--accent-surface); outline: none; }
.app-dialog-form input {
  width: 100%;
  min-height: 43px;
  padding: 0 12px;
  border: 1px solid #4b4d66;
  border-radius: 11px;
  outline: none;
  color: var(--ink);
  background: #25282f;
  font-size: 13px;
}
.app-dialog-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px #938bff26; }
.app-dialog-form input::placeholder { color: #8f94a3; }
.app-dialog-actions { display: flex; justify-content: flex-end; gap: 7px; }
.app-dialog-actions button { min-height: 40px; padding: 0 15px; border-radius: 9px; font-size: 12px; font-weight: 800; }
.app-dialog-cancel { border: 1px solid #4b4d66; color: var(--muted); background: #393c45; }
.app-dialog-cancel:hover { color: var(--ink); background: #454955; }
.app-dialog-confirm { color: #fff; background: var(--primary); }
.app-dialog-confirm:hover { background: var(--primary-dark); }
:root[data-theme="light"] .app-dialog-backdrop { background: #18213a66; }
:root[data-theme="light"] .app-dialog { border-color: #d9dcf0; background: #fff; box-shadow: 0 18px 55px #1d24404d; }
:root[data-theme="light"] .app-dialog-form input { border-color: #d9dcf0; background: #f7f8fc; }
:root[data-theme="light"] .app-dialog-choice { border-color: #d9dcf0; background: #f7f8fc; }
:root[data-theme="light"] .app-dialog-cancel { border-color: #d9dcf0; background: #f1f2f7; }

/* Keep account recovery in one app-styled window: email, verification code,
   and password reset fields progress without closing or replacing the sheet. */
.account-recovery-sheet { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 18px; }
.account-recovery-backdrop { position: absolute; inset: 0; background: #0d1018b8; backdrop-filter: blur(5px); }
.account-recovery-card { position: relative; width: min(410px, 100%); max-height: min(620px, calc(100vh - 36px)); overflow: auto; padding: 20px; border: 1px solid var(--accent-border); border-radius: 18px; color: var(--ink); background: var(--surface-card); box-shadow: 0 18px 55px #000b; }
.account-recovery-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.account-recovery-heading > div { display: grid; gap: 5px; }
.account-recovery-heading span { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.account-recovery-heading h2 { margin: 0; font-size: 20px; }
.account-recovery-heading .text-button { padding: 0; color: var(--muted); font-size: 24px; line-height: 1; }
.account-recovery-card > p { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.account-recovery-card form { display: grid; gap: 11px; }
.account-recovery-card label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.account-recovery-card input { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid var(--accent-border); border-radius: 10px; outline: none; color: var(--ink); background: var(--surface-strong); font-size: 13px; }
.account-recovery-card input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px #938bff26; }
.account-recovery-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: end; }
.account-recovery-code-row button, .account-recovery-actions button { min-height: 42px; padding: 0 11px; border-radius: 9px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.account-recovery-code-row button:disabled, .account-recovery-actions button:disabled { cursor: wait; opacity: .55; }
.account-recovery-status { min-height: 17px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.account-recovery-status.verified { color: var(--success); }
.account-recovery-delivery { margin: -3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.account-recovery-result { padding: 11px 12px; border: 1px solid var(--accent-border); border-radius: 10px; color: var(--primary); background: var(--accent-surface); font-size: 13px; font-weight: 800; }
.account-recovery-password-fields { display: grid; gap: 11px; }
.account-recovery-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 3px; }
.account-recovery-actions button[type="submit"] { color: #fff; background: var(--primary); }
.account-recovery-actions button[type="submit"]:hover { background: var(--primary-dark); }
:root[data-theme="light"] .account-recovery-backdrop { background: #18213a66; }
:root[data-theme="light"] .account-recovery-card { background: var(--surface-card); box-shadow: 0 18px 55px #1d24404d; }

@media (max-width: 360px) {
  .account-recovery-code-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .account-recovery-code-row input { grid-column: 1 / -1; }
  .account-recovery-code-row button { width: 100%; }
}

/* Compact OUR TEAM MESSENGER brand bar. The connection status is useful for
   diagnostics but does not need a full second row in the app header. */
:root { --app-topbar-height: 40px; }
.topbar {
  height: var(--app-topbar-height);
  padding: 5px 18px;
}
.topbar .brand { gap: 8px; }
.topbar .brand-mark {
  width: 29px;
  height: 29px;
  border-radius: 9px;
  font-size: 15px;
}
.topbar .brand h1 { font-size: 13px; letter-spacing: .04em; }
.topbar .brand p { display: none; }
.topbar .icon-button { width: 29px; height: 29px; font-size: 16px; }
.chat-bubble-icon { display: block; width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail-button .rail-icon { display: grid; place-items: center; width: 22px; height: 22px; line-height: 1; }
.workspace-nav-item .nav-item-icon { display: grid; place-items: center; line-height: 1; }
.mobile-nav > button:not(.home-nav-action) > span:first-child { display: grid; place-items: center; width: 22px; height: 22px; line-height: 1; }
.mobile-nav > button:not(.home-nav-action) .chat-bubble-icon { width: 18px; height: 18px; }
.task-fields { grid-template-columns: minmax(0, 86px) minmax(0, 94px) minmax(150px, 1fr); }
.task-fields > #task-assignee { padding-left: 8px; padding-right: 8px; }
.workspace-layout { min-height: calc(100vh - var(--app-topbar-height)) !important; }
.main-workspace.home-view #home-panel.active-panel { height: calc(100vh - var(--app-topbar-height) - 78px) !important; }
#chat-panel.active-panel { height: calc(100vh - var(--app-topbar-height) - 78px - 30px) !important; }
#tasks-panel.active-panel { min-height: calc(100vh - var(--app-topbar-height) - 78px - 30px) !important; }
#board-panel.active-panel { min-height: calc(100vh - var(--app-topbar-height) - 78px - 30px) !important; }

@media (max-width: 760px) {
  :root { --app-topbar-height: 36px; }
  .topbar { height: var(--app-topbar-height); padding: 4px 12px; }
  .topbar .brand { gap: 7px; }
  .topbar .brand-mark { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
  .topbar .brand h1 { font-size: 11px; letter-spacing: .045em; }
  .topbar .icon-button { width: 27px; height: 27px; font-size: 15px; }
  .task-fields { grid-template-columns: minmax(0, 86px) minmax(0, 82px) minmax(150px, 1fr); }
  .task-fields > #task-assignee { padding-left: 8px; padding-right: 8px; }
  .workspace-layout { min-height: calc(100vh - var(--app-topbar-height)) !important; }
  .main-workspace.home-view #home-panel.active-panel { height: calc(100vh - var(--app-topbar-height) - 64px - var(--home-nav-space, 56px)) !important; }
  #chat-panel.active-panel { height: calc(100vh - var(--app-topbar-height) - 64px - var(--home-nav-space, 89px)) !important; }
  #tasks-panel.active-panel { min-height: calc(100vh - var(--app-topbar-height) - 64px - var(--home-nav-space, 89px)) !important; }
  #board-panel.active-panel { min-height: calc(100vh - var(--app-topbar-height) - 64px - var(--home-nav-space, 89px)) !important; }
  .app-shell.chat-room-active #chat-panel.active-panel { height: calc(100vh - var(--app-topbar-height) - 64px) !important; }
  body.chat-room-page .main-workspace { height: calc(100dvh - var(--app-topbar-height)) !important; }
  body.chat-room-page .workspace-layout { height: calc(100% - var(--app-topbar-height)) !important; }
  body.chat-room-page #app-content { height: calc(100% - var(--app-topbar-height)) !important; }
}

/* Light theme overrides for the selectable app theme. */
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #1e1f24;
  --muted: #7b7f8c;
  --line: #e7e8eb;
  --paper: #ffffff;
  --canvas: #f7f8fa;
  --rail: #f2f3f5;
  --primary: #4f46e5;
  --primary-dark: #3730a3;
  --success: #12a36d;
  --danger: #db4261;
}
:root[data-theme="light"] body,
:root[data-theme="light"] .app-shell { color: var(--ink) !important; background: var(--canvas) !important; }
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .auth-card,
:root[data-theme="light"] .workspace-layout,
:root[data-theme="light"] .main-workspace { border-color: var(--line) !important; background: var(--paper) !important; }
:root[data-theme="light"] .icon-button,
:root[data-theme="light"] .secondary-button { border-color: var(--accent-border) !important; background: var(--accent-surface) !important; color: var(--primary) !important; }
:root[data-theme="light"] .auth-card input,
:root[data-theme="light"] .sidebar-search,
:root[data-theme="light"] .compose-row input,
:root[data-theme="light"] .task-form input,
:root[data-theme="light"] .task-form textarea,
:root[data-theme="light"] .post-form input,
:root[data-theme="light"] .post-form textarea,
:root[data-theme="light"] .post-form select { border-color: var(--line) !important; background: var(--paper) !important; color: var(--ink) !important; }
:root[data-theme="light"] .app-rail { border-color: var(--line) !important; background: var(--rail) !important; }
:root[data-theme="light"] .workspace-sidebar { border-color: var(--line) !important; background: var(--rail) !important; }
:root[data-theme="light"] .workspace-nav-item,
:root[data-theme="light"] .chat-room { color: #626671 !important; }
:root[data-theme="light"] .workspace-nav-item:hover,
:root[data-theme="light"] .workspace-nav-item.active,
:root[data-theme="light"] .chat-room:hover,
:root[data-theme="light"] .chat-room.active { color: var(--ink) !important; background: var(--accent-surface) !important; }
:root[data-theme="light"] .header-icon,
:root[data-theme="light"] .room-header-action { color: #858994 !important; }
:root[data-theme="light"] .header-icon:hover,
:root[data-theme="light"] .room-header-action:hover { color: var(--primary) !important; background: var(--accent-surface) !important; }
:root[data-theme="light"] .category-search { border-color: var(--accent-border) !important; background: var(--surface-alt) !important; }
:root[data-theme="light"] .schedule-card,
:root[data-theme="light"] .home-card,
:root[data-theme="light"] .post,
:root[data-theme="light"] .task { border-color: var(--accent-border) !important; background: var(--surface-card) !important; }
:root[data-theme="light"] .schedule-calendar-button,
:root[data-theme="light"] .refresh-button,
:root[data-theme="light"] .home-link,
:root[data-theme="light"] .module-add { border-color: var(--accent-border) !important; background: var(--accent-surface) !important; color: var(--primary) !important; }
:root[data-theme="light"] .home-card-icon,
:root[data-theme="light"] .home-notice-icon,
:root[data-theme="light"] .room-icon,
:root[data-theme="light"] .room-header-avatar,
:root[data-theme="light"] .chat-room-list-avatar,
:root[data-theme="light"] .chat-member-avatar,
:root[data-theme="light"] .profile-avatar { background: var(--accent-icon) !important; color: var(--primary) !important; }
:root[data-theme="light"] .home-notice { background: var(--surface-alt) !important; }
:root[data-theme="light"] .message p { background: var(--surface-alt) !important; }
:root[data-theme="light"] .post-category,
:root[data-theme="light"] .post-delete { background: var(--surface-alt) !important; color: var(--muted) !important; }
:root[data-theme="light"] .task .check { border-color: #bec4d5 !important; background: #ffffff !important; }
:root[data-theme="light"] .task.done strong { color: #9aa2b7 !important; }
:root[data-theme="light"] .delete { color: #9ca4b8 !important; }
:root[data-theme="light"] .more-menu,
:root[data-theme="light"] .notification-panel,
:root[data-theme="light"] .task-sort-menu,
:root[data-theme="light"] .board-picker-menu,
:root[data-theme="light"] .workspace-switcher-menu,
:root[data-theme="light"] .attachment-menu { border-color: var(--accent-border) !important; background: var(--surface-card) !important; }
:root[data-theme="light"] .more-menu button,
:root[data-theme="light"] .notification-item,
:root[data-theme="light"] .task-sort-menu button,
:root[data-theme="light"] .board-picker-option,
:root[data-theme="light"] .board-picker-manage,
:root[data-theme="light"] .workspace-option,
:root[data-theme="light"] .workspace-create,
:root[data-theme="light"] .attachment-menu button { color: var(--ink) !important; }
:root[data-theme="light"] .attachment-menu button { border-color: var(--accent-border) !important; background: var(--surface-strong) !important; }
:root[data-theme="light"] .more-menu button:hover,
:root[data-theme="light"] .notification-item:hover,
:root[data-theme="light"] .task-sort-menu button:hover,
:root[data-theme="light"] .task-sort-menu button.active-task-sort,
:root[data-theme="light"] .board-picker-option:hover,
:root[data-theme="light"] .board-picker-option.active-board-filter,
:root[data-theme="light"] .workspace-option:hover,
:root[data-theme="light"] .workspace-option.active-workspace,
:root[data-theme="light"] .attachment-menu button:hover { color: var(--ink) !important; background: var(--accent-surface) !important; }
:root[data-theme="light"] .mobile-nav { border-color: var(--line) !important; background: #fffffff0 !important; }
:root[data-theme="light"] .compose-row { background: linear-gradient(0deg, var(--paper) 72%, transparent) !important; }

/* Separate the fixed conversation header from the scrolling messages. */
.room-header {
  position: relative;
  border-bottom: 2px solid var(--primary) !important;
  background: var(--rail) !important;
  box-shadow: 0 7px 16px -12px var(--accent-border);
}
body.chat-room-page #chat-room-view .room-header,
.app-shell.chat-room-active #chat-room-view .room-header { background: var(--rail) !important; }
#chat-room-view .messages { background: var(--canvas) !important; }
:root[data-theme="light"] .filter.active-filter,
:root[data-theme="light"] .board-filter:hover,
:root[data-theme="light"] .board-filter.active-board-filter,
:root[data-theme="light"] .global-search-category { background: var(--accent-surface) !important; }
:root[data-theme="light"] .global-search-item:hover { background: #fafaff !important; }
:root[data-theme="light"] .task-fields > #task-assignee,
:root[data-theme="light"] .task-fields > .date-field,
:root[data-theme="light"] .task-due-time-fields select,
:root[data-theme="light"] .task-sort-toggle,
:root[data-theme="light"] .settings-font-options button,
:root[data-theme="light"] .settings-theme-options button,
:root[data-theme="light"] .settings-member-row,
:root[data-theme="light"] .profile-form input { border-color: var(--line) !important; background: #ffffff !important; color: var(--ink) !important; }
:root[data-theme="light"] .task-sort-toggle:hover,
:root[data-theme="light"] .task-sort-toggle[aria-expanded="true"],
:root[data-theme="light"] .settings-font-options button:hover,
:root[data-theme="light"] .settings-font-options button.active-font-scale,
:root[data-theme="light"] .settings-theme-options button:hover,
:root[data-theme="light"] .settings-theme-options button.active-theme { border-color: var(--accent-border) !important; color: var(--ink) !important; background: var(--accent-surface) !important; }
:root[data-theme="light"] .settings-sheet,
:root[data-theme="light"] .profile-sheet,
:root[data-theme="light"] .chat-room-create-sheet,
:root[data-theme="light"] .board-compose-sheet,
:root[data-theme="light"] .board-directory { border-color: var(--line) !important; background: #ffffff !important; }
:root[data-theme="light"] .settings-card { border-color: var(--line) !important; background: #f8f9fc !important; }
:root[data-theme="light"] .settings-preview { background: #ffffff !important; }
:root[data-theme="light"] .settings-member-row .settings-member-kick { color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 48%, var(--accent-border)) !important; background: color-mix(in srgb, var(--danger) 12%, var(--surface-card)) !important; }
:root[data-theme="light"] .settings-member-row .settings-member-block { color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 48%, var(--accent-border)) !important; background: color-mix(in srgb, var(--danger) 12%, var(--surface-card)) !important; }
:root[data-theme="light"] .settings-member-row .settings-member-unblock { color: #237245 !important; border-color: #c9e6d2 !important; background: #effaf2 !important; }
:root[data-theme="light"] .chat-member-option { border-color: var(--line) !important; background: #ffffff !important; color: var(--ink) !important; }
:root[data-theme="light"] .chat-member-option:has(input:checked) { border-color: var(--primary) !important; background: var(--accent-surface) !important; }
:root[data-theme="light"] .post-board-field select { color-scheme: light !important; }
:root[data-theme="light"] .task-fields select { color-scheme: light !important; }

/* When the Android keyboard is open, the page itself must stay fixed. Only the message list may scroll. */
@media (max-width: 760px) {
  html.chat-room-page,
  body.chat-room-page { height: 100%; overflow: hidden; }
  body.chat-room-page .app-shell { height: 100dvh; min-height: 0; overflow: hidden; }
  body.chat-room-page .workspace-layout,
  body.chat-room-page .main-workspace { height: calc(100dvh - 58px); min-height: 0; overflow: hidden; }
}

/* Keep task filters in one row and pin the three-way sort menu to the right. */
.task-toolbar { display: flex; align-items: center; flex-wrap: nowrap; gap: 7px; min-width: 0; }
.task-filter-list { display: flex; flex: 0 1 auto; min-width: 0; gap: 7px; overflow-x: auto; padding-right: 0; scrollbar-width: none; }
.task-filter-list::-webkit-scrollbar { display: none; }
.task-filter-list .filter { flex: none; min-height: 34px; padding-right: 8px; padding-left: 8px; white-space: nowrap; }
.task-sort-field { position: relative; z-index: 1; display: block; flex: none; width: 72px; margin-left: 0; }
.task-sort-field select { width: 100%; height: 34px; padding: 0 23px 0 9px; border: 1px solid #474b56; border-radius: 8px; color: var(--ink); background: #30333a; appearance: none; font-size: 11px; font-weight: 700; }
.task-sort-field::after { content: '⌄'; position: absolute; top: 50%; right: 8px; transform: translateY(-54%); color: var(--muted); pointer-events: none; font-size: 14px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* App-styled task sorting popup instead of the rigid Android native select sheet. */
.task-sort-field::after { display: none; }
.task-sort-toggle { display: flex; align-items: center; justify-content: space-between; width: 72px; height: 34px; padding: 0 6px 0 7px; border: 1px solid var(--accent-border); border-radius: 9px; color: var(--ink); background: var(--accent-surface); font-size: 10px; font-weight: 800; }
.task-sort-toggle:hover, .task-sort-toggle[aria-expanded="true"] { border-color: var(--accent-border); background: var(--accent-hover); }
.task-sort-arrow { color: var(--primary); font-size: 15px; line-height: 1; transform: translateY(-1px); }
.task-sort-menu { position: absolute; top: 40px; right: 0; z-index: 12; display: grid; width: 118px; padding: 7px; border: 1px solid #514d79; border-radius: 12px; background: #25282f; box-shadow: 0 12px 28px #0008; }
.task-sort-menu strong { padding: 4px 8px 6px; color: var(--muted); font-size: 10px; }
.task-sort-menu button { min-height: 34px; padding: 0 9px; border-radius: 8px; color: var(--ink); background: transparent; text-align: left; font-size: 11px; font-weight: 700; }
.task-sort-menu button:hover, .task-sort-menu button.active-task-sort { color: var(--primary); background: #393752; }
.task-fields select, .post-board-field select { color-scheme: dark; }
.chat-room-view .messages { display: flex; flex-direction: column; justify-content: flex-start; align-content: flex-start; }
.chat-date-divider { display: flex; align-items: center; align-self: stretch; gap: 10px; margin: 9px 0 4px; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.2; }
.chat-date-divider::before, .chat-date-divider::after { content: ''; height: 1px; flex: 1 1 auto; background: var(--line); }
.chat-date-divider span { flex: none; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-strong); white-space: nowrap; }
.messages.few-messages { scroll-behavior: auto; padding-top: 0; }
.messages.few-messages .message:first-child { margin-top: 0; }
.toast.exit-confirm { bottom: 50%; width: max-content; max-width: calc(100vw - 24px); overflow: hidden; padding: 13px 18px; border: 1px solid #635ca1; border-radius: 14px; color: #f4f2ff; background: #393752; box-shadow: 0 12px 30px #0009; transform: translate(-50%, 50%) scale(.96); white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 800; }
.toast.exit-confirm.visible { transform: translate(-50%, 50%) scale(1); }

/* App settings sheet and font-size controls. */
.settings-sheet { position: fixed; top: 50%; left: 50%; z-index: 20; width: min(420px, calc(100vw - 30px)); max-height: calc(100vh - 30px); overflow: auto; padding: 20px; border: 1px solid #4b4d66; border-radius: 16px; background: #30333a; box-shadow: 0 18px 55px #0009; transform: translate(-50%, -50%); }
.settings-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.settings-heading > div { display: grid; gap: 4px; }
.settings-heading span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.settings-heading h2 { margin: 0; font-size: 19px; }
.settings-heading .text-button { color: var(--muted); font-size: 22px; }
.settings-card { display: grid; gap: 15px; padding: 15px; border: 1px solid #474b56; border-radius: 13px; background: #25282f; }
.settings-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.settings-card-heading > div { min-width: 0; }
.settings-reset-button { flex: 0 0 auto; min-height: 30px; padding: 0 10px; border: 1px solid var(--accent-border); border-radius: 8px; color: var(--ink); background: var(--accent-surface); font-size: 10px; font-weight: 800; }
.settings-reset-button:hover { border-color: var(--primary); color: var(--ink); background: var(--accent-hover); }
.settings-card strong { font-size: 14px; }
.settings-card p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.settings-font-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.settings-font-options button { min-height: 42px; padding: 0 5px; border: 1px solid var(--accent-border); border-radius: 9px; color: var(--muted); background: var(--surface-strong); font-size: 10px; font-weight: 800; }
.settings-font-options button:hover, .settings-font-options button.active-font-scale { border-color: var(--accent-border); color: var(--ink); background: var(--accent-surface); }
.settings-preview { display: grid; gap: 5px; padding: 11px 12px; border-radius: 9px; background: #30333a; }
.settings-preview span { color: var(--muted); font-size: 10px; }
.settings-preview strong { color: var(--primary); font-size: 16px; }
.settings-theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.settings-theme-options button { min-height: 42px; border: 1px solid var(--accent-border); border-radius: 9px; color: var(--muted); background: var(--surface-strong); font-size: 11px; font-weight: 800; }
.settings-theme-options button:hover, .settings-theme-options button.active-theme { border-color: var(--accent-border); color: var(--ink); background: var(--accent-surface); }
.settings-push-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-push-status { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
.settings-push-toggle { flex: 0 0 auto; min-height: 38px; padding: 0 14px; border: 1px solid var(--accent-border); border-radius: 9px; color: var(--ink); background: var(--accent-surface); font-size: 11px; font-weight: 800; }
.settings-push-toggle:disabled { opacity: .62; cursor: not-allowed; }
.settings-member-card { margin-top: 12px; }
.settings-section-label { color: var(--muted); font-size: 11px; font-weight: 800; }
.settings-member-list { display: grid; gap: 7px; }
.settings-organization-section { display: grid; gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.settings-organization-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.settings-organization-heading > div { display: grid; gap: 3px; }
.settings-organization-heading strong { color: var(--primary); font-size: 13px; }
.settings-organization-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.settings-org-add-root { flex: 0 0 auto; min-height: 31px !important; padding: 0 9px !important; border: 1px solid var(--accent-border) !important; border-radius: 8px !important; color: var(--ink) !important; background: var(--accent-surface) !important; font-size: 10px !important; }
.settings-org-tree-scroll { min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 1px 0 3px; touch-action: pan-x; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--accent-border) transparent; }
.settings-org-tree-scroll::-webkit-scrollbar { height: 5px; }
.settings-org-tree-scroll::-webkit-scrollbar-track { background: transparent; }
.settings-org-tree-scroll::-webkit-scrollbar-thumb { border-radius: 99px; background: var(--accent-border); }
.settings-org-tree { min-width: max-content; padding: 0 1px 1px; }
.settings-org-node { min-width: 430px; }
.settings-org-row { display: flex; align-items: center; gap: 5px; min-height: 34px; padding: 2px 6px; border: 1px solid var(--accent-border); border-radius: 10px; color: var(--ink); background: var(--surface-strong); }
.settings-org-toggle { flex: 0 0 24px; width: 24px; min-height: 24px !important; padding: 0 !important; border: 1px solid var(--accent-border) !important; border-radius: 7px !important; color: var(--primary) !important; background: var(--accent-surface) !important; font-size: 13px !important; }
.settings-org-toggle:disabled { color: var(--muted) !important; opacity: .7; }
.settings-org-label { display: grid; min-width: 92px; gap: 2px; }
.settings-org-label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.settings-org-label small { color: var(--muted); font-size: 9px; }
.settings-org-actions { display: flex; flex-wrap: wrap; gap: 3px; margin-left: auto; }
.settings-org-action { min-height: 27px; padding: 0 7px; border: 1px solid var(--accent-border); border-radius: 7px; color: var(--ink); background: var(--accent-surface); font-size: 9px; font-weight: 800; white-space: nowrap; }
.settings-org-action:hover, .settings-org-action:focus-visible { color: var(--primary); background: var(--accent-hover); outline: none; }
.settings-org-action:disabled { cursor: not-allowed; opacity: .42; }
.settings-org-children { margin-left: 9px; padding: 0 0 0 7px; border-left: 1px solid var(--accent-border); }
.settings-org-tree > .settings-org-node + .settings-org-node,
.settings-org-children > .settings-org-node + .settings-org-node { margin-top: 1px; }
.settings-org-empty { margin: 7px 0; padding: 12px; border: 1px dashed var(--accent-border); border-radius: 9px; text-align: center; }
.settings-org-orphans { display: flex; gap: 6px; margin-top: 7px; color: var(--muted); font-size: 9px; }
.settings-org-orphans span { padding: 4px 7px; border: 1px dashed var(--accent-border); border-radius: 6px; }
.settings-member-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid #474b56; border-radius: 10px; background: #30333a; }
.settings-member-copy { min-width: 0; display: grid; gap: 3px; }
.settings-member-copy strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.settings-member-copy span { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.settings-member-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.settings-member-row button { min-height: 30px; padding: 0 8px; border: 1px solid #575b69; border-radius: 7px; color: var(--ink); background: #393c45; font-size: 10px; font-weight: 800; }
.settings-member-row .settings-member-kick { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 48%, var(--accent-border)); background: color-mix(in srgb, var(--danger) 12%, var(--surface-card)); }
.settings-member-row .settings-member-block { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 48%, var(--accent-border)); background: color-mix(in srgb, var(--danger) 12%, var(--surface-card)); }
.settings-member-row .settings-member-unblock { color: #d4f2dc; border-color: #4b7659; background: #2d4736; }
.blocked-member-row { opacity: .86; }
.settings-bot-card { margin-top: 12px; }
.settings-bot-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.settings-bot-form input { min-width: 0; padding: 10px 11px; border: 1px solid #474b56; border-radius: 9px; color: var(--ink); background: #30333a; font-size: 11px; }
.settings-bot-form button { min-height: 38px; padding: 0 12px; border-radius: 8px; color: #fff; background: var(--primary); font-size: 11px; font-weight: 800; }
:root[data-theme="light"] .settings-bot-form input { border-color: var(--line) !important; background: #ffffff !important; color: var(--ink) !important; }

/* Keyboard-visible viewport: keep the composer at the bottom of the resized WebView. */
@media (max-width: 760px) {
  .app-shell.chat-room-active .room-header { padding-top: 3px; padding-bottom: 3px; }
  .app-shell.chat-room-active #message-form { padding-bottom: max(4px, env(safe-area-inset-bottom)); }
}
@supports (height: 100dvh) {
  @media (max-width: 760px) {
    .app-shell.chat-room-active #chat-panel.active-panel { height: calc(100dvh - 58px - 64px); }
  }
}

/* The room header and composer stay fixed; only the message list is allowed to scroll. */
@media (max-width: 760px) {
  .app-shell.chat-room-active #chat-panel.active-panel {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 58px - 64px);
    min-height: 0;
    overflow: hidden;
  }
  .app-shell.chat-room-active #chat-room-view:not([hidden]) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .app-shell.chat-room-active #chat-room-view .room-header {
    position: sticky;
    top: 0;
    z-index: 4;
    min-height: 54px;
    padding: 7px 0;
    background: var(--paper);
  }
  .app-shell.chat-room-active #chat-room-view .messages {
    grid-row: 2;
    align-self: stretch;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 3px 14px;
  }
  .app-shell.chat-room-active #chat-room-view .attachment-name { grid-row: 3; }
  .app-shell.chat-room-active #chat-room-view #message-form { grid-row: 4; margin-bottom: 12px; padding-bottom: 2px; }
}

/* Android owns the bottom system area. The native wrapper reduces the WebView
   layout height when that area exists, so the whole conversation—not only the
   composer—ends above the navigation bar. On devices without it, the room
   naturally reaches the bottom edge. */
@media (max-width: 760px) {
  html.chat-room-page,
  body.chat-room-page,
  body.chat-room-page .app-shell { height: 100% !important; min-height: 0 !important; }
  body.chat-room-page .workspace-layout { height: calc(100% - 58px) !important; min-height: 0 !important; }
  body.chat-room-page .main-workspace { display: flex; flex-direction: column; height: 100% !important; min-height: 0 !important; padding-bottom: 0 !important; overflow: hidden; }
body.chat-room-page .main-workspace .content-header { flex: 0 0 64px; }
  body.chat-room-page #chat-panel.active-panel { flex: 1 1 auto; height: auto !important; min-height: 0; }
}

/* Use the WebView's real available height. The Android wrapper removes the
   system navigation inset from that height; 100dvh could extend back under it. */
@media (max-width: 760px) {
  body.chat-room-page .app-shell,
  body.chat-room-page .workspace-layout,
  body.chat-room-page .main-workspace,
  body.chat-room-page #chat-panel.active-panel,
  body.chat-room-page #chat-room-view:not([hidden]) { max-height: 100%; }
  body.chat-room-page #chat-room-view .messages { min-height: 0; }
}

/* Final compact controls and expandable task cards. */
.workspace-switcher-toggle > span:last-child {
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  transform: translateY(-2px);
}
.date-field {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.date-field::before { display: none !important; }
.date-field-display {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.date-field.has-value .date-field-display { color: var(--ink); font-weight: 600; }
.date-field > input {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  opacity: 0;
  cursor: pointer;
}
.task-fields { grid-template-columns: minmax(0, 76px) minmax(112px, 1fr) auto; }
.task-fields > #task-assignee { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-fields > .date-field {
  height: 40px;
  padding: 0 11px;
  border: 1px solid #474b56;
  border-radius: 9px;
  color: var(--muted);
  background: #30333a;
}
.task-fields > .date-field .date-field-display { font-size: 12px; }
.task-due-time-fields { height: 40px; font-size: 12px; }
.task-due-time-fields > span { font-size: 12px; }
.task-due-time-fields select { font-size: 12px; }
.task:not(.expanded) .task-main > strong,
.task:not(.expanded) .task-details {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.task.expanded .task-details { display: block; }
.task { cursor: pointer; }
.task button { cursor: pointer; }
.task-actions { display: flex; align-items: flex-start; flex: none; gap: 3px; }
.task-edit { min-height: 24px; padding: 3px 4px; border-radius: 6px; color: var(--primary); background: transparent; font-size: 10px; font-weight: 700; white-space: nowrap; }
.task-edit:hover, .task-more:hover { background: #393752; }
.task-more { display: block; margin-top: 5px; padding: 0; color: var(--primary); background: transparent; font-size: 11px; font-weight: 700; }
.board-top-actions .text-button { padding-left: 0; text-align: left; font-size: 12px; }
.board-topbar, .board-top-actions, .board-directory-heading { align-items: center; }
.board-top-actions .text-button, .board-directory-heading .text-button { align-self: center; margin: 0; line-height: 1.35; }
.board-directory-option { display: flex; align-items: center; gap: 9px; }
.board-directory-option > span { flex: 1; min-width: 0; }
.board-directory-edit {
  flex: none;
  margin-left: auto;
  padding: 7px 2px;
  color: var(--primary);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.board-directory-edit:hover { color: var(--ink); }

@media (max-width: 760px) {
  .workspace-switcher-toggle > span:last-child { font-size: 19px; transform: translateY(-2px); }
  .task-fields { grid-template-columns: minmax(0, 68px) minmax(92px, 1fr) auto; }
  .task-fields > #task-assignee { padding-left: 9px; padding-right: 9px; }
  .task-fields > .date-field { height: 38px; padding-left: 9px; padding-right: 9px; }
  .date-field-display, .task-fields > .date-field .date-field-display { font-size: 12px; }
  .task-due-time-fields, .task-due-time-fields > span, .task-due-time-fields select { font-size: 12px; }
  .task-due-time-fields { height: 38px; }
  .board-top-actions .text-button { font-size: 11px; }
  .board-topbar { align-items: center; }
}

/* Final mobile chat geometry. The native wrapper supplies only the Android
   navigation inset to this room; the category bar remains flush with the
   bottom of the normal WebView. */
@media (max-width: 760px) {
  body.chat-room-page .main-workspace { padding-bottom: 0 !important; }
  body.chat-room-page #app-content {
    display: block;
    height: calc(100% - 58px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.chat-room-page .workspace-layout {
    height: 100% !important;
    min-height: 0 !important;
  }
  body.chat-room-page #chat-panel.active-panel {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.chat-room-page #chat-room-view:not([hidden]) {
    display: grid !important;
    flex: 1 1 0 !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.chat-room-page #chat-room-view .room-header {
    position: relative !important;
    top: auto !important;
    z-index: 4;
    flex: none;
    min-height: 54px;
    background: var(--paper);
  }
  body.chat-room-page #chat-room-view .messages {
    grid-row: 2;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  body.chat-room-page #chat-room-view .attachment-name { grid-row: 3; }
  body.chat-room-page #chat-room-view #message-form {
    position: relative !important;
    grid-row: 4;
    flex: none;
    margin-bottom: calc(var(--android-bottom-inset, 0px) + 2px) !important;
    padding-bottom: 2px !important;
    background: var(--paper) !important;
    z-index: 5;
  }
}

/* Re-rendering the message list must not replay an entrance animation on
   every existing message while the Android keyboard is changing size. */
.app-shell.chat-room-active .message { animation: none !important; }
.app-shell.chat-room-active #messages { overflow-anchor: none; }

/* Final task-control sizing override. */
.task-fields { grid-template-columns: minmax(0, 92px) minmax(0, 100px) minmax(150px, 1fr) !important; }
.task-fields > .date-field { justify-content: center; padding-left: 6px; padding-right: 6px; }
.task-fields > .date-field .date-field-display { width: 100%; text-align: center; font-size: 11px; overflow: visible; }
.task-due-time-fields { min-width: 0; height: 40px; gap: 2px; font-size: 10px; }
.task-due-time-fields > span, .task-due-time-fields select { font-size: 10px; }
.task-due-time-fields > span:first-child { flex: 0 0 20px; }
.task-due-time-fields > span:nth-of-type(2) { flex: 0 0 4px; text-align: center; }
.task-due-time-fields select { flex: none; padding-left: 2px; padding-right: 2px; }
.task-due-time-fields select:first-of-type { width: 42px; min-width: 42px; }
.task-due-time-fields select:nth-of-type(2) { width: 31px; min-width: 31px; }
.task-due-time-fields select:nth-of-type(3) { width: 42px; min-width: 42px; }
.task-info .due-date.no-date { color: var(--muted); font-weight: 400; }
.task-edit { min-height: 30px; margin-top: 3px; padding: 4px 8px; font-size: 11px; }
@media (max-width: 760px) {
  .task-fields { grid-template-columns: minmax(0, 86px) minmax(0, 100px) minmax(150px, 1fr) !important; }
  .task-fields > .date-field { height: 38px; padding-left: 6px; padding-right: 6px; }
  .task-due-time-fields { height: 38px; gap: 2px; }
}

/* Keep the assignee label visible instead of truncating it to an ellipsis. */
.task-fields > #task-assignee {
  width: 100%;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 11px;
}

/* Date-like single-box time picker. The native picker opens on tap, while
   only the selected Korean time is shown in the rounded field. */
.time-field {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 40px;
  padding: 0 8px;
  border: 1px solid #474b56;
  border-radius: 9px;
  color: var(--muted);
  background: #30333a;
}
.time-field-display {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.time-field.has-value .time-field-display { color: var(--ink); font-weight: 600; }
.time-field > input {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  opacity: 0;
  cursor: pointer;
}
@media (max-width: 760px) {
  .time-field { height: 38px; padding-left: 6px; padding-right: 6px; }
  .time-field-display { font-size: 11px; }
}

/* App-styled time dialog: period buttons stay vertical on the left, followed
   by the hour and minute controls in the same order as the native picker. */
.time-field {
  width: 100%;
  border: 1px solid var(--accent-border);
  color: var(--muted);
  background: var(--surface-card);
  font: inherit;
  text-align: center;
}
.time-field:hover { border-color: var(--accent-border); background: var(--accent-hover); }
.task-time-picker {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 18px;
}
.task-time-picker-backdrop {
  position: absolute;
  inset: 0;
  background: #080a0fcc;
  backdrop-filter: blur(4px);
}
.task-time-picker-card {
  position: relative;
  width: min(390px, calc(100vw - 28px));
  padding: 19px;
  border: 1px solid var(--accent-border);
  border-radius: 18px;
  background: var(--surface-card);
  box-shadow: 0 20px 60px #000b;
}
.task-time-picker-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.task-time-picker-heading > div { display: grid; gap: 4px; }
.task-time-picker-heading span { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.task-time-picker-heading h3 { margin: 0; color: var(--ink); font-size: 20px; }
.task-time-picker-heading .text-button { padding: 0 3px; color: var(--muted); font-size: 24px; line-height: 1; }
.task-time-picker-content {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 12px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.task-time-period { display: grid; align-self: center; gap: 4px; }
.task-time-period button {
  min-height: 32px;
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface-strong);
  font-size: 11px;
  font-weight: 800;
}
.task-time-period button.active-time-period {
  border-color: var(--primary);
  color: var(--primary-contrast, #fff);
  background: var(--primary);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--primary) 28%, transparent);
}
.task-time-number { display: grid; gap: 6px; min-width: 0; }
.task-time-number > span { color: var(--muted); font-size: 10px; font-weight: 700; text-align: center; }
.task-time-number select {
  width: 100%;
  height: 48px;
  min-width: 0;
  padding: 0 7px;
  border: 1px solid var(--accent-border);
  border-radius: 11px;
  color: var(--ink);
  background: var(--accent-surface);
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}
.task-time-colon { color: var(--muted); font-size: 20px; font-weight: 800; text-align: center; }
.task-time-picker-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 19px; padding-top: 14px; border-top: 1px solid var(--line); }
.task-time-picker-actions button { min-height: 40px; padding: 0 15px; border-radius: 9px; color: var(--primary-contrast, #fff); background: var(--primary); font-size: 12px; font-weight: 800; }
.task-time-picker-actions .secondary-button { border: 1px solid var(--accent-border); color: var(--primary); background: var(--accent-surface); }
@media (max-width: 760px) {
  .task-time-picker { padding: 14px; }
  .task-time-picker-card { padding: 17px; }
  .task-time-picker-content { grid-template-columns: 58px minmax(0, 1fr) 10px minmax(0, 1fr); gap: 7px; margin-top: 15px; }
  .task-time-number select { height: 46px; font-size: 17px; }
}

/* Final time-picker alignment: AM/PM is a horizontal pair above the clock,
   and the colon is centered between the hour and minute boxes. */
.task-time-picker-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; }
.task-time-period { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.task-time-period button { min-height: 38px; }
.task-time-clock { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); align-items: end; gap: 8px; margin-top: 15px; }
.task-time-colon { align-self: end; display: grid; place-items: center; height: 48px; margin: 0; }
@media (max-width: 760px) {
  .task-time-picker-content { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .task-time-period { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .task-time-period button { min-height: 36px; }
  .task-time-clock { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); gap: 7px; margin-top: 13px; }
  .task-time-colon { height: 46px; }
}

/* Calendar-like date picker inside the app. */
.date-field {
  width: 100%;
  border: 1px solid var(--accent-border);
  color: var(--muted);
  background: var(--surface-card);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.date-field:hover { border-color: var(--accent-border); background: var(--accent-hover); }
.task-date-picker {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 18px;
}
.task-date-picker-backdrop {
  position: absolute;
  inset: 0;
  background: #080a0fcc;
  backdrop-filter: blur(4px);
}
.task-date-picker-card {
  position: relative;
  width: min(390px, calc(100vw - 28px));
  padding: 19px;
  border: 1px solid var(--accent-border);
  border-radius: 18px;
  background: var(--surface-card);
  box-shadow: 0 20px 60px #000b;
}
.task-date-picker-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.task-date-picker-heading > div { display: grid; gap: 4px; }
.task-date-picker-heading span { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.task-date-picker-heading h3 { margin: 0; color: var(--ink); font-size: 20px; }
.task-date-picker-heading .text-button { padding: 0 3px; color: var(--muted); font-size: 24px; line-height: 1; }
.task-date-picker-toolbar { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px; margin-top: 15px; }
.task-date-picker-toolbar > button { width: 40px; height: 36px; border: 1px solid var(--accent-border); border-radius: 9px; color: var(--primary); background: var(--accent-surface); font-size: 25px; line-height: 1; }
.task-date-picker-toolbar > button:hover { background: var(--accent-hover); }
.task-date-picker-toolbar strong { color: var(--ink); font-size: 16px; text-align: center; }
.task-date-picker-today { display: block; margin: 10px auto 13px; padding: 6px 11px; border: 1px solid var(--accent-border); border-radius: 99px; color: var(--primary); background: var(--accent-surface); font-size: 11px; font-weight: 800; }
.task-date-picker-today:hover { background: var(--accent-hover); }
.task-date-weekdays, .task-date-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.task-date-weekdays { margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 800; text-align: center; }
.task-date-weekdays span:first-child { color: var(--calendar-contrast-text, var(--ink)); }
.task-date-weekdays span:last-child { color: var(--primary); }
.task-date-day {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 37px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ink);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}
.task-date-day:not(.empty-day):hover { border-color: var(--accent-border); background: var(--accent-surface); }
.task-date-day.sunday-date { color: var(--calendar-contrast-text, var(--ink)); }
.task-date-day.saturday-date { color: var(--primary); }
.task-date-day.today-date { border-color: var(--accent-border); }
.task-date-day.selected-date { border-color: var(--accent-border); color: var(--primary-contrast, #fff); background: var(--primary); box-shadow: 0 5px 13px color-mix(in srgb, var(--primary) 28%, transparent); }
.task-date-day.selected-date.today-date { border-color: var(--accent-border); }
.task-date-day.empty-day { pointer-events: none; }
.task-date-picker-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.task-date-picker-actions button { min-height: 40px; padding: 0 15px; border-radius: 9px; color: var(--primary-contrast, #fff); background: var(--primary); font-size: 12px; font-weight: 800; }
.task-date-picker-actions .secondary-button { border: 1px solid var(--accent-border); color: var(--primary); background: var(--accent-surface); }
@media (max-width: 760px) {
  .task-date-picker { padding: 14px; }
  .task-date-picker-card { padding: 17px; }
  .task-date-picker-toolbar { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 7px; }
  .task-date-picker-toolbar > button { width: 36px; height: 34px; }
  .task-date-day { min-height: 35px; }
}

/* Light theme overrides must come after the custom picker styles so the
   dark-mode surfaces never leak into the light picker. */
:root[data-theme="light"] .date-field,
:root[data-theme="light"] .time-field { border-color: var(--accent-border) !important; color: var(--muted) !important; background: var(--paper) !important; }
:root[data-theme="light"] .date-field:hover,
:root[data-theme="light"] .time-field:hover { border-color: var(--accent-border) !important; background: var(--accent-surface) !important; }
:root[data-theme="light"] .date-field-display,
:root[data-theme="light"] .time-field-display { color: #5f6470 !important; }
:root[data-theme="light"] .date-field.has-value .date-field-display,
:root[data-theme="light"] .time-field.has-value .time-field-display { color: #1e1f24 !important; }
:root[data-theme="light"] .task-date-picker-card,
:root[data-theme="light"] .task-time-picker-card { border-color: var(--accent-border) !important; background: var(--surface-card) !important; box-shadow: 0 20px 60px #1d244044 !important; }
:root[data-theme="light"] .task-date-picker-heading,
:root[data-theme="light"] .task-time-picker-heading,
:root[data-theme="light"] .task-date-picker-actions,
:root[data-theme="light"] .task-time-picker-actions { border-color: var(--line) !important; }
:root[data-theme="light"] .task-date-picker-heading h3,
:root[data-theme="light"] .task-time-picker-heading h3,
:root[data-theme="light"] .task-date-picker-toolbar strong,
:root[data-theme="light"] .task-date-day,
:root[data-theme="light"] .task-time-number select { color: var(--ink) !important; }
:root[data-theme="light"] .task-date-picker-toolbar > button,
:root[data-theme="light"] .task-date-picker-today,
:root[data-theme="light"] .task-time-period button,
:root[data-theme="light"] .task-time-number select,
:root[data-theme="light"] .task-date-picker-actions .secondary-button,
:root[data-theme="light"] .task-time-picker-actions .secondary-button { border-color: var(--accent-border) !important; background: var(--accent-surface) !important; color: var(--primary) !important; }
:root[data-theme="light"] .task-date-picker-toolbar > button:hover,
:root[data-theme="light"] .task-date-picker-today:hover,
:root[data-theme="light"] .task-date-day:not(.empty-day):hover,
:root[data-theme="light"] .task-time-period button:not(.active-time-period):hover { border-color: var(--accent-border) !important; background: var(--accent-hover) !important; }
:root[data-theme="light"] .task-time-period button.active-time-period,
:root[data-theme="light"] .task-date-day.selected-date { border-color: var(--accent-border) !important; color: var(--primary-contrast, #fff) !important; background: var(--primary) !important; }
:root[data-theme="light"] .task-date-picker-backdrop,
:root[data-theme="light"] .task-time-picker-backdrop { background: #1d243066 !important; }

/* App-styled wheel for hour/minute selection. Native scrolling keeps the
   values moving with the finger; the value nearest the center is selected. */
.task-time-number .task-time-value {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: 48px;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--accent-border);
  border-radius: 11px;
  color: var(--ink);
  background: var(--accent-surface);
  font-size: 18px;
  font-weight: 800;
}
.task-time-number .task-time-value:hover { border-color: var(--accent-border); background: var(--accent-hover); }
.task-time-value > span:first-child { display: inline-flex; align-items: center; line-height: 1; }
.task-time-value-arrow {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 8px;
  height: 8px;
  transform: translateY(-65%) rotate(45deg);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--muted);
}
.task-time-choice-panel {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--accent-border);
  border-radius: 13px;
  background: var(--surface-strong);
  box-shadow: 0 10px 25px #0006;
}
.task-time-choice-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.task-time-choice-heading .text-button { padding: 0 3px; color: var(--muted); font-size: 20px; line-height: 1; }
.task-time-choice-grid.task-time-wheel {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 132px;
  min-height: 132px;
  max-height: 132px;
  padding: 0 8px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 11px;
  outline: none;
  scroll-snap-type: y proximity;
  scroll-behavior: auto;
  scroll-snap-stop: normal;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
  contain: layout paint;
  touch-action: pan-y;
  user-select: none;
}
.task-time-choice-grid.task-time-wheel::-webkit-scrollbar { display: none; }
.task-time-wheel-edge { display: block; width: 100%; pointer-events: none; }
.task-time-wheel-shell { position: relative; width: 100%; height: 132px; }
.task-time-wheel-selector {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 8px;
  left: 8px;
  height: 40px;
  transform: translateY(-50%);
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  background: var(--primary);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--primary) 28%, transparent);
  pointer-events: none;
}
.task-time-choice-grid.task-time-wheel::before {
  display: none;
}
.task-time-wheel-option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border: 0 !important;
  border-radius: 10px;
  color: var(--muted) !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 700;
  opacity: .58;
  scroll-snap-align: center;
  transition: color .12s ease, background-color .12s ease, opacity .12s ease, font-size .12s ease;
}
.task-time-wheel-option:hover { color: var(--primary) !important; background: transparent !important; opacity: .9; }
.task-time-wheel-option.active-time-choice {
  z-index: 2;
  color: var(--primary-contrast, #fff) !important;
  background: transparent !important;
  font-size: 20px !important;
  font-weight: 800;
  opacity: 1;
  box-shadow: none;
}
:root[data-theme="light"] .task-time-number .task-time-value,
:root[data-theme="light"] .task-time-choice-panel { border-color: var(--accent-border) !important; background: var(--surface-strong) !important; color: var(--ink) !important; }
:root[data-theme="light"] .task-time-value-arrow,
:root[data-theme="light"] .task-time-choice-heading { color: var(--muted) !important; }
:root[data-theme="light"] .task-time-wheel-selector { border-color: var(--accent-border); background: var(--primary); }
:root[data-theme="light"] .task-time-wheel-option { color: var(--muted) !important; }
:root[data-theme="light"] .task-time-wheel-option:hover { color: var(--primary) !important; background: transparent !important; }
:root[data-theme="light"] .task-time-wheel-option.active-time-choice { color: var(--primary-contrast, #fff) !important; background: transparent !important; }
@media (max-width: 760px) {
  .task-time-number .task-time-value { height: 46px; font-size: 17px; }
  .task-time-choice-panel { padding: 10px; }
  .task-time-wheel-shell { height: 126px; }
  .task-time-choice-grid.task-time-wheel { height: 126px; min-height: 126px; max-height: 126px; }
  .task-time-wheel-selector { height: 38px; }
  .task-time-wheel-option { height: 38px; min-height: 38px; flex-basis: 38px; }
  .task-time-wheel-option.active-time-choice { font-size: 19px !important; }
}

/* Date/time pickers can clear an existing selection without leaving a
   deadline value that is no longer visible in the form. */
.task-date-picker-actions .picker-clear-button,
.task-time-picker-actions .picker-clear-button {
  margin-right: auto;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
  background: transparent !important;
}
.task-date-picker-actions .picker-clear-button:hover,
.task-time-picker-actions .picker-clear-button:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent) !important;
}

/* App-styled board category picker; keep Android from opening its native select popup. */
.post-category-picker-field { position: relative; }
.post-category-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid #4b4f5d; border-radius: 10px; color: var(--ink); background: #30333a; font: inherit; font-size: 12px; font-weight: 700; text-align: left; }
.post-category-button:hover, .post-category-button[aria-expanded="true"] { border-color: var(--accent-border); background: var(--accent-hover); }
.post-category-button:focus-visible { outline: 2px solid #9a91ff; outline-offset: 2px; }
.post-category-button > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-category-arrow { color: var(--muted); font-size: 16px; line-height: 1; transform: translateY(-1px); }
.post-category-picker { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; padding: 18px; }
.post-category-picker-backdrop { position: absolute; inset: 0; background: #080a0fcc; backdrop-filter: blur(4px); }
.post-category-picker-card { position: relative; z-index: 1; width: min(390px, calc(100vw - 28px)); padding: 19px; border: 1px solid #4b4f5d; border-radius: 18px; background: #30333a; box-shadow: 0 20px 60px #000b; }
.post-category-picker-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #464a56; }
.post-category-picker-heading > div { display: grid; gap: 4px; }
.post-category-picker-heading span { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.post-category-picker-heading h3 { margin: 0; color: var(--ink); font-size: 20px; }
.post-category-picker-heading .text-button { padding: 0 3px; color: var(--muted); font-size: 24px; line-height: 1; }
.post-category-options { display: grid; gap: 0; margin-top: 14px; overflow: hidden; border: 1px solid #4b4f5d; border-radius: 12px; background: #272a31; }
.post-category-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 58px; padding: 0 15px; border: 0; border-bottom: 1px solid #464a56; color: var(--ink); background: transparent; text-align: left; font: inherit; font-size: 15px; font-weight: 700; }
.post-category-option:last-child { border-bottom: 0; }
.post-category-option:hover, .post-category-option.active-post-category { color: var(--primary); background: #393752; }
.post-category-option:focus-visible { position: relative; z-index: 1; outline: 2px solid #9a91ff; outline-offset: -2px; }
.post-category-radio { width: 20px; height: 20px; flex: none; border: 2px solid #858a9a; border-radius: 50%; background: transparent; }
.post-category-option.active-post-category .post-category-radio { border-color: var(--primary); box-shadow: inset 0 0 0 4px #272a31; background: var(--primary); }
@media (max-width: 760px) {
  .post-category-picker { padding: 14px; }
  .post-category-picker-card { padding: 17px; }
  .post-category-option { min-height: 56px; padding: 0 14px; font-size: 14px; }
}
:root[data-theme="light"] .post-category-button { border-color: #dfe2eb !important; color: #1e1f24 !important; background: #ffffff !important; }
:root[data-theme="light"] .post-category-button:hover, :root[data-theme="light"] .post-category-button[aria-expanded="true"] { border-color: var(--accent-border) !important; background: var(--accent-hover) !important; }
:root[data-theme="light"] .post-category-picker-backdrop { background: #1d243066 !important; }
:root[data-theme="light"] .post-category-picker-card { border-color: #dfe2eb !important; background: #ffffff !important; box-shadow: 0 20px 60px #1d244044 !important; }
:root[data-theme="light"] .post-category-picker-heading { border-color: #e3e6f0 !important; }
:root[data-theme="light"] .post-category-picker-heading h3 { color: #1e1f24 !important; }
:root[data-theme="light"] .post-category-options { border-color: #d9dcf0 !important; background: #f7f8fc !important; }
:root[data-theme="light"] .post-category-option { border-color: #e3e6f0 !important; color: #1e1f24 !important; background: #ffffff !important; }
:root[data-theme="light"] .post-category-option:hover, :root[data-theme="light"] .post-category-option.active-post-category { color: var(--primary) !important; background: var(--accent-surface) !important; }
:root[data-theme="light"] .post-category-radio { border-color: #a0a5b2; }
:root[data-theme="light"] .post-category-option.active-post-category .post-category-radio { border-color: var(--primary); box-shadow: inset 0 0 0 4px var(--surface-card); background: var(--primary); }

/* App-styled assignee picker; the hidden select remains the form's value source. */
.task-fields > .task-assignee-button { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-width: 0; height: 40px; padding: 0 8px; border: 1px solid #474b56; border-radius: 9px; color: var(--ink); background: #30333a; font: inherit; font-size: 12px; font-weight: 700; text-align: left; }
.task-assignee-button:hover, .task-assignee-button[aria-expanded="true"] { border-color: var(--accent-border); background: var(--accent-hover); }
.task-assignee-button:focus-visible { outline: 2px solid #9a91ff; outline-offset: 2px; }
.task-assignee-button > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-assignee-arrow { flex: none; color: var(--muted); font-size: 16px; line-height: 1; transform: translateY(-1px); }
.task-assignee-picker { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; padding: 18px; }
.task-assignee-picker-backdrop { position: absolute; inset: 0; background: #080a0fcc; backdrop-filter: blur(4px); }
.task-assignee-picker-card { position: relative; z-index: 1; width: min(390px, calc(100vw - 28px)); max-height: min(520px, calc(100vh - 36px)); overflow: auto; padding: 19px; border: 1px solid #4b4f5d; border-radius: 18px; background: #30333a; box-shadow: 0 20px 60px #000b; }
.task-assignee-picker-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #464a56; }
.task-assignee-picker-heading > div { display: grid; gap: 4px; }
.task-assignee-picker-heading span { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.task-assignee-picker-heading h3 { margin: 0; color: var(--ink); font-size: 20px; }
.task-assignee-picker-heading .text-button { padding: 0 3px; color: var(--muted); font-size: 24px; line-height: 1; }
.task-assignee-options { display: grid; gap: 0; margin-top: 14px; overflow: hidden; border: 1px solid #4b4f5d; border-radius: 12px; background: #272a31; }
.task-assignee-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 58px; padding: 0 15px; border: 0; border-bottom: 1px solid #464a56; color: var(--ink); background: transparent; font: inherit; font-size: 15px; font-weight: 700; text-align: left; }
.task-assignee-option:last-child { border-bottom: 0; }
.task-assignee-option:hover, .task-assignee-option.active-task-assignee { color: var(--primary); background: #393752; }
.task-assignee-option:focus-visible { position: relative; z-index: 1; outline: 2px solid #9a91ff; outline-offset: -2px; }
.task-assignee-radio { width: 20px; height: 20px; flex: none; border: 2px solid #858a9a; border-radius: 50%; background: transparent; }
.task-assignee-option.active-task-assignee .task-assignee-radio { border-color: var(--primary); box-shadow: inset 0 0 0 4px #272a31; background: var(--primary); }
@media (max-width: 760px) {
  .task-fields > .task-assignee-button { height: 38px; }
  .task-assignee-picker { padding: 14px; }
  .task-assignee-picker-card { padding: 17px; }
  .task-assignee-option { min-height: 56px; padding: 0 14px; font-size: 14px; }
}
:root[data-theme="light"] .task-fields > .task-assignee-button { border-color: #dfe2eb !important; color: #1e1f24 !important; background: #ffffff !important; }
:root[data-theme="light"] .task-assignee-button:hover, :root[data-theme="light"] .task-assignee-button[aria-expanded="true"] { border-color: var(--accent-border) !important; background: var(--accent-hover) !important; }
:root[data-theme="light"] .task-assignee-picker-backdrop { background: #1d243066 !important; }
:root[data-theme="light"] .task-assignee-picker-card { border-color: #dfe2eb !important; background: #ffffff !important; box-shadow: 0 20px 60px #1d244044 !important; }
:root[data-theme="light"] .task-assignee-picker-heading { border-color: #e3e6f0 !important; }
:root[data-theme="light"] .task-assignee-picker-heading h3 { color: #1e1f24 !important; }
:root[data-theme="light"] .task-assignee-options { border-color: #d9dcf0 !important; background: #f7f8fc !important; }
:root[data-theme="light"] .task-assignee-option { border-color: #e3e6f0 !important; color: #1e1f24 !important; background: #ffffff !important; }
:root[data-theme="light"] .task-assignee-option:hover, :root[data-theme="light"] .task-assignee-option.active-task-assignee { color: var(--primary) !important; background: var(--accent-surface) !important; }
:root[data-theme="light"] .task-assignee-radio { border-color: #a0a5b2; }
:root[data-theme="light"] .task-assignee-option.active-task-assignee .task-assignee-radio { border-color: var(--primary); box-shadow: inset 0 0 0 4px var(--surface-card); background: var(--primary); }

/* Compact home summary cards without changing their bottom alignment. */
.main-workspace.home-view #home-panel.active-panel .home-cards .home-card { min-height: 58px !important; padding: 4px 8px; }
.home-card > .home-card-copy { gap: 1px 7px; }
.home-card .home-card-count { display: grid; grid-column: 2; grid-row: 1 / span 2; align-content: center; justify-items: center; gap: 1px; min-width: 0; line-height: 1; }
.home-card .home-card-count .home-card-new { grid-column: auto; grid-row: auto; color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .08em; line-height: 1; }
.home-card .home-card-count strong { grid-column: auto; grid-row: auto; margin: 0; font-size: 23px; line-height: 1; }
@media (max-width: 760px) {
  .main-workspace.home-view #home-panel.active-panel .home-cards .home-card { min-height: 46px !important; padding: 4px 4px; }
  .home-card > .home-card-copy { gap: 1px 4px; }
  .home-card .home-card-count .home-card-new { font-size: 6px; }
  .home-card .home-card-count strong { font-size: 17px; }
}

/* Accent palette controls. The selected color is applied consistently to
   primary actions, icons, active states, and app-styled picker controls. */
:root { --accent-surface: #393752; --accent-hover: #443f68; --accent-border: #514d79; --accent-icon: #3b3858; }
.icon-button, .secondary-button, .schedule-calendar-button, .refresh-button, .home-link, .module-add, .task-sort-toggle, .task-date-picker-toolbar > button, .task-date-picker-today, .task-date-picker-actions .secondary-button, .task-time-picker-actions .secondary-button { border-color: var(--accent-border) !important; background: var(--accent-surface) !important; }
.task-time-period button.active-time-period { border-color: var(--primary) !important; color: #fff !important; background: var(--primary) !important; }
.icon-button:hover, .secondary-button:hover, .schedule-calendar-button:hover, .refresh-button:hover, .home-link:hover, .module-add:hover, .task-sort-toggle:hover, .task-sort-toggle[aria-expanded="true"], .task-date-picker-toolbar > button:hover, .task-date-picker-today:hover { background: var(--accent-hover) !important; }
.home-card-icon, .home-notice-icon, .room-icon, .room-header-avatar, .chat-room-list-avatar, .chat-member-avatar, .chat-participant-avatar, .profile-avatar, .member-avatar { background: var(--accent-icon) !important; color: var(--primary) !important; }
.rail-logo, .board-compose-fab, .task-compose-fab, .auth-card form button, .task-form > button, .compose-row button, .chat-room-sheet-action, .chat-room-create-actions > button:last-child, .app-dialog-confirm, .task-time-picker-actions button:not(.secondary-button), .task-date-picker-actions button:not(.secondary-button) { border-color: var(--accent-border) !important; background: var(--primary) !important; }
.rail-button:hover, .rail-button.active, .header-icon:hover, .room-header-action:hover, .workspace-option:hover, .workspace-option.active-workspace, .notification-item:hover, .chat-room-menu button:hover, .attachment-menu button:hover, .attachment-menu button:focus-visible, .task-sort-menu button:hover, .task-sort-menu button.active-task-sort, .filter.active-filter, .board-filter:hover, .board-filter.active-board-filter, .global-search-category, .chat-drawer-tabs button.active-drawer-tab { background: var(--accent-surface) !important; }
.task-time-number .task-time-value, .post-category-button, .task-fields > .task-assignee-button { border-color: var(--accent-border) !important; background: var(--accent-surface) !important; }
.task-time-number .task-time-value:hover, .post-category-button:hover, .post-category-button[aria-expanded="true"], .task-assignee-button:hover, .task-assignee-button[aria-expanded="true"] { background: var(--accent-hover) !important; }
.task-time-wheel-selector, .task-date-day.selected-date { border-color: var(--accent-border) !important; background: var(--primary) !important; }
.post-category-option:hover, .post-category-option.active-post-category, .task-assignee-option:hover, .task-assignee-option.active-task-assignee { border-color: var(--accent-border) !important; color: var(--primary) !important; background: var(--accent-surface) !important; }
.post-category-picker-card, .task-assignee-picker-card { border-color: var(--accent-border); }
.settings-accent-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.settings-accent-option { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 8px; border: 1px solid #474b56; border-radius: 9px; color: var(--muted); background: #30333a; font-size: 11px; font-weight: 800; }
.settings-accent-option:hover, .settings-accent-option.active-accent { border-color: var(--accent-border); color: var(--ink); background: var(--accent-surface); }
.accent-swatch { width: 16px; height: 16px; flex: none; border: 2px solid #ffffff55; border-radius: 50%; background: var(--accent-swatch); box-shadow: 0 2px 7px #0004; }
.settings-accent-option.active-accent .accent-swatch { border-color: #fff; box-shadow: 0 0 0 2px var(--primary), 0 2px 7px #0004; }
.topbar .brand-mark, .auth-brand .brand-mark { background: linear-gradient(140deg, var(--theme-primary), var(--primary-dark)) !important; }
.email-code-row button,
.email-code-row button:hover,
.email-code-row button:focus-visible { border-color: var(--primary) !important; background: var(--primary) !important; color: #fff !important; }
.workspace-switcher-toggle { border-color: var(--accent-border) !important; background: var(--accent-surface) !important; }
.profile-invite-result, .settings-font-options button:hover, .settings-font-options button.active-font-scale, .settings-theme-options button:hover, .settings-theme-options button.active-theme, .chat-member-option:has(input:checked) { border-color: var(--accent-border) !important; background: var(--accent-surface) !important; }
:root[data-theme="light"] .settings-font-options button:hover, :root[data-theme="light"] .settings-font-options button.active-font-scale, :root[data-theme="light"] .settings-theme-options button:hover, :root[data-theme="light"] .settings-theme-options button.active-theme { color: var(--ink) !important; }
@media (max-width: 760px) {
  .settings-accent-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .settings-accent-option { min-height: 38px; padding: 0 7px; font-size: 10px; }
  .accent-swatch { width: 15px; height: 15px; }
}
:root[data-theme="light"] .settings-accent-option { border-color: #d9dcf0; color: #6b7080; background: #ffffff; }
:root[data-theme="light"] .settings-accent-option:hover, :root[data-theme="light"] .settings-accent-option.active-accent { border-color: var(--accent-border) !important; color: #1e1f24; background: var(--accent-surface) !important; }

/* Keep the mobile home tab aligned with the selected theme color. */
.mobile-nav .home-nav-action { color: var(--primary) !important; }

/* The selected palette also controls the app surfaces, not just the accents. */
:root { --surface-card: #30333a; --surface-strong: #25282f; --surface-alt: #383c45; }
:root { --primary-contrast: #ffffff; }
body, .app-shell { background: var(--canvas) !important; }
.topbar, .workspace-layout, .main-workspace, .auth-card { background: var(--paper) !important; }
.app-rail, .workspace-sidebar, .mobile-nav { background: var(--rail) !important; }
.compose-row { background: linear-gradient(0deg, var(--paper) 72%, transparent) !important; }
.schedule-card, .home-card, .post, .task,
.chat-participant-row, .chat-drawer-item, .chat-member-option,
.board-directory, .board-compose-sheet, .post-category-picker-card,
.task-assignee-picker-card, .task-date-picker-card, .task-time-picker-card,
.app-dialog, .profile-sheet, .settings-sheet, .chat-room-sheet,
.chat-room-create-sheet { background: var(--surface-card) !important; }
.more-menu, .notification-panel, .chat-room-menu, .attachment-menu,
.task-sort-menu, .post-category-options, .task-assignee-options,
.settings-card, .task-time-choice-panel { background: var(--surface-strong) !important; }
.message p, .home-notice, .settings-preview { background: var(--surface-alt) !important; }

/* Light mode has more specific legacy rules above; repeat the palette bindings
   here so the selected light color wins over those fixed white backgrounds. */
:root[data-theme="light"] body,
:root[data-theme="light"] .app-shell { background: var(--canvas) !important; }
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .workspace-layout,
:root[data-theme="light"] .main-workspace,
:root[data-theme="light"] .auth-card { background: var(--paper) !important; }
:root[data-theme="light"] .app-rail,
:root[data-theme="light"] .workspace-sidebar,
:root[data-theme="light"] .mobile-nav { background: var(--rail) !important; }
:root[data-theme="light"] .category-search,
:root[data-theme="light"] .sidebar-search,
:root[data-theme="light"] .auth-card input,
:root[data-theme="light"] .task-form input,
:root[data-theme="light"] .task-form textarea,
:root[data-theme="light"] .post-form input,
:root[data-theme="light"] .post-form textarea,
:root[data-theme="light"] .post-form select,
:root[data-theme="light"] .compose-row input { background: var(--surface-alt) !important; }
:root[data-theme="light"] .schedule-card,
:root[data-theme="light"] .home-card,
:root[data-theme="light"] .post,
:root[data-theme="light"] .task,
:root[data-theme="light"] .chat-participant-row,
:root[data-theme="light"] .chat-drawer-item,
:root[data-theme="light"] .chat-member-option,
:root[data-theme="light"] .board-directory,
:root[data-theme="light"] .board-compose-sheet,
:root[data-theme="light"] .post-category-picker-card,
:root[data-theme="light"] .task-assignee-picker-card,
:root[data-theme="light"] .task-date-picker-card,
:root[data-theme="light"] .task-time-picker-card,
:root[data-theme="light"] .app-dialog,
:root[data-theme="light"] .profile-sheet,
:root[data-theme="light"] .settings-sheet,
:root[data-theme="light"] .chat-room-sheet,
:root[data-theme="light"] .chat-room-create-sheet { background: var(--surface-card) !important; }
:root[data-theme="light"] .more-menu,
:root[data-theme="light"] .notification-panel,
:root[data-theme="light"] .chat-room-menu,
:root[data-theme="light"] .attachment-menu,
:root[data-theme="light"] .task-sort-menu,
:root[data-theme="light"] .post-category-options,
:root[data-theme="light"] .task-assignee-options,
:root[data-theme="light"] .settings-card,
:root[data-theme="light"] .task-time-choice-panel { background: var(--surface-strong) !important; }
:root[data-theme="light"] .message p,
:root[data-theme="light"] .home-notice,
:root[data-theme="light"] .settings-preview { background: var(--surface-alt) !important; }
:root[data-theme="light"] .compose-row { background: linear-gradient(0deg, var(--paper) 72%, transparent) !important; }

/* Final chat-only theme bindings. These stay last so the native/direct chat
   layout cannot fall back to the old dark surface rules. */
body.chat-room-page,
body.chat-room-page .app-shell,
body.chat-room-page .workspace-layout,
body.chat-room-page .main-workspace,
body.chat-room-page #chat-panel.active-panel { background: var(--canvas) !important; }
#chat-room-view:not([hidden]) { background: var(--canvas) !important; }
#chat-room-view:not([hidden]) .room-header,
body.chat-room-page #chat-room-view .room-header,
.app-shell.chat-room-active #chat-room-view .room-header {
  border-bottom: 2px solid var(--primary) !important;
  background: var(--rail) !important;
  box-shadow: 0 7px 16px -12px var(--accent-border) !important;
}
#chat-room-view:not([hidden]) .messages { background: var(--canvas) !important; color: var(--ink) !important; }
#chat-room-view:not([hidden]) .message p { background: var(--surface-alt) !important; color: var(--ink) !important; }
#chat-room-view:not([hidden]) .compose-row { background: var(--paper) !important; }
#chat-room-view:not([hidden]) .compose-row input,
#chat-room-view:not([hidden]) .file-button { background: var(--surface-alt) !important; color: var(--ink) !important; }
#chat-room-view:not([hidden]) .compose-row,
#chat-room-view:not([hidden]) .compose-row input,
#chat-room-view:not([hidden]) .compose-row button,
#chat-room-view:not([hidden]) .file-button { box-shadow: none !important; }
#chat-room-view:not([hidden]) .compose-row button[type="submit"] { padding-inline: 13px; }

/* Mobile home uses a fixed viewport shell. Only the task list may scroll when
   the number of home tasks exceeds the available space. */
@media (max-width: 760px) {
  html.home-page,
  body.home-page {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  body.home-page .app-shell {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.home-page #app-content {
    height: calc(100% - 58px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.home-page .workspace-layout {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.home-page .main-workspace.home-view {
    display: flex;
    flex-direction: column;
    height: 100% !important;
    min-height: 0 !important;
    padding-bottom: var(--home-nav-space, 56px) !important;
    overflow: hidden !important;
  }
  body.home-page .main-workspace.home-view .content-header {
    flex: 0 0 64px;
  }
  body.home-page .main-workspace.home-view #home-panel.active-panel {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.home-page .main-workspace.home-view #home-task-section {
    min-height: 0;
  }
  body.home-page .main-workspace.home-view #home-task-section .home-task-list {
    min-height: 0;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}

/* Keep the three task selectors visually balanced on phones and desktop. */
.task-fields { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.task-fields > #task-assignee,
.task-fields > .date-field,
.task-fields > .time-field { width: 100% !important; min-width: 0; }

/* App-styled reminder explanation shown after a time is set. */
.task-reminder-notice {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
}
.task-reminder-notice-backdrop {
  position: absolute;
  inset: 0;
  background: #0d1018b8;
  backdrop-filter: blur(5px);
}
.task-reminder-notice-card {
  position: relative;
  width: min(360px, 100%);
  padding: 20px;
  border: 1px solid var(--accent-border);
  border-radius: 18px;
  color: var(--ink);
  background: var(--surface-card);
  box-shadow: 0 18px 55px #000b;
}
.task-reminder-notice-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}
.task-reminder-notice-heading > div { display: grid; gap: 5px; }
.task-reminder-notice-heading span { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.task-reminder-notice-heading h3 { margin: 0; font-size: 18px; }
.task-reminder-notice-heading .text-button { padding: 0; color: var(--muted); font-size: 22px; line-height: 1; }
.task-reminder-notice-card > p { margin: 17px 0 20px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.task-reminder-notice-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.task-reminder-notice-actions label { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.task-reminder-notice-actions input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.task-reminder-notice-actions .secondary-button { min-height: 40px; padding: 0 15px; }
:root[data-theme="light"] .task-reminder-notice-backdrop { background: #18213a66; }

/* Make the task reminder switch visible without inheriting the text-input box
   sizing, and keep it clearly unavailable until a time is chosen. */
.task-reminder-toggle {
  display: inline-flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.task-reminder-toggle input {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px;
  accent-color: var(--primary);
  background: transparent !important;
}
.task-reminder-toggle.without-time { opacity: .55; }

/* Keep the reminder option beside the time-picker actions so the task form
   does not grow by another full row. */
.task-time-picker-actions { align-items: center; }
.task-time-picker-actions .time-picker-reminder-toggle {
  grid-column: auto;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 2px;
  white-space: nowrap;
  font-size: 10px;
}
.task-time-picker-actions .time-picker-reminder-toggle input {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
}

/* Show the enabled reminder directly after the deadline, matching the
   purple bell used in the category header. */
.task-info .task-reminder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin: 0;
  color: var(--primary);
  vertical-align: middle;
  overflow: visible;
}
.task-info .due-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.task-info .task-reminder-icon .bell-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

/* Keep author, assignee, deadline, and reminder bell on one compact line. */
.task-info {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
}
.task-info > span {
  flex: 0 0 auto;
  margin-right: 0;
}
.task-info > .due-date {
  flex: 0 0 auto;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
}
.task-info > .due-date .task-reminder-icon {
  flex: 0 0 15px;
}

/* The rounded input and send button are the chat controls; the row around
   them should not look like a second rectangular input box. */
#chat-room-view:not([hidden]) .compose-row { background: transparent !important; }

/* Keep every mobile navigation item on the same icon and label baselines. */
@media (max-width: 760px) {
  .mobile-nav {
    align-items: start;
    padding: 5px 4px max(5px, env(safe-area-inset-bottom));
  }
  .mobile-nav > button,
  .mobile-nav > button.home-nav-action {
    display: grid;
    grid-template-rows: 28px 14px;
    align-content: start;
    align-items: center;
    justify-items: center;
    gap: 2px;
    height: 44px;
    padding: 0 1px;
    line-height: 1;
  }
  .mobile-nav > button > span:first-child,
  .mobile-nav > button:not(.home-nav-action) > span:first-child,
  .mobile-nav .home-nav-action.active > span:first-child {
    display: grid;
    place-items: center;
    grid-row: 1;
    width: 28px;
    height: 28px;
    margin: 0;
    line-height: 1;
  }
  .mobile-nav > button > .mobile-nav-icon {
    width: 28px;
    height: 28px;
    margin: 0;
  }
  .mobile-nav > button > .mobile-nav-icon svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mobile-nav > button > small { grid-row: 2; align-self: start; line-height: 14px; }
}

/* Final alignment and interaction styles. Keep these after the legacy
   compatibility rules above so they win in both themes and on mobile. */
.board-directory {
  --board-directory-row-pad: 11px;
  --board-directory-action-width: 104px;
  --board-directory-delete-width: 64px;
}
.board-directory-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-inline: var(--board-directory-row-pad);
}
.board-directory-heading > .board-directory-heading-title {
  display: grid;
  grid-column: 1;
  gap: 4px;
}
.board-directory-heading > .board-directory-heading-action {
  display: flex;
  grid-column: 2;
  width: auto;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.board-directory-heading .board-directory-close {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  justify-self: end;
  padding: 7px 0;
  text-align: right;
  white-space: nowrap;
}
.board-directory > p {
  margin-right: var(--board-directory-row-pad);
  margin-left: var(--board-directory-row-pad);
}
.board-directory-option {
  display: block;
  padding: 10px 11px;
}
.board-directory-main {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) var(--board-directory-action-width) var(--board-directory-delete-width);
  align-items: center;
  gap: 9px;
}
.board-directory-main > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-directory-edit {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0;
  min-height: 36px;
  padding: 7px 6px;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  background: var(--accent-surface);
  text-align: right;
  white-space: nowrap;
}
.board-directory-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 7px 6px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line));
  border-radius: 8px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.board-directory-delete:hover { color: var(--ink); background: var(--accent-surface); }
.board-directory-delete:disabled { cursor: not-allowed; opacity: .45; }
.board-directory-access {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.board-directory-access-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.board-directory-visibility-control {
  position: relative;
  min-width: 0;
  grid-column: 2 / -1;
}
.board-directory-visibility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 28px 0 9px;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  color: var(--ink);
  background: var(--accent-surface);
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  appearance: none;
  box-sizing: border-box;
}
.board-directory-visibility::after {
  content: '⌄';
  position: absolute;
  right: 10px;
  color: var(--primary);
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
}
.board-directory-visibility-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  z-index: 20;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  background: var(--surface-strong);
  box-shadow: 0 12px 26px #0008;
}
.board-directory-visibility-option {
  min-height: 34px;
  padding: 0 9px;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.board-directory-visibility-option:hover,
.board-directory-visibility-option[aria-selected="true"] {
  color: var(--primary);
  background: var(--accent-surface);
}
.board-directory-people-summary {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  max-width: 105px;
  overflow: hidden;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-directory-access-save {
  grid-column: 3;
  grid-row: 2;
  align-self: start;
  justify-self: end;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  color: #fff;
  background: var(--primary);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.board-directory-members {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 6px;
  max-height: 104px;
  overflow-y: auto;
  padding-top: 0;
  align-content: start;
}
.board-directory-member {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: var(--surface-strong);
  font-size: 10px;
  font-weight: 700;
}
.board-directory-member:has(input:checked) { border-color: var(--accent-border); color: var(--ink); background: var(--accent-surface); }
.board-directory-member input { width: 15px; height: 15px; flex: none; accent-color: var(--primary); }
.board-directory-member span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-directory-members-empty { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.post-meta { padding-right: 104px; }
.post-body {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.post.expanded .post-body { display: block; }
.post-more {
  display: block;
  margin-top: 6px;
  padding: 0;
  color: var(--primary);
  background: transparent;
  font-size: 11px;
  font-weight: 800;
}
.post-more:hover,
.post-edit:hover,
.post-delete:hover {
  color: var(--ink);
  background: var(--accent-surface);
}
.post-actions {
  position: absolute;
  top: 11px;
  right: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.post-edit,
.post-delete {
  position: static;
  min-width: 46px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  color: var(--muted);
  background: var(--accent-surface);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.post-edit { color: var(--primary); }
.post-delete { color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 10%, transparent) !important; }

@keyframes taskUpdatedFlash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  18%, 58% { box-shadow: 0 0 0 2px var(--primary), 0 0 12px var(--primary); }
  36%, 76% { box-shadow: 0 0 0 0 transparent; }
}
.task.task-updated { animation: taskUpdatedFlash 1.9s ease-in-out; }

.workspace-switcher-toggle {
  min-width: 170px;
  justify-content: flex-start;
  gap: 8px;
}
#workspace-switcher-label {
  min-width: 0;
  flex: 1;
  max-width: none;
  max-width: none;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-switcher-chevron {
  flex: none;
  color: var(--primary) !important;
  font-size: 17px !important;
  line-height: 1;
}

.profile-photo-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.visually-hidden-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

.settings-accent-help {
  margin: -8px 0 0 !important;
  font-size: 10px !important;
}
.settings-accent-card {
  display: grid;
  gap: 15px;
  padding-top: 2px;
  border-top: 1px solid var(--line);
}
.settings-accent-card > div:first-child strong { font-size: 13px; }
.settings-accent-card > div:first-child p { margin-top: 4px; }
.settings-accent-fine-tune {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}
.settings-accent-fine-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.settings-accent-fine-row input[type="range"] {
  width: 100%;
  min-height: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 99px;
  accent-color: var(--primary);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  position: relative;
  z-index: 1;
}
.settings-accent-fine-row input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 99px; background: var(--fine-track, var(--accent-surface)); }
.settings-accent-fine-row input[type="range"]::-moz-range-track { height: 10px; border-radius: 99px; background: var(--fine-track, var(--accent-surface)); }
.settings-accent-fine-row input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -4px; border: 2px solid var(--primary); border-radius: 50%; background: #fff; box-shadow: 0 2px 7px #0005; appearance: none; }
.settings-accent-fine-row input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--primary); border-radius: 50%; background: #fff; box-shadow: 0 2px 7px #0005; }
.settings-accent-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px 76px;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-top: 9px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: var(--surface-strong);
  font-size: 10px;
  font-weight: 800;
}
.settings-accent-preview > span:nth-child(2) { width: 22px; height: 22px; border: 2px solid #fff8; border-radius: 50%; background: var(--primary); box-shadow: 0 2px 7px #0005; }
.settings-accent-preview output { padding: 5px 4px; border-radius: 5px; color: var(--ink); background: var(--accent-surface); font: 10px/1 monospace; text-align: center; }
.settings-accent-fine-row output {
  padding: 4px 3px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  font: 10px/1 monospace;
  text-align: center;
}

#chat-room-view .messages {
  padding: 8px 16px 8px 3px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 58%, transparent) color-mix(in srgb, var(--accent-border) 28%, transparent);
  scrollbar-gutter: stable;
}
#chat-room-view .messages::-webkit-scrollbar { width: 6px; }
#chat-room-view .messages::-webkit-scrollbar-track {
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent-border) 28%, transparent);
}
#chat-room-view .messages::-webkit-scrollbar-thumb {
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--accent-border) 35%, transparent);
  border-radius: 99px;
  background: color-mix(in srgb, var(--primary) 58%, transparent);
}
#chat-room-view .messages::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--primary) 70%, transparent); }

.chat-list-heading {
  align-items: center;
  min-height: 60px;
  padding: 10px 0;
}
.chat-list-heading > div { align-self: center; }
#chat-room-create {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0 12px;
  line-height: 1;
}

@media (max-width: 760px) {
  .workspace-switcher-toggle { min-width: 0; max-width: 180px; }
  .workspace-switcher-toggle > span:first-child { max-width: none; }
  #workspace-switcher-label { overflow: hidden; text-overflow: ellipsis; }
  #chat-room-view .messages { padding-right: 14px; }
  .settings-accent-fine-row { grid-template-columns: 44px minmax(0, 1fr) 40px; }
}

/* The shared trash sheet keeps deleted posts, tasks, and boards visible in
   the same compact visual language as the other app dialogs. */
.trash-sheet {
  position: fixed;
  inset: 0;
  z-index: 22;
  display: grid;
  place-items: center;
  padding: 15px;
  background: #0d1018b8;
  backdrop-filter: blur(5px);
}
.trash-sheet-backdrop { position: absolute; inset: 0; }
.trash-sheet-card {
  position: relative;
  width: min(460px, 100%);
  max-height: min(640px, calc(100vh - 30px));
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--accent-border);
  border-radius: 18px;
  color: var(--ink);
  background: var(--surface-card);
  box-shadow: 0 18px 55px #0009;
}
.trash-sheet-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.trash-sheet-heading > div { display: grid; gap: 4px; }
.trash-sheet-heading span { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.trash-sheet-heading h2 { margin: 0; font-size: 19px; }
.trash-sheet-heading .text-button { padding: 0; color: var(--muted); font-size: 22px; line-height: 1; }
.trash-sheet-card > p { margin: 0 0 13px; color: var(--muted); font-size: 11px; line-height: 1.5; }
#trash-list { display: grid; gap: 7px; }
.trash-empty { margin: 24px 0; text-align: center; }
.trash-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-strong); }
.trash-item-copy { min-width: 0; display: grid; gap: 4px; }
.trash-item-meta { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.trash-kind { padding: 3px 6px; border-radius: 5px; color: var(--primary); background: var(--accent-surface); font-size: 9px; font-weight: 800; }
.trash-item-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.trash-item-copy p { margin: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.trash-item-actions { display: flex; flex: 0 0 auto; gap: 4px; }
.trash-item-actions button { min-height: 30px; padding: 0 7px; border: 1px solid var(--accent-border); border-radius: 7px; color: var(--primary); background: var(--accent-surface); font-size: 10px; font-weight: 800; white-space: nowrap; }
.trash-item-actions button:last-child { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: transparent; }
.trash-item-actions button:hover { color: var(--ink); background: var(--accent-hover); }
:root[data-theme="light"] .trash-sheet { background: #18213a66; }
:root[data-theme="light"] .trash-sheet-card { border-color: var(--accent-border); background: var(--surface-card); }

@media (max-width: 760px) {
  .trash-sheet-card { padding: 16px; }
  .trash-item { flex-direction: column; }
  .trash-item-actions { width: 100%; justify-content: flex-end; }
}

/* Settings are grouped into compact, independently expandable sections so the
   sheet opens with a readable overview instead of exposing every control. */
.settings-sheet > .settings-accordion {
  display: block;
  margin-top: 10px;
  padding: 0;
  overflow: hidden;
}
.settings-sheet > .settings-accordion:first-of-type { margin-top: 0; }
.settings-section-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 12px 15px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.settings-section-summary::-webkit-details-marker { display: none; }
.settings-section-summary:hover { background: var(--accent-surface); }
.settings-section-summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.settings-section-summary-copy { min-width: 0; display: grid; gap: 3px; }
.settings-section-summary-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; }
.settings-section-summary-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.settings-section-summary-copy > span { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.settings-section-chevron { flex: 0 0 auto; color: var(--muted); font-size: 18px; line-height: 1; transition: transform .18s ease; }
.settings-accordion[open] .settings-section-summary { border-bottom: 1px solid var(--line); }
.settings-accordion[open] .settings-section-chevron { color: var(--primary); transform: rotate(180deg); }
.settings-section-content {
  display: grid;
  gap: 15px;
  /* Keep the controls visibly separated from the divider and balance the
     inside spacing above and below each expanded section. */
  padding: 12px 15px;
}
.settings-section-content > :first-child { margin-top: 0; }
.settings-section-content > :last-child { margin-bottom: 0; }
.settings-section-content > p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .board-directory-main {
    grid-template-columns: 18px minmax(0, max-content) var(--board-directory-action-width) var(--board-directory-delete-width);
    justify-content: space-between;
    column-gap: 8px;
  }
  .board-directory-main > span { max-width: 90px; }
  .board-directory-access { grid-template-columns: auto minmax(0, 1fr) auto; }
  .board-directory-members { grid-column: 2; grid-row: 2; min-width: 0; }
  .board-directory-access-save { grid-column: 3; grid-row: 2; }
}

/* Recovery is a tall form on a phone. Use the real visual viewport while the
   IME is open so the dialog is centered above the keyboard instead of being
   centered in the hidden layout viewport. */
@media (max-width: 760px) {
  .account-recovery-sheet {
    top: var(--keyboard-viewport-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    height: var(--keyboard-viewport-height, 100dvh);
    min-height: 0;
    max-height: none;
    padding: 12px;
    overflow: hidden;
  }
  .account-recovery-card {
    min-height: 0;
    max-height: calc(var(--keyboard-viewport-height, 100dvh) - 24px);
    scroll-padding: 14px;
  }
  .account-recovery-sheet ~ .toast { z-index: 60; }
}

/* The chat drawer is centered in the layout viewport by default. When its
   search field opens the Android IME, lift the sheet only by the overlap with
   the visual viewport and cap its height so the lower drawer items remain
   reachable above the keyboard. */
@media (max-width: 760px) {
  .chat-room-sheet.chat-sheet-keyboard-open {
    max-height: calc(var(--keyboard-viewport-height, 100dvh) - 24px);
    scroll-padding: 14px;
    transform: translate(-50%, calc(-50% - var(--chat-sheet-keyboard-shift, 0px)));
  }
}

/* Independent text and background colors */
.app-shell { font-weight: var(--text-weight, 400); }
.settings-color-targets { display: grid; gap: 7px; margin-top: 10px; }
.settings-color-target-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: stretch; }
.settings-color-auto-row { grid-template-columns: minmax(0, 1fr); }
.settings-color-auto-row .settings-color-target { cursor: pointer; }
.settings-color-target { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; min-height: 38px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface-strong); text-align: left; font-size: 11px; font-weight: 800; }
.settings-color-target.active-color-target { border-color: var(--primary); background: var(--accent-surface); color: var(--primary); }
.settings-color-target output { overflow: hidden; min-width: 0; color: var(--muted); font: 10px/1 monospace; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.settings-color-target-swatch { width: 20px; height: 20px; border: 2px solid #fff8; border-radius: 6px; background: var(--primary); box-shadow: 0 2px 7px #0005; }
.settings-color-target-swatch-background { background: var(--canvas); }
.settings-color-main-row { margin-top: 10px; }
.settings-color-advanced { margin-top: 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-strong); }
.settings-color-advanced > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 0 10px; color: var(--ink); cursor: pointer; font-size: 11px; font-weight: 800; list-style: none; }
.settings-color-advanced > summary::-webkit-details-marker { display: none; }
.settings-color-advanced > summary::after { content: '⌄'; color: var(--muted); font-size: 15px; }
.settings-color-advanced[open] > summary::after { content: '⌃'; }
.settings-color-advanced > summary small { margin-left: auto; color: var(--muted); font-size: 9px; font-weight: 600; }
.settings-color-advanced > .settings-color-targets, .settings-color-advanced > .settings-accent-preview, .settings-color-advanced > .settings-accent-fine-tune { margin-right: 9px; margin-left: 9px; }
.settings-color-open { min-height: 38px; padding: 0 10px; border: 1px solid var(--accent-border); border-radius: 9px; color: var(--primary); background: var(--accent-surface); font-size: 10px; font-weight: 800; white-space: nowrap; }
.settings-color-open:hover { background: var(--accent-hover); }
.icon-button, .secondary-button { border-color: var(--accent-border) !important; background: var(--surface-strong) !important; }
.auth-card input, .sidebar-search, .compose-row input, .task-form input, .task-form textarea, .post-form input, .post-form textarea, .post-form select { border-color: var(--accent-border) !important; background: var(--surface-alt) !important; }
.app-rail { background: var(--rail) !important; } .workspace-sidebar { background: var(--rail) !important; }
.rail-button:hover, .rail-button.active, .workspace-nav-item:hover, .workspace-nav-item.active, .chat-room:hover, .chat-room.active, .header-icon:hover, .room-header-action:hover { background: var(--accent-surface) !important; }
.category-search, .schedule-card, .home-card, .post, .task { border-color: var(--accent-border) !important; background: var(--surface-card) !important; }
.schedule-calendar-button, .refresh-button, .home-link, .module-add, .filter.active-filter, .board-filter:hover, .board-filter.active-board-filter, .global-search-category { border-color: var(--accent-border) !important; background: var(--accent-surface) !important; }
.home-card-icon, .home-notice-icon, .room-icon, .room-header-avatar { background: var(--accent-icon) !important; } .home-notice, .message p, .post-category, .post-delete { background: var(--surface-alt) !important; }
.task .check { background: var(--surface-strong) !important; border-color: var(--accent-border) !important; } .more-menu { border-color: var(--accent-border) !important; background: var(--rail) !important; } .mobile-nav { background: color-mix(in srgb, var(--paper) 92%, var(--canvas)) !important; } .global-search-item:hover { background: var(--surface-alt) !important; }
.color-palette-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px; background: #0d1018b8; backdrop-filter: blur(7px); }
.color-palette-sheet { width: min(360px, calc(100vw - 36px)); padding: 16px; border: 1px solid var(--accent-border); border-radius: 16px; background: var(--paper); box-shadow: 0 18px 50px #0008; }
.color-palette-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.color-palette-heading strong { color: var(--ink); font-size: 15px; } .color-palette-heading p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.color-palette-close { width: 30px; height: 30px; border-radius: 8px; color: var(--muted); background: transparent; font-size: 23px; }
/* Keep all seven palette columns inside the sheet on narrow Android screens. */
.color-palette-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; gap: 9px 5px; padding: 16px 0; }
.color-palette-option { display: grid; place-items: center; width: 100%; max-width: 38px; aspect-ratio: 1; height: auto; border: 2px solid transparent; border-radius: 11px; background: transparent; }
.color-palette-option:hover, .color-palette-option:focus-visible, .color-palette-option.selected-color-palette { border-color: var(--primary); background: var(--accent-surface); } .color-palette-option span { display: block; width: 22px; height: 22px; margin: auto; border: 2px solid #fff8; border-radius: 50%; box-shadow: 0 2px 7px #0005; }

/* Active navigation and content filters must follow the selected theme. */
.rail-button:hover,
.rail-button.active,
.workspace-nav-item:hover,
.workspace-nav-item.active,
.chat-room:hover,
.chat-room.active,
.filter.active-filter,
.board-filter:hover,
.board-filter.active-board-filter,
.board-picker-option:hover,
.board-picker-option.active-board-filter,
.workspace-option:hover,
.workspace-option.active-workspace,
.chat-drawer-tabs button.active-drawer-tab {
  color: var(--ink) !important;
  border-color: var(--accent-border) !important;
  background: var(--accent-surface) !important;
}
.header-icon:hover,
.room-header-action:hover,
.notification-item:hover,
.attachment-menu button:hover {
  color: var(--ink) !important;
  background: var(--accent-surface) !important;
}
:root[data-theme="light"] .rail-button:hover,
:root[data-theme="light"] .rail-button.active,
:root[data-theme="light"] .workspace-nav-item:hover,
:root[data-theme="light"] .workspace-nav-item.active,
:root[data-theme="light"] .chat-room:hover,
:root[data-theme="light"] .chat-room.active,
:root[data-theme="light"] .filter.active-filter,
:root[data-theme="light"] .board-filter:hover,
:root[data-theme="light"] .board-filter.active-board-filter,
:root[data-theme="light"] .board-picker-option:hover,
:root[data-theme="light"] .board-picker-option.active-board-filter,
:root[data-theme="light"] .workspace-option:hover,
:root[data-theme="light"] .workspace-option.active-workspace,
:root[data-theme="light"] .chat-drawer-tabs button.active-drawer-tab,
:root[data-theme="light"] .header-icon:hover,
:root[data-theme="light"] .room-header-action:hover,
:root[data-theme="light"] .notification-item:hover,
:root[data-theme="light"] .attachment-menu button:hover {
  color: var(--ink) !important;
  border-color: var(--accent-border) !important;
  background: var(--accent-surface) !important;
}

/* Compact board-management actions and searchable designated-member dialog. */
.board-directory {
  --board-directory-action-width: 68px;
  --board-directory-delete-width: 68px;
}
.board-directory-main { gap: 4px; }
.board-directory-access {
  gap: 4px;
  margin-top: 4px;
  padding-top: 4px;
}
.board-directory-visibility-control {
  width: min(100%, calc(var(--board-directory-action-width) + var(--board-directory-delete-width) + 4px));
  justify-self: end;
}
.board-directory-visibility {
  height: 34px;
  min-height: 34px;
  padding: 0 24px 0 8px;
  font-size: 10px;
}
.board-directory-edit,
.board-directory-delete {
  box-sizing: border-box;
  min-height: 34px;
  padding: 0 3px;
  font-size: 10px;
  justify-content: center;
}
.board-directory-people-summary {
  grid-column: 2 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 34px;
  padding: 0 28px 0 9px;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  color: var(--ink);
  background: var(--accent-surface);
  font-size: 10px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.board-directory-people-summary::after { content: '›'; position: absolute; right: 10px; color: var(--primary); font-size: 17px; line-height: 1; }
.board-directory-people-summary:hover { background: var(--accent-hover); }
.board-people-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #0d1018b8;
  backdrop-filter: blur(6px);
}
.board-people-picker-card {
  width: min(410px, 100%);
  max-height: min(650px, calc(100vh - 32px));
  overflow: auto;
  padding: 17px;
  border: 1px solid var(--accent-border);
  border-radius: 18px;
  color: var(--ink);
  background: var(--surface-card);
  box-shadow: 0 18px 55px #000b;
}
.board-people-picker-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.board-people-picker-heading > div { display: grid; gap: 4px; }
.board-people-picker-heading span { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.board-people-picker-heading h3 { margin: 0; font-size: 18px; }
.board-people-picker-close { padding: 0; color: var(--muted); font-size: 24px; line-height: 1; }
.board-people-picker-card > p { margin: 11px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.board-people-picker-search { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--accent-border); border-radius: 10px; outline: none; color: var(--ink); background: var(--surface-alt); font-size: 12px; }
.board-people-picker-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.organization-department-name-field { display: grid; gap: 5px; margin-bottom: 9px; color: var(--muted); font-size: 10px; font-weight: 800; }
.organization-department-name-field input { width: 100%; box-sizing: border-box; }
.board-people-picker-departments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.board-people-picker-department { min-height: 30px; padding: 0 9px; border: 1px solid var(--accent-border); border-radius: 8px; color: var(--muted); background: var(--surface-strong); font-size: 10px; font-weight: 800; }
.board-people-picker-department:hover,
.board-people-picker-department.active-department { color: var(--ink); background: var(--accent-surface); }
.board-people-picker-list { display: grid; gap: 6px; max-height: 315px; margin-top: 11px; overflow-y: auto; padding-right: 2px; }
.board-people-picker-member { display: grid; grid-template-columns: 18px 30px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 48px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface-strong); cursor: pointer; }
.board-people-picker-member:has(input:checked) { border-color: var(--accent-border); background: var(--accent-surface); }
.board-people-picker-member input { width: 16px; height: 16px; accent-color: var(--primary); }
.board-people-picker-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--primary); background: var(--accent-icon); font-size: 11px; font-weight: 800; }
.board-people-picker-member-copy { display: grid; min-width: 0; gap: 2px; }
.board-people-picker-member-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.board-people-picker-member-copy small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.board-people-picker-empty { margin: 18px 0; color: var(--muted); font-size: 11px; text-align: center; }
.board-people-picker-actions { display: flex; align-items: center; gap: 7px; margin-top: 13px; }
.board-people-picker-count { margin-right: auto; color: var(--muted); font-size: 10px; font-weight: 800; }
.board-people-picker-actions button { min-height: 38px; padding: 0 13px; border-radius: 9px; font-size: 11px; font-weight: 800; }
.board-people-picker-apply { border: 1px solid var(--accent-border); color: #fff; background: var(--primary); }
.board-people-picker-apply:disabled { cursor: not-allowed; opacity: .45; }

@media (max-width: 760px) {
  .board-directory-main { grid-template-columns: 18px minmax(0, 1fr) var(--board-directory-action-width) var(--board-directory-delete-width); }
  .board-directory-edit, .board-directory-delete { font-size: 9px; }
  .board-people-picker-card { max-height: calc(var(--keyboard-viewport-height, 100dvh) - 24px); }
}
.mobile-nav button.active { color: var(--ink) !important; }
.mobile-nav .home-nav-action { color: var(--ink) !important; }
.mobile-nav .home-nav-action.active span { border: 1px solid var(--accent-border); background: var(--accent-surface) !important; color: var(--ink) !important; box-shadow: 0 4px 9px color-mix(in srgb, var(--primary) 22%, transparent); }
.settings-accent-fine-row input:disabled { cursor: not-allowed; opacity: .5; }

/* A white custom accent is valid. Primary-action labels must use the
   contrast color instead of a hard-coded white, otherwise the controls look
   blank when the selected accent itself is white. */
.auth-card form button,
.rail-logo,
.board-compose-fab,
.task-compose-fab,
.compose-row button,
.task-form > button,
.post-form button,
.chat-room-sheet-action,
.chat-room-create-actions > button:last-child,
.app-dialog-confirm,
.notification-action,
.profile-actions > button:last-child,
.settings-bot-form button,
.board-directory-access-save,
.board-people-picker-apply,
.workspace-settings-name-row button,
.task-time-picker-actions button:not(.secondary-button),
.task-date-picker-actions button:not(.secondary-button),
.task-time-period button.active-time-period,
.email-code-row button,
.mobile-nav .home-nav-action.active span {
  color: var(--primary-contrast, #fff) !important;
}

/* Keep settings labels and active choices in sync with the selected theme color. */
.settings-section-summary-copy > strong,
.settings-accent-card > div:first-child strong,
.settings-section-label,
.settings-color-advanced > summary,
.settings-color-target {
  color: var(--primary) !important;
}
.settings-color-target output { color: var(--muted) !important; }
.settings-reset-button,
.settings-font-options button.active-font-scale,
.settings-theme-options button.active-theme,
.settings-accent-option.active-accent {
  color: var(--primary) !important;
}
:root[data-theme="light"] .settings-font-options button.active-font-scale,
:root[data-theme="light"] .settings-theme-options button.active-theme {
  color: var(--primary) !important;
}

/* Content boxes follow the selected background palette as well as the text. */
.schedule-card,
.home-card,
.post,
.task,
.chat-room-list-item {
  border-color: var(--accent-border) !important;
  background: var(--surface-card) !important;
}
.chat-room-list-item:hover { background: var(--accent-hover) !important; }
.schedule-item { border-top-color: var(--accent-border) !important; }

/* Task-page controls must not fall back to the light-mode black palette. */
#task-subject,
#task-title,
.task-assignee-button,
.task-fields > .date-field,
.task-fields > .time-field,
.task-sort-toggle,
.task-sort-menu button,
.task-filter-list .filter {
  color: var(--ink) !important;
  border-color: var(--accent-border) !important;
  background: var(--accent-surface) !important;
}
#task-subject::placeholder,
#task-title::placeholder { color: var(--ink) !important; opacity: .78; }
.date-field-display,
.time-field-display,
.date-field.has-value .date-field-display,
.time-field.has-value .time-field-display,
.task-sort-arrow,
.task-filter-list .filter.active-filter,
.task-sort-menu button:hover,
.task-sort-menu button.active-task-sort {
  color: var(--ink) !important;
}
:root[data-theme="light"] .task-assignee-button,
:root[data-theme="light"] .task-fields > .date-field,
:root[data-theme="light"] .task-fields > .time-field,
:root[data-theme="light"] .task-sort-toggle,
:root[data-theme="light"] .task-sort-menu button {
  color: var(--ink) !important;
  border-color: var(--accent-border) !important;
  background: var(--accent-surface) !important;
}
:root[data-theme="light"] .date-field-display,
:root[data-theme="light"] .time-field-display,
:root[data-theme="light"] .date-field.has-value .date-field-display,
:root[data-theme="light"] .time-field.has-value .time-field-display {
  color: var(--ink) !important;
}

/* Override the old light-mode violet fallbacks for chat and board badges. */
:root[data-theme="light"] .chat-room-list-avatar {
  color: var(--primary) !important;
  background: var(--accent-icon) !important;
}
:root[data-theme="light"] .post-category {
  color: var(--primary) !important;
  background: var(--accent-surface) !important;
}
:root[data-theme="light"] .post-delete {
  color: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger) 45%, var(--accent-border)) !important;
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-card)) !important;
}

/* Avatar/icon tiles use the selected accent instead of the legacy violet. */
.home-card-icon,
.home-notice-icon,
.room-icon,
.room-header-avatar,
.chat-room-list-avatar,
.chat-member-avatar,
.profile-avatar,
.member-avatar {
  color: var(--primary) !important;
  background: var(--accent-icon) !important;
}
:root[data-theme="light"] .home-card-icon,
:root[data-theme="light"] .home-notice-icon,
:root[data-theme="light"] .room-icon,
:root[data-theme="light"] .room-header-avatar,
:root[data-theme="light"] .chat-room-list-avatar,
:root[data-theme="light"] .chat-member-avatar,
:root[data-theme="light"] .profile-avatar,
:root[data-theme="light"] .member-avatar {
  color: var(--primary) !important;
  background: var(--accent-icon) !important;
}

/* Chat room rows are a flat list; do not add a gray card behind each row. */
.chat-room-list-item {
  border-color: var(--line) !important;
  background: transparent !important;
}
.chat-room-list-item:hover { background: var(--accent-surface) !important; }

/* Workspace administration lives beside the workspace list heading. */
.workspace-switcher-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 7px 7px; border-bottom: 1px solid var(--line); }
.workspace-switcher-heading > strong { color: var(--muted); font-size: 10px; }
.workspace-settings-trigger { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--accent-border); border-radius: 8px; color: var(--muted); background: var(--accent-surface); }
.workspace-settings-trigger:hover, .workspace-settings-trigger:focus-visible { color: var(--primary); background: var(--accent-hover); outline: none; }
.workspace-settings-trigger svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.workspace-switcher-menu > .workspace-option:first-of-type { margin-top: 5px; }

.workspace-settings-backdrop { position: fixed; inset: 0; z-index: 48; display: grid; place-items: center; padding: 18px; background: #0d1018b8; backdrop-filter: blur(5px); }
.workspace-settings-dialog { width: min(390px, 100%); max-height: min(560px, calc(100vh - 36px)); overflow: auto; padding: 20px; border: 1px solid var(--accent-border); border-radius: 18px; color: var(--ink); background: var(--surface-card); box-shadow: 0 18px 55px #000b; transition: transform .18s ease-out; }
.workspace-settings-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.workspace-settings-heading > div { display: grid; gap: 5px; }
.workspace-settings-heading span { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.workspace-settings-heading h2 { margin: 0; font-size: 19px; }
.workspace-settings-heading .text-button { padding: 0; color: var(--muted); font-size: 24px; line-height: 1; }
.workspace-settings-description { margin: 9px 0 17px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.workspace-settings-name-form { display: grid; gap: 7px; }
.workspace-settings-name-form label { color: var(--muted); font-size: 11px; font-weight: 700; }
.workspace-settings-name-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-top: 6px; }
.workspace-settings-name-row input { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid var(--accent-border); border-radius: 10px; outline: none; color: var(--ink); background: var(--surface-alt); font-size: 13px; }
.workspace-settings-name-row input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.workspace-settings-name-row button { min-height: 43px; padding: 0 15px; border: 1px solid var(--accent-border); border-radius: 10px; color: #fff; background: var(--primary); font-size: 12px; font-weight: 800; }
.workspace-settings-name-row button:hover { background: var(--primary-dark); }
.workspace-settings-danger { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.workspace-settings-danger > div { min-width: 0; }
.workspace-settings-danger strong { color: var(--ink); font-size: 13px; }
.workspace-settings-danger p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.workspace-settings-delete { flex: none; min-height: 40px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--danger) 52%, var(--accent-border)); border-radius: 9px; color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface-card)); font-size: 12px; font-weight: 800; }
.workspace-settings-delete:hover { background: color-mix(in srgb, var(--danger) 17%, var(--surface-card)); }
:root[data-theme="light"] .workspace-settings-backdrop { background: #18213a66; }
:root[data-theme="light"] .workspace-settings-dialog { background: var(--surface-card); box-shadow: 0 18px 55px #1d24404d; }
:root[data-theme="light"] .workspace-settings-name-row input { background: var(--surface-alt); }

@media (max-width: 760px) {
  .workspace-settings-dialog { width: min(360px, 100%); padding: 18px; }
  .workspace-settings-danger { align-items: stretch; flex-direction: column; }
  .workspace-settings-delete { width: 100%; }
}

/* Opening the workspace settings must not summon the IME. Once the name
   field is deliberately focused on Android, keep the settings sheet inside
   the visual viewport and lift it only by the amount needed to leave the
   deletion area under the keyboard. */
@media (max-width: 760px) {
  .workspace-settings-backdrop.keyboard-open {
    top: var(--keyboard-viewport-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    height: var(--keyboard-viewport-height, 100dvh);
    padding: 12px;
    overflow: hidden;
  }
  .workspace-settings-backdrop.keyboard-open .workspace-settings-dialog {
    max-height: calc(var(--keyboard-viewport-height, 100dvh) - 24px);
    transform: translateY(calc(-1 * var(--workspace-settings-keyboard-shift, 64px)));
    scroll-padding-bottom: 18px;
  }
}

@media (max-width: 760px) {
  .task-toolbar { gap: 7px; }
  .task-filter-list { gap: 7px; padding-right: 0; }
  .task-filter-list .filter { min-height: 36px; padding-right: 7px; padding-left: 7px; font-size: 11px; }
}

/* Keep the five task filters and the sort control on one shared alignment
   grid. This makes the final sort box reach the same right edge as the task
   cards while distributing the whitespace evenly between every item. */
.task-toolbar {
  display: grid;
  grid-template-columns: repeat(5, max-content) 72px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  column-gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.task-toolbar::-webkit-scrollbar { display: none; }
.task-filter-list { display: contents; }
.task-filter-list .filter { min-width: max-content; }
.task-sort-field { width: 72px; margin-left: 0; }

/* Give every task filter a compact rectangular hit area. The slightly wider
   boxes absorb part of the distributed grid space, so the visible gaps stay
   equal while becoming a little tighter beside the sort box. */
.task-toolbar .filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--accent-border) !important;
  border-radius: 8px;
  color: var(--muted) !important;
  background: var(--surface-alt) !important;
  white-space: nowrap;
}
.task-toolbar .filter:hover,
.task-toolbar .filter.active-filter {
  border-color: var(--accent-border) !important;
  color: var(--ink) !important;
  background: var(--accent-surface) !important;
}

/* Final mobile override: keep every filter and the sort box within the
   viewport after the desktop alignment rules above have been applied. */
@media (max-width: 430px) {
  .task-toolbar {
    grid-template-columns: repeat(5, minmax(0, 1fr)) 72px;
    column-gap: 5px;
    /* The six controls fit the phone width; keep overflow visible so the
       sort popup below the final control is not clipped by the toolbar. */
    overflow: visible;
  }
  .task-toolbar .filter {
    min-width: 0;
    padding-right: 4px;
    padding-left: 4px;
    font-size: 10px;
  }
  .task-sort-field,
  .task-sort-toggle { width: 72px; }
}

/* Align the board-management control with the right edge of the row action
   boxes inside the management panel. */
#board-panel { --board-management-right-inset: 0px; }
.board-top-actions { margin-right: 0; }
.board-filter-row { gap: 6px; padding-right: 0; }
.board-filter-row .board-filter { padding-right: 8px; padding-left: 8px; }
.board-top-actions .text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--accent-border);
  border-radius: 9px;
  color: var(--primary);
  background: var(--accent-surface);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.board-top-actions .text-button:hover { color: var(--ink); background: var(--accent-hover); }

@media (max-width: 760px) {
  .board-topbar { gap: 8px; }
  .board-filter-row { gap: 6px; }
  .board-top-actions { margin-right: 0; }
}

/* The weight control is global: component-level font-weight rules must not
   leave headings, buttons, menus, or dynamically-created dialogs unchanged. */
.app-shell * { font-weight: var(--text-weight, 400) !important; }

/* KakaoTalk-style actions for a long-pressed or right-clicked chat room. */
.chat-room-context-menu {
  position: fixed;
  z-index: 55;
  display: grid;
  width: min(220px, calc(100vw - 24px));
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--accent-border);
  border-radius: 13px;
  background: var(--surface-strong);
  box-shadow: 0 16px 38px #0009;
}
.chat-room-context-menu > strong { padding: 6px 9px 7px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-room-context-menu button { min-height: 38px; padding: 0 10px; border-radius: 8px; color: var(--ink); background: transparent; text-align: left; font-size: 12px; font-weight: 700; }
.chat-room-context-menu button:hover, .chat-room-context-menu button:focus-visible { color: var(--primary); background: var(--accent-surface); outline: none; }
.chat-room-context-menu button:disabled { color: var(--muted); cursor: not-allowed; opacity: .7; }
.chat-room-context-menu button[data-chat-room-context-action="leave"] { color: var(--danger); }
.chat-room-context-menu button[data-chat-room-context-action="leave"]:hover, .chat-room-context-menu button[data-chat-room-context-action="leave"]:focus-visible { color: var(--danger); }
.task-context-menu {
  position: fixed;
  z-index: 55;
  display: grid;
  width: min(240px, calc(100vw - 24px));
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--accent-border);
  border-radius: 13px;
  background: var(--surface-strong);
  box-shadow: 0 16px 38px #0009;
}
.task-context-menu > strong { padding: 6px 9px 7px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.task-context-menu button { min-height: 40px; padding: 0 10px; border-radius: 8px; color: var(--ink); background: transparent; text-align: left; font-size: 12px; font-weight: 700; }
.task-context-menu button:hover, .task-context-menu button:focus-visible { color: var(--primary); background: var(--accent-surface); outline: none; }
.task-pin-indicator { color: var(--primary); font-weight: 800; }

/* Searchable chat drawer: each tab has its own content type while sharing one
   query field, matching the familiar chat-app drawer pattern. */
.chat-drawer-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-bottom: 10px;
  padding: 0 11px;
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface-alt);
}
.chat-drawer-search > span { color: var(--primary); font-size: 18px; line-height: 1; }
.chat-drawer-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 12px;
}
.chat-drawer-search input::placeholder { color: var(--muted); }
.chat-drawer-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.chat-drawer-tabs button {
  flex: none;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: var(--surface-alt);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.chat-drawer-tabs button.active-drawer-tab {
  border-color: var(--accent-border);
  color: var(--primary);
  background: var(--accent-surface);
}
.chat-drawer-message {
  display: grid;
  width: 100%;
  gap: 4px;
  min-height: 55px;
  margin-bottom: 7px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: var(--surface-alt);
  text-align: left;
}
.chat-drawer-message:hover, .chat-drawer-message:focus-visible { border-color: var(--accent-border); background: var(--accent-surface); outline: none; }
.chat-drawer-message-meta { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.chat-drawer-message strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-drawer-item { gap: 9px; align-items: center; }
.chat-drawer-item-copy { display: grid; min-width: 0; gap: 3px; }
.chat-drawer-item-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-drawer-thumbnail { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; }
.chat-drawer-message-target { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Unified cloud opened from the chat drawer. The two-column layout keeps room
   selection on the left and shared media/resources on the right. */
.chat-drawer-heading { align-items: center; }
.chat-drawer-heading-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.chat-cloud-open-button { min-height: 32px; padding: 0 10px; border: 1px solid var(--accent-border); border-radius: 9px; color: var(--primary); background: var(--accent-surface); font-size: 10px; font-weight: 800; white-space: nowrap; }
.chat-cloud-open-button:hover, .chat-cloud-open-button:focus-visible { color: var(--ink); background: var(--accent-hover); outline: none; }
.chat-drawer-heading { position: relative; min-height: 42px; align-items: flex-start; padding-right: 40px; }
.chat-drawer-heading-actions { position: static; display: block; }
.chat-drawer-heading .chat-cloud-open-button { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
#chat-drawer-close { position: absolute; top: -7px; right: -8px; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; color: var(--muted); font-size: 40px; font-weight: 400; line-height: 1; }
.chat-cloud-sheet { width: min(720px, calc(100vw - 24px)); height: min(650px, calc(100vh - 24px)); }
.chat-cloud-search { display: flex; align-items: center; gap: 8px; min-height: 42px; margin-bottom: 12px; padding: 0 12px; border: 1px solid var(--accent-border); border-radius: 10px; color: var(--muted); background: var(--surface-alt); }
.chat-cloud-search > span { color: var(--primary); font-size: 18px; line-height: 1; }
.chat-cloud-search input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; font-size: 12px; }
.chat-cloud-search input::placeholder { color: var(--muted); }
.chat-cloud-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; min-height: 0; height: calc(100% - 112px); }
.chat-cloud-rooms, .chat-cloud-content { min-width: 0; min-height: 0; overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-card); }
.chat-cloud-section-heading, .chat-cloud-content-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: var(--ink); }
.chat-cloud-section-heading strong, .chat-cloud-content-heading strong { font-size: 12px; }
.chat-cloud-section-heading span, .chat-cloud-content-heading span { color: var(--muted); font-size: 10px; }
.chat-cloud-room-list { display: grid; gap: 5px; }
.chat-cloud-room-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 42px; padding: 0 9px; border: 1px solid transparent; border-radius: 9px; color: var(--ink); background: var(--surface-alt); text-align: left; }
.chat-cloud-room-option strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-cloud-room-option > span { min-width: 17px; color: var(--muted); font-size: 10px; text-align: right; }
.chat-cloud-room-option:hover, .chat-cloud-room-option.active-cloud-room { border-color: var(--accent-border); color: var(--ink); background: var(--accent-surface); }
.chat-cloud-tabs { display: flex; gap: 5px; margin-bottom: 9px; overflow-x: auto; padding-bottom: 2px; }
.chat-cloud-tabs button { flex: none; min-height: 31px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface-alt); font-size: 10px; font-weight: 800; white-space: nowrap; }
.chat-cloud-tabs button.active-cloud-tab { border-color: var(--accent-border); color: var(--primary); background: var(--accent-surface); }
.chat-cloud-resource-list { display: grid; gap: 6px; }
.chat-cloud-resource { display: flex; align-items: center; gap: 9px; min-height: 53px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface-alt); text-decoration: none; }
.chat-cloud-resource:hover { border-color: var(--accent-border); background: var(--accent-surface); }
.chat-cloud-thumbnail, .chat-cloud-resource-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 8px; }
.chat-cloud-thumbnail { object-fit: cover; background: var(--surface-strong); }
.chat-cloud-resource-icon { color: var(--primary); background: var(--accent-icon); font-size: 14px; font-weight: 800; }
.chat-cloud-resource-copy { display: grid; min-width: 0; gap: 3px; }
.chat-cloud-resource-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-cloud-resource-copy small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .chat-drawer-heading-actions { gap: 4px; }
  .chat-cloud-open-button { max-width: 116px; overflow: hidden; padding: 0 7px; text-overflow: ellipsis; }
  #chat-drawer-close { top: -8px; right: -9px; width: 48px; height: 48px; font-size: 42px; }
  .chat-cloud-sheet { padding: 13px; }
  .chat-cloud-layout { grid-template-columns: 122px minmax(0, 1fr); gap: 8px; }
  .chat-cloud-rooms, .chat-cloud-content { padding: 8px; }
  .chat-cloud-room-option { padding: 0 6px; }
  .chat-cloud-room-option strong { font-size: 10px; }
}

/* Workspace icons are independent from the theme accent and follow the
   selected workspace everywhere its name is shown. */
.workspace-heading > .workspace-heading-identity { display: flex; align-items: center; gap: 9px; min-width: 0; }
.workspace-heading-identity > div { display: grid; gap: 4px; min-width: 0; }
.workspace-icon { display: grid; place-items: center; flex: none; overflow: hidden; border-radius: 9px; color: var(--primary); background: var(--accent-icon); background-position: center; background-size: cover; background-repeat: no-repeat; font-weight: 800; }
.workspace-heading-icon { width: 30px; height: 30px; border-radius: 9px; font-size: 12px; }
.workspace-switcher-icon { width: 22px; height: 22px; border-radius: 7px; font-size: 10px; }
#workspace-switcher-icon { max-width: none; }
.workspace-option { justify-content: flex-start; }
.workspace-option-icon { width: 24px; height: 24px; border-radius: 7px; font-size: 10px; }
.workspace-option-copy { display: grid; min-width: 0; flex: 1; }
.workspace-option-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-option small { margin-left: auto; }
.workspace-settings-icon-field { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-alt); }
.workspace-settings-icon-preview { width: 58px; height: 58px; border-radius: 16px; font-size: 20px; }
.workspace-settings-icon-controls { display: grid; gap: 5px; min-width: 0; }
.workspace-settings-icon-controls p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.workspace-settings-status { margin: -7px 0 12px; padding: 8px 10px; border: 1px solid var(--accent-border); border-radius: 8px; color: var(--primary); background: var(--accent-surface); font-size: 11px; line-height: 1.4; }
.workspace-settings-status.error { border-color: color-mix(in srgb, var(--danger) 48%, var(--accent-border)); color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface-card)); }
.workspace-icon-picker { display: inline-flex; align-items: center; justify-content: center; width: max-content; min-height: 34px; padding: 0 11px; cursor: pointer; }
.workspace-icon-reset { width: max-content; padding: 0; color: var(--muted); font-size: 10px; }
.workspace-icon-reset:hover { color: var(--primary); }
@media (max-width: 760px) {
  .workspace-settings-icon-field { align-items: flex-start; }
  .workspace-switcher-icon { flex: none; }
  #workspace-switcher-label { max-width: 112px; }
}

/* Participant management keeps the person information on the left and the
   destructive action aligned in one predictable column on the right. */
.chat-participant-help { margin: -3px 0 11px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.chat-participant-row { min-width: 0; }
.chat-participant-copy { display: grid; min-width: 0; flex: 1; gap: 2px; }
.chat-participant-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-participant-copy small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.chat-participant-remove { flex: none; min-height: 29px; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--accent-border)); border-radius: 7px; color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface-card)); font-size: 10px; font-weight: 800; }
.chat-participant-remove:hover { background: color-mix(in srgb, var(--danger) 17%, var(--surface-card)); }

/* Primary actions must remain legible when the selected theme or text color
   reaches an extreme. The theme owns the action background; text uses the
   contrast color calculated from that theme, never the separately selected
   body text color. */
.rail-logo,
.board-compose-fab,
.task-compose-fab,
.auth-card form button,
.task-form > button,
.compose-row button,
.chat-room-sheet-action,
.chat-room-create-actions > button:last-child,
 .app-dialog-confirm,
 .post-form button,
.task-time-period button.active-time-period,
.task-time-picker-actions button:not(.secondary-button),
.task-date-picker-actions button:not(.secondary-button) { color: var(--primary-contrast) !important; }

/* Keep solid action surfaces on the selected theme while allowing every
   accent-colored label and icon to follow the separate text brightness. */
.auth-card form button,
.rail-logo,
.board-compose-fab,
 .task-compose-fab,
 .compose-row button,
 .task-form > button,
 .post-form button,
 .notification-action,
.profile-actions > button:last-child,
.chat-room-sheet-action,
.chat-room-create-actions > button:last-child,
.app-dialog-confirm,
.settings-bot-form button,
.account-recovery-actions button[type="submit"],
.task-time-picker-actions button,
.task-date-picker-actions button,
.task-date-day.selected-date,
.task-time-period button.active-time-period,
.task-time-wheel-selector,
.email-code-row button:focus-visible,
.board-people-picker-apply,
.board-directory-access-save,
.post-category-option.active-post-category .post-category-radio,
.task-assignee-option.active-task-assignee .task-assignee-radio,
 .workspace-settings-name-row button { background: var(--theme-primary) !important; }

/* Solid action surfaces use the theme color, so their labels use the
   contrast calculated from that same theme color. */
.rail-logo,
.board-compose-fab,
.task-compose-fab,
.auth-card form button,
.task-form > button,
.compose-row button,
.post-form button,
.notification-action,
.profile-actions > button:last-child,
.chat-room-sheet-action,
.chat-room-create-actions > button:last-child,
.app-dialog-confirm,
.settings-bot-form button,
.account-recovery-actions button[type="submit"],
.task-time-picker-actions button:not(.secondary-button),
.task-date-picker-actions button:not(.secondary-button),
.board-people-picker-apply,
.board-directory-access-save,
.workspace-settings-name-row button {
  color: var(--theme-primary-contrast, var(--primary-contrast, #fff)) !important;
}

/* Primary-colored text is text, not a second copy of the button background. */
.settings-section-summary-copy > strong,
.settings-accent-card > div:first-child strong,
.settings-section-label,
.settings-color-advanced > summary,
.settings-color-target,
.settings-reset-button,
.settings-font-options button.active-font-scale,
.settings-theme-options button.active-theme,
.settings-accent-option.active-accent,
.settings-preview strong,
.settings-organization-heading strong,
.settings-org-toggle,
.settings-org-action:hover,
.settings-org-action:focus-visible,
.text-button,
.header-icon:hover,
.room-header-action:hover,
.schedule-calendar-button,
.refresh-button,
.home-link,
.module-add,
.schedule-group h3,
.home-header p strong,
.home-card-icon,
.home-card em,
.home-notice-icon,
.file-button,
.attachment-link,
.filter.active-filter,
.board-filter:hover,
.board-filter.active-board-filter,
.avatar,
.task-edit,
.task-more,
.post-edit,
.board-picker-option:hover,
.board-picker-option.active-board-filter,
.board-picker-manage,
.workspace-option:hover,
.workspace-option.active-workspace,
.workspace-create,
.room-icon,
.room-header-avatar,
.room-count,
.member-avatar,
.invite-result,
.chat-room-list-avatar,
.chat-participant-avatar,
.chat-member-avatar,
.chat-room-menu button:hover,
.chat-drawer-tabs button.active-drawer-tab,
.task-sort-arrow,
.task-sort-menu button:hover,
.task-sort-menu button.active-task-sort,
.task-time-picker-heading span,
.task-time-picker-actions .secondary-button,
.task-date-picker-heading span,
.task-date-picker-toolbar > button,
.task-date-picker-today,
.post-category-picker-heading span,
.post-category-option:hover,
.post-category-option.active-post-category,
.task-assignee-picker-heading span,
.task-assignee-option:hover,
.task-assignee-option.active-task-assignee,
.trash-sheet-heading span,
.trash-kind,
.trash-item-actions button,
.board-directory-people-summary::after,
.board-people-picker-heading span,
.chat-cloud-open-button,
.chat-cloud-search > span,
.chat-cloud-tabs button.active-cloud-tab,
.chat-cloud-resource-icon,
.chat-drawer-search > span,
.workspace-icon,
.workspace-settings-heading span,
.chat-room-context-menu button:hover,
.notification-button,
.notification-item .notification-category,
.notification-item .notification-category-chat,
.notification-item .notification-category-board,
.notification-item .notification-category-task { color: var(--ink) !important; }

/* A chat room entry reveals the conversation in a short, staggered motion. */
@keyframes chatRoomContentIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chatMessageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
#chat-room-view.chat-room-entering .messages { animation: chatRoomContentIn .28s ease-out both; }
#chat-room-view.chat-room-entering .message { animation: chatMessageIn .34s ease-out both !important; animation-delay: calc(var(--message-index, 0) * 28ms); }
@media (prefers-reduced-motion: reduce) {
  #chat-room-view.chat-room-entering .messages,
  #chat-room-view.chat-room-entering .message { animation: none !important; }
}

/* Keep the notification source visible beside each notification title. */
.notification-title-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.notification-title-row strong { min-width: 0; flex: 1; }
.notification-item .notification-category { flex: none; padding: 3px 6px; border: 1px solid var(--accent-border); border-radius: 99px; color: var(--primary) !important; background: var(--accent-surface) !important; font-size: 9px !important; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.notification-item .notification-category-chat { color: var(--primary) !important; }
.notification-item .notification-category-board { color: var(--primary) !important; }
.notification-item .notification-category-task { color: var(--primary) !important; }

/* Invite picker search covers both person and department fields. */
.chat-invite-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 8px 0;
  padding: 0 10px;
  border: 1px solid var(--accent-border);
  border-radius: 9px;
  color: var(--primary);
  background: var(--surface-alt);
}
.chat-invite-search > span { font-size: 16px; line-height: 1; }
.chat-invite-search input {
  min-width: 0;
  flex: 1;
  height: 100%;
  min-height: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
}
.chat-invite-search input::placeholder { color: var(--muted); }
.chat-invite-departments { display: flex; gap: 6px; margin: -2px 0 9px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.chat-invite-department { flex: 0 0 auto; min-height: 29px; padding: 0 9px; border: 1px solid var(--accent-border); border-radius: 999px; color: var(--muted); background: var(--surface-strong); font-size: 10px; font-weight: 800; white-space: nowrap; }
.chat-invite-department:hover, .chat-invite-department.active-chat-invite-department { color: var(--ink); background: var(--accent-surface); }
.chat-member-copy { display: grid; min-width: 0; gap: 2px; }
.chat-member-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-member-copy small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.chat-member-option[hidden] { display: none !important; }

/* Destructive actions use the hue opposite the selected theme color. This
   prevents block, kick, and delete controls from falling back to violet. */
.settings-member-row .settings-member-kick,
.settings-member-row .settings-member-block,
.settings-org-action.settings-org-danger,
.board-directory-delete,
.post-delete,
.workspace-settings-delete,
.chat-participant-remove,
.trash-item-actions button:last-child,
.task-date-picker-actions .picker-clear-button,
.task-time-picker-actions .picker-clear-button {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--accent-border)) !important;
  color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 12%, var(--surface-card)) !important;
}
.delete { color: var(--danger) !important; }
.settings-member-row .settings-member-kick:hover,
.settings-member-row .settings-member-block:hover,
.settings-org-action.settings-org-danger:hover,
.board-directory-delete:hover,
.post-delete:hover,
.workspace-settings-delete:hover,
.chat-participant-remove:hover,
.trash-item-actions button:last-child:hover,
.task-date-picker-actions .picker-clear-button:hover,
.task-time-picker-actions .picker-clear-button:hover,
.delete:hover {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 22%, var(--surface-card)) !important;
}
.chat-room-context-menu button[data-chat-room-context-action="leave"] {
  color: var(--danger) !important;
}
.chat-room-context-menu button[data-chat-room-context-action="leave"]:hover,
.chat-room-context-menu button[data-chat-room-context-action="leave"]:focus-visible {
  color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 18%, var(--surface-strong)) !important;
}
.app-dialog-confirm.app-dialog-danger {
  border-color: var(--danger) !important;
  color: var(--danger-contrast, #fff) !important;
  background: var(--danger) !important;
}
.app-dialog-confirm.app-dialog-danger:hover {
  background: color-mix(in srgb, var(--danger) 84%, #000) !important;
}

/* The workspace is already fixed while a conversation is open. */
body.chat-room-page .workspace-switcher,
.app-shell.chat-room-active .workspace-switcher {
  display: none !important;
}

/* Messages sent by the signed-in user belong on the right side of the room. */
#chat-room-view:not([hidden]) .message.mine {
  align-self: flex-end;
  justify-content: flex-end;
  flex-direction: row-reverse;
}
#chat-room-view:not([hidden]) .message.mine .message-body {
  display: grid;
  justify-items: end;
}
#chat-room-view:not([hidden]) .message.mine .message-meta {
  justify-content: flex-end;
}
#chat-room-view:not([hidden]) .message.mine p {
  border-radius: 12px 3px 12px 12px;
}

/* Final picker bindings: selection colors must follow the active accent, even
   when the older light-mode rules above have higher specificity. */
#task-date-picker .task-date-picker-card,
#task-time-picker .task-time-picker-card {
  border-color: var(--accent-border) !important;
  background: var(--surface-card) !important;
}
#task-date-picker .task-date-picker-toolbar > button,
#task-date-picker .task-date-picker-today,
#task-time-picker .task-time-period button,
#task-time-picker .task-time-number .task-time-value,
#task-date-picker .task-date-picker-actions .secondary-button,
#task-time-picker .task-time-picker-actions .secondary-button {
  border-color: var(--accent-border) !important;
  color: var(--primary) !important;
  background: var(--accent-surface) !important;
}
#task-date-picker .task-date-picker-toolbar > button:hover,
#task-date-picker .task-date-picker-today:hover,
#task-date-picker .task-date-day:not(.empty-day):hover,
#task-time-picker .task-time-period button:not(.active-time-period):hover,
#task-time-picker .task-time-number .task-time-value:hover {
  border-color: var(--accent-border) !important;
  background: var(--accent-hover) !important;
}
#task-time-picker .task-time-period button.active-time-period,
#task-date-picker .task-date-day.selected-date,
#task-time-picker .task-time-wheel-selector {
  border-color: var(--accent-border) !important;
  background: var(--theme-primary) !important;
}
#task-time-picker .task-time-period button.active-time-period,
#task-date-picker .task-date-day.selected-date,
#task-time-picker .task-time-wheel-option.active-time-choice {
  color: var(--theme-primary-contrast, var(--primary-contrast, #fff)) !important;
}
#task-time-picker .task-time-choice-panel {
  border-color: var(--accent-border) !important;
  background: var(--surface-strong) !important;
}
#task-time-picker .task-time-wheel-option {
  color: var(--muted) !important;
}

/* Keep the apply actions on the same solid theme surface as the other
   primary controls. This higher-specificity rule also wins over legacy
   picker rules that used the separately selected text color as a fill. */
#task-time-picker #task-time-picker-apply,
#task-date-picker #task-date-picker-apply,
#board-compose-sheet #post-submit {
  border-color: var(--accent-border) !important;
  color: var(--theme-primary-contrast, var(--primary-contrast, #fff)) !important;
  background: var(--theme-primary) !important;
}
#task-time-picker .task-time-wheel-option:hover {
  color: var(--primary) !important;
  background: transparent !important;
}
#task-date-picker .task-date-weekdays span:first-child,
#task-date-picker .task-date-day.sunday-date {
  color: var(--calendar-contrast-text, var(--ink)) !important;
}
#task-date-picker .task-date-weekdays span:last-child,
#task-date-picker .task-date-day.saturday-date {
  color: var(--primary) !important;
}
#task-date-picker .task-date-day.today-date,
#task-date-picker .task-date-day.selected-date.today-date {
  border-color: var(--accent-border) !important;
}
.image-attachment { cursor: zoom-in; }
.attachment-file-card { display: flex; align-items: center; gap: 11px; width: min(380px, 100%); min-height: 68px; margin-top: 7px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--paper); text-decoration: none; box-shadow: 0 3px 10px rgb(20 27 50 / 8%); transition: border-color .15s, transform .15s, box-shadow .15s; }
.attachment-file-card:hover, .attachment-file-card:focus-visible { border-color: var(--primary); box-shadow: 0 5px 14px rgb(20 27 50 / 13%); outline: none; transform: translateY(-1px); }
.attachment-file-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; color: var(--primary); background: var(--accent-surface); font-size: 27px; line-height: 1; }
.attachment-file-copy { display: grid; min-width: 0; flex: 1; gap: 4px; }
.attachment-file-name { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.attachment-file-meta { color: var(--muted); font-size: 10px; }
.attachment-file-download { flex: none; color: var(--primary); font-size: 10px; font-weight: 800; white-space: nowrap; }
.image-lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; overflow: hidden; padding: 48px 16px 34px; background: rgb(0 0 0 / 82%); animation: appear .16s ease-out; }
.image-lightbox img { display: block; width: auto; height: auto; max-width: calc(100vw - 32px); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); border-radius: 10px; object-fit: contain; box-shadow: 0 14px 40px rgb(0 0 0 / 40%); }
.image-lightbox-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgb(255 255 255 / 42%); border-radius: 50%; color: #fff; background: rgb(0 0 0 / 38%); font-size: 28px; line-height: 1; }
.image-lightbox-close:hover { background: rgb(255 255 255 / 18%); }
.image-lightbox p { position: absolute; right: 16px; bottom: 8px; left: 16px; margin: 0; overflow: hidden; color: #fff; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }

/* In-app team calendar: task due dates are the source of truth; never hand
   the calendar navigation off to the phone's unrelated calendar app. */
#calendar-panel.active-panel { min-height: calc(100vh - var(--app-topbar-height, 58px) - 78px - 30px); padding-bottom: 20px; }
.team-calendar { display: flow-root; width: min(100%, 900px); margin: 0 auto; padding: 0 16px 12px; border: 0; border-radius: 14px; background: var(--paper); }
.team-calendar-agenda-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.team-calendar-toolbar { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px auto; align-items: center; gap: 7px; margin-top: 15px; }
.team-calendar-toolbar > button { display: grid; place-items: center; min-width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 9px; color: var(--primary); background: var(--paper); font-size: 21px; }
.team-calendar-toolbar > strong { text-align: center; font-size: 16px; }
.team-calendar-toolbar > .calendar-today-button { padding: 0 11px; font-size: 11px; font-weight: 700; }
.team-calendar-weekdays, .team-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.team-calendar-weekdays { margin-top: 13px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.team-calendar-weekdays > span { color: var(--muted); text-align: center; font-size: 11px; font-weight: 700; }
.team-calendar-weekdays > span:first-child { color: var(--calendar-contrast-text, var(--ink)); }
.team-calendar-weekdays > span:last-child { color: var(--primary); }
.team-calendar-grid { grid-auto-rows: minmax(38px, auto); gap: 3px 2px; padding-top: 5px; }
.team-calendar-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-width: 0; min-height: 43px; padding: 5px 1px 3px; border: 1px solid transparent; border-radius: 10px; color: var(--ink); background: transparent; }
.team-calendar-day:hover { border-color: var(--line); background: var(--canvas); }
.team-calendar-day-number { display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; padding: 0; border-radius: 50%; text-align: center; font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; }
.team-calendar-day.other-month-day { color: var(--muted); opacity: .55; }
.team-calendar-day.today-calendar-day:not(.selected-calendar-day) .team-calendar-day-number { outline: 1px solid var(--primary); outline-offset: 1px; }
.team-calendar-day.selected-calendar-day { border-color: transparent; background: transparent; }
.team-calendar-day.selected-calendar-day .team-calendar-day-number { color: var(--theme-primary-contrast, var(--primary-contrast, #fff)); background: var(--theme-primary, var(--primary)); }
.team-calendar-day-count { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 16px; padding: 0 4px; border-radius: 6px; color: var(--primary); background: var(--accent-surface); text-align: center; font-size: 8px; font-weight: 800; line-height: 12px; }
.team-calendar-day-count::before { width: 4px; height: 4px; border-radius: 50%; background: var(--theme-primary, var(--primary)); content: ""; }
.team-calendar-agenda { margin-top: 12px; padding-top: 0; border-top: 0; }
.team-calendar-agenda-heading h4 { margin: 0; font-size: 14px; }
.team-calendar-agenda-heading > span { color: var(--muted); font-size: 11px; }
.calendar-agenda-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 9px 0 6px; color: var(--ink); font-size: 11px; }
.calendar-agenda-section-heading > span { flex: 0 0 auto; color: var(--muted); font-size: 10px; font-weight: 500; }
.calendar-agenda-project-list { display: grid; gap: 5px; margin-inline: -16px; }
.calendar-agenda-project { display: grid; grid-template-columns: 3px minmax(0, 1fr); align-items: stretch; gap: 9px; width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface-card); text-align: left; }
.calendar-agenda-project::before { align-self: stretch; width: 3px; border-radius: 99px; background: var(--calendar-project-color, var(--primary)); content: ""; }
.calendar-agenda-project:hover { border-color: var(--accent-border); background: var(--accent-surface); }
.calendar-agenda-project:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.calendar-agenda-project-copy { display: grid; gap: 3px; min-width: 0; }
.calendar-agenda-project-copy strong { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; }
.calendar-agenda-project-copy small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; line-height: 1.35; }
.calendar-agenda-task-heading { margin-top: 11px; }
.calendar-agenda-task-heading + .calendar-task-toolbar { margin-top: 5px; }
.calendar-agenda-heading-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 11px; }
#calendar-panel .team-calendar-agenda-heading h4 { min-width: 0; flex: 1 1 auto; line-height: 1.35; overflow-wrap: anywhere; }
#calendar-panel #calendar-month-task-count { flex: 0 0 auto; min-width: 3ch; color: var(--ink); font-size: 12px; font-weight: 800; line-height: 1.2; text-align: left; white-space: nowrap; }
#calendar-panel #calendar-show-month-tasks:not([hidden]) { display: inline-flex; min-width: 0; min-height: 30px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid var(--accent-border) !important; border-radius: 8px; color: var(--theme-primary-contrast, var(--primary-contrast, #fff)) !important; background: var(--theme-primary, var(--primary)) !important; box-shadow: 0 1px 4px color-mix(in srgb, var(--theme-primary, var(--primary)) 18%, transparent); font-size: 10px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
#calendar-panel #calendar-show-month-tasks[hidden] { display: none !important; }
#calendar-panel #calendar-show-month-tasks:not([hidden]):hover { filter: brightness(1.08); }
#calendar-panel #calendar-show-month-tasks:not([hidden]):focus-visible { outline: 2px solid var(--theme-primary, var(--primary)); outline-offset: 3px; }
.calendar-task-toolbar { margin: 11px 0 8px; }
.calendar-month-tasks { min-height: 0; margin-inline: -16px; }
.calendar-search-actions-row { display: flex; align-items: stretch; gap: 8px; min-width: 0; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.team-calendar-heading-actions { display: flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: stretch; justify-content: flex-end; gap: 5px; margin-top: 0; }
.team-calendar-heading-actions .module-add { min-height: 40px; padding: 0 7px; font-size: 9px; white-space: nowrap; }
.calendar-search-box { display: flex; flex: 1 1 auto; align-items: center; gap: 9px; min-width: 0; min-height: 40px; margin-top: 0; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface-card); }
.calendar-search-box > span { color: var(--primary); font-size: 20px; line-height: 1; }
.calendar-search-box input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; font-size: 12px; }
.calendar-search-box input::placeholder { color: var(--muted); opacity: .9; }
.calendar-search-box > button { width: 26px; height: 26px; border-radius: 50%; color: var(--muted); background: transparent; font-size: 20px; line-height: 1; }
.calendar-search-box > button:hover { color: var(--primary); background: var(--accent-surface); }
.calendar-search-results { display: grid; gap: 7px; margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-card); }
.calendar-search-results-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink); font-size: 11px; }
.calendar-search-results-heading span { color: var(--muted); font-size: 10px; }
.calendar-search-result-list { display: grid; gap: 0; max-height: min(34vh, 280px); overflow: auto; }
.calendar-search-result { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 8px; width: 100%; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: left; color: var(--ink); background: transparent; }
.calendar-search-result:last-child { border-bottom: 0; }
.calendar-search-result:hover, .calendar-search-result:focus-visible { border-color: var(--line); border-radius: 6px; background: var(--accent-surface); }
.calendar-search-result-kind { grid-row: span 2; align-self: center; padding: 0; border: 0; border-radius: 0; color: var(--muted); font-size: 9px; white-space: nowrap; }
.calendar-search-result strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; }
.calendar-search-result small { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.calendar-search-no-results { margin: 3px 0; color: var(--muted); font-size: 11px; }
.team-calendar-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; padding-top: 5px; }
.team-calendar-week { display: grid; gap: 0; min-width: 0; }
.team-calendar-week.calendar-quiet-week .team-calendar-day { min-height: 38px; }
.team-calendar-week-days, .team-calendar-week-projects { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 2px; }
.team-calendar-week-days { align-items: stretch; }
.team-calendar-week-projects { grid-auto-rows: 8px; row-gap: 1px; }
.team-calendar-day { min-height: 42px; }
.calendar-project-bar { position: relative; display: block; min-width: 0; min-height: 8px; margin: 0 1px; overflow: visible; padding: 0; border: 0; border-radius: 0; color: transparent !important; background: transparent !important; box-shadow: none; font-size: 0; line-height: 0; }
.calendar-project-bar::before { position: absolute; top: 50%; right: 0; left: 0; height: 4px; border-radius: 2px; background: var(--calendar-project-color); content: ""; transform: translateY(-50%); }
.calendar-project-bar.calendar-project-start:not(.calendar-project-end)::before { border-radius: 999px 2px 2px 999px; }
.calendar-project-bar.calendar-project-end:not(.calendar-project-start)::before { border-radius: 2px 999px 999px 2px; }
.calendar-project-bar.calendar-project-start.calendar-project-end::before { border-radius: 999px; }
.calendar-project-bar:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--primary); outline-offset: 1px; }
.calendar-project-sheet[hidden] { display: none; }
.calendar-project-sheet { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: 18px; }
.calendar-project-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #080a0fcc; backdrop-filter: blur(4px); }
.calendar-project-card { position: relative; width: min(440px, calc(100vw - 28px)); max-height: min(90vh, 680px); max-height: min(90dvh, 680px); overflow: auto; padding: 19px; border: 1px solid var(--accent-border); border-radius: 18px; color: var(--ink); background: var(--surface-card); box-shadow: 0 20px 60px #000b; }
.calendar-project-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.calendar-project-heading > div { display: grid; gap: 4px; }
.calendar-project-heading span { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.calendar-project-heading h3 { margin: 0; color: var(--ink); font-size: 19px; }
.calendar-project-heading .text-button { padding: 0 3px; color: var(--muted); font-size: 24px; line-height: 1; }
.calendar-project-help { margin: 12px 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.calendar-project-form { display: grid; gap: 12px; }
.calendar-project-form > label, .calendar-project-date-fields > label, .calendar-project-color-field { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.calendar-project-form input:not([type="hidden"]), .calendar-project-form textarea { width: 100%; min-width: 0; min-height: 40px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; outline-color: var(--primary); color: var(--ink); background: var(--paper); font: inherit; font-size: 12px; }
.calendar-project-form textarea { min-height: 76px; max-height: 180px; resize: vertical; line-height: 1.5; }
.calendar-project-form input:disabled, .calendar-project-form textarea:disabled { opacity: .8; }
.calendar-project-date-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.calendar-project-date-button { display: grid; place-items: center start; min-height: 40px; padding: 8px 10px; border-radius: 9px; font-size: 11px; }
.calendar-project-date-button.has-value { color: var(--ink); }
.calendar-project-color-button { width: 100%; min-height: 40px; grid-template-columns: 22px minmax(0, 1fr) auto; }
.calendar-project-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 3px; padding-top: 13px; border-top: 1px solid var(--line); }
.calendar-project-form-actions > button { min-height: 39px; padding: 0 13px; border: 1px solid var(--accent-border); border-radius: 9px; color: var(--primary-contrast, #fff); background: var(--primary); font-size: 11px; font-weight: 800; }
.calendar-project-form-actions > .secondary-button { color: var(--primary); background: var(--accent-surface); }
.calendar-project-form-actions > .calendar-project-delete { margin-right: auto; color: var(--danger); background: transparent; }

@media (max-width: 760px) {
  #calendar-panel.active-panel { min-height: calc(100dvh - var(--app-topbar-height, 58px) - 64px - var(--home-nav-space, 89px)); }
  .team-calendar { margin-top: 0; padding: 0 10px 8px; }
  .calendar-month-tasks { margin-inline: -10px; }
  .calendar-agenda-project-list { margin-inline: -10px; }
  .calendar-search-actions-row { gap: 6px; margin-top: 5px; }
  .team-calendar-heading-actions { gap: 4px; margin-top: 0; }
  .team-calendar-heading-actions .module-add { min-height: 38px; padding: 0 5px; font-size: 9px; }
  .calendar-search-box { min-height: 38px; padding-inline: 9px; }
  .team-calendar-toolbar { margin-top: 12px; }
  .calendar-task-toolbar { width: calc(100% + 20px); margin-right: -10px; margin-left: -10px; }
  .team-calendar-grid { grid-auto-rows: minmax(32px, auto); gap: 2px; }
  .team-calendar-week-days, .team-calendar-week-projects { column-gap: 1px; }
  .team-calendar-day { min-height: 38px; padding-top: 3px; }
  .team-calendar-day-number { width: 24px; height: 24px; font-size: 12px; }
  .team-calendar-day-count { font-size: 7px; line-height: 10px; }
  .team-calendar-week.calendar-quiet-week .team-calendar-day { min-height: 32px; }
  .team-calendar-week.calendar-project-only-week .team-calendar-day { min-height: 32px; }
  .calendar-project-bar { min-height: 8px; }
  .calendar-project-card { padding: 17px; }
  .calendar-project-form { gap: 10px; }
}

@media (max-width: 480px) {
  #calendar-panel .team-calendar-agenda-heading { flex-wrap: nowrap; gap: 6px; }
  #calendar-panel .team-calendar-agenda-heading h4 { flex: 1 1 auto; flex-basis: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #calendar-panel .calendar-agenda-heading-actions { width: auto; min-width: 0; flex: 0 0 auto; flex-direction: row; justify-content: flex-end; gap: 6px; }
}