/* Parts shared by the main window and the session window: message images, session rows and
   menus, the session panel, the template bar, the working indicator. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #242b28;
  background: #f8faf8;
  font-size: 14px;
  color-scheme: light;
}
.attachment-strip,
.message-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.attachment-strip:empty,
.message-images:empty {
  display: none;
}
.image-tile {
  position: relative;
  display: inline-flex;
  max-width: 160px;
}
.image-tile > button {
  padding: 3px;
  overflow: hidden;
  max-width: 160px;
  font-size: 11px;
}
.image-tile img {
  display: block;
  width: auto;
  height: 68px;
  max-width: 140px;
  object-fit: contain;
}
.image-tile .remove-image {
  position: absolute;
  top: -5px;
  right: -5px;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  padding: 0;
  background: white;
}
.image-drop {
  outline: 2px dashed #479785;
  outline-offset: -4px;
  background: #edf5f0;
}
.compose-bar {
  flex-wrap: wrap;
}
[data-image-picker] {
  display: none;
}
/* Hidden means hidden, whatever display a class gives (a folded group's rows, the 最新へ button,
   …). Here, where every page — the desk, a session window, the phone — reads it. */
[hidden] {
  display: none !important;
}
.session-row {
  position: relative;
  display: flex;
  border-radius: 7px;
  align-items: center;
}
.session-row.selected {
  background: #dfe9e1;
}
.session-row.hot-cpu,
.session-row.hot-cpu.selected {
  background: #fff0a8;
}
.session-row.unread .session-pick span {
  font-weight: 700;
}
.session-row .session-pick {
  min-width: 0;
  flex: 1;
  padding-right: 70px;
  /* State, engine, name, then the timer and the ⌘ key each in a column of its own: sharing the
     name's column pushed the key onto a second line. */
  grid-template-columns: 12px 24px minmax(0, 1fr) auto auto;
}
.session-row .session-pick > span { grid-column: 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-row .session-pick > em.session-parent-link {
  grid-column: 3 / 6;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #718078;
  font-size: 10px;
  font-style: normal;
}
.session-row .session-pick > em.timer { grid-column: 4; grid-row: 1; }
.session-row .session-pick > small { grid-column: 5; grid-row: 1; }
.session-row .session-more {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 24px;
  display: block;
  padding: 2px;
  opacity: 0.55;
  text-align: center;
}
.session-row .thread-heavy {
  position: absolute;
  right: 50px;
  top: 3px;
  width: 22px;
  display: block;
  padding: 2px;
  color: #b66a00;
  font-size: 13px;
  text-align: center;
}
.session-row .thread-heavy[hidden] { display: none; }
.session-row .session-mention {
  position: absolute;
  right: 27px;
  top: 2px;
  width: 22px;
  display: block;
  padding: 2px;
  opacity: 0.65;
  text-align: center;
}
.session-row:hover .session-more,
.session-more:focus,
.session-row:hover .session-mention,
.session-mention:focus {
  opacity: 1;
}
.session-row > input {
  width: calc(100% - 28px);
}
.session-menu {
  position: fixed;
  z-index: 100;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overflow-x: hidden;
  width: 210px;
  padding: 5px;
  background: #fff;
  border: 1px solid #dde3de;
  border-radius: 9px;
  box-shadow: 0 6px 24px #0002;
}
.session-menu button {
  display: block;
  border: 0;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  background: none;
}
.session-menu button:hover,
.session-menu button:focus-visible {
  background: #edf2ee;
}
.session-menu button[data-key]::after {
  content: attr(data-key);
  float: right;
  color: #8a968f;
  font-size: 11px;
  font-family: ui-monospace, Menlo, monospace;
  margin-left: 12px;
}
.session-menu .danger {
  color: #c14e45;
}
/* Every menu panel floats on its own in <body> (menu.mjs); a submenu is never drawn inside its menu. */
.submenu-items {
  width: 220px;
}
.submenu.expanded > button {
  background: #edf2ee;
}
.menu-heading {
  padding: 8px 10px 3px;
  font-size: 11px;
  color: #8a968f;
  font-weight: 600;
}
.menu-heading:first-child {
  padding-top: 3px;
}
.submenu-items input {
  width: 100%;
}
.panel-messages {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding: 16px;
}
.panel-status {
  padding: 3px 12px;
  color: #78837a;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.panel-approvals {
  max-height: 180px;
  overflow: auto;
}
.panel-model {
  max-width: 260px;
}
.preset-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.preset-bar[hidden] {
  display: none;
}
.preset-bar button {
  padding: 4px 12px;
  font-size: 12px;
}
@keyframes working-pulse {
  0%,
  100% {
    opacity: 0.95;
  }
  50% {
    opacity: 0.3;
  }
}
nav i.running,
nav i.external,
.working-indicator::before {
  background: radial-gradient(circle at 30% 25%, #d9d9d9, #898989 65%, #666);
  animation: working-pulse 1.6s ease-in-out infinite;
}
.working-indicator::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
}
@media (prefers-reduced-motion: reduce) {
  nav i.running,
  nav i.external,
  .working-indicator::before {
    animation: none;
  }
}
.page-hidden nav i.running,
.page-hidden nav i.external,
.page-hidden .working-indicator::before {
  animation: none;
}
#session-window {
  height: 100vh;
  display: flex;
}
#session-window > .chat {
  flex: 1;
  min-width: 0;
}
* {
  box-sizing: border-box;
}
.preset-bar .template-send {
  font-size: 11px;
}
.session-row.drop-before,
.session-group.drop-before,
.session-add.drop-before {
  box-shadow: inset 0 2px 0 #2e7d69;
}
.session-row.drop-after,
.session-group.drop-after {
  box-shadow: inset 0 -2px 0 #2e7d69;
}
/* A template's variables, asked for above the input before the template goes in. */
.template-vars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: -2px 0 8px;
  padding: 6px 8px;
  border: 1px solid #cfdcd3;
  border-radius: 8px;
  background: #f4f8f5;
  font-size: 12px;
}
.template-vars[hidden] {
  display: none;
}
.template-var {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #56635b;
}
.template-var input {
  min-width: 140px;
  padding: 3px 6px;
  font-size: 12px;
}
.template-vars button {
  padding: 3px 12px;
  font-size: 12px;
}

/* Sessions talking to each other (ui/relay.mjs): on the desk and on the phone alike (mobile's
   stylesheet includes this file). 2026-10-05 (社長): the tint is the row's band behind the card, edge
   to edge of the conversation; the card keeps the look a person's conversation has. The band is the
   row's shadow spread sideways and clipped a little above and below; the conversation's own
   overflow trims it at its edges. Colours are variables so a dark theme can replace them later.
   Text on --relay-bg: 12.5:1; heading and folded line: 5.6:1. */
:root {
  --relay-bg: #e7effa;
  --relay-note-bg: #f1f5fb;
  --relay-head: #3f5f8f;
}
.message.relay-in,
.message.relay-out { --band: var(--relay-bg); }
.message.relay-note { --band: var(--relay-note-bg); }
/* The shadow paints only outside the row, so the row takes the same colour itself. 24px below: the
   copy icons sit 20px under a message (chat.css .message-actions) and stay inside the band. */
.message[class*="relay-"] { background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(-8px -100vmax -24px); }
.message .relay-head { font-size: 11px; font-weight: 600; line-height: 1.4; color: var(--relay-head); margin: 0 0 2px; }
/* Folded on request (ui/app/relay-view.mjs, the phone's bar): each one leaves one line saying what
   happened; pressing it opens that one. A delivery that went fine leaves nothing (「送信済」 says it). */
.message .relay-fold { display: none; }
.chat.hide-relays .message[class*="relay-"] > .relay-fold {
  display: block; width: 100%; text-align: left; border: 0; background: none; padding: 2px 0; margin: 0;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--relay-head); cursor: pointer;
}
.chat.hide-relays .message[class*="relay-"] > .relay-fold::before { content: "▸ "; }
.chat.hide-relays .message.relay-open > .relay-fold::before { content: "▾ "; }
.chat.hide-relays .message[class*="relay-"]:not(.relay-open) > :not(.relay-fold) { display: none !important; }
.chat.hide-relays .message[class*="relay-"]:not(.relay-open) { margin-left: 0; margin-bottom: 14px; clip-path: inset(-6px -100vmax -6px); }
.chat.hide-relays .message.relay-open > .relay-head { display: none; }
.chat.hide-relays .message.relay-quiet:not(.relay-open) { display: none; }

/* A picture or video still on its way (#703; media-loading.mjs). Until its size is known, one line:
   the words that named it, where it is, and a bar — no guessed shape. As soon as its size is known, the
   figure it will be in takes its place, with a clear picture of that size (media-early.mjs), so the
   page does not move when it comes. The line's margin above and below is the figure's (base.css on the
   PC, mobile.css on Android and the Web), so the text above it does not move either. */
.media-slot.media-loading {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: min(100%, 320px);
  min-height: 30px;
  padding: 6px 72px 10px 8px;
  overflow: hidden;
  border-radius: 6px;
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #6f7a74;
  background: linear-gradient(90deg, #eceff0 0%, #f6f8f8 40%, #eceff0 80%) 0 0 / 200% 100%;
  animation: media-skeleton 1.4s ease-in-out infinite;
}
.media-slot.media-loading:has(.media-cancel) { padding-left: 52px; }
/* The place of a picture whose size is known, before it has come: drawn by the picture's own rules. */
figure.embed img.media-box {
  background: linear-gradient(90deg, #eceff0 0%, #f6f8f8 40%, #eceff0 80%) 0 0 / 200% 100%;
  animation: media-skeleton 1.4s ease-in-out infinite;
}
/* Where it is (#583): a word at the top right, and a bar along the bottom that fills with what has
   come, or only moves while how much is not known. A picture shown while it still arrives keeps both. */
.media-slot.media-loading .media-stage,
figure.embed.media-partial .media-stage { position: absolute; top: 6px; right: 8px; line-height: 14px; font-size: 11px; color: #4f5a54; }
.media-slot.media-loading .media-progress,
figure.embed.media-partial .media-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px; overflow: hidden; background: rgba(79, 90, 84, 0.12);
}
.media-progress > span { display: block; height: 100%; width: 0; background: #479785; transition: width 0.2s linear; }
.media-progress.unknown > span { width: 30%; animation: media-progress-unknown 1.2s ease-in-out infinite; }
@keyframes media-progress-unknown { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
/* Shown before it has all come: as wide as what it shows, so the bar and the word sit on the picture. */
figure.embed.media-partial { position: relative; width: fit-content; max-width: 100%; }
figure.embed.media-partial .media-progress { top: 0; bottom: auto; }
figure.embed.media-partial .media-stage { background: rgba(255, 255, 255, 0.85); padding: 0 4px; border-radius: 3px; }
.media-slot.media-loading .media-cancel,
figure.embed.media-partial .media-cancel { position: absolute; top: 5px; left: 8px; margin: 0; font-size: 11px; line-height: 14px; }
/* It did not come: the words again, marked, with 再読み込み. */
.media-slot.media-failed { color: #9a5b52; text-decoration: underline dotted; text-underline-offset: 3px; }
@keyframes media-skeleton { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .media-slot.media-loading, figure.embed img.media-box, .media-progress.unknown > span { animation: none; } }
.media-retry,
.media-cancel {
  font: inherit;
  font-size: 0.85em;
  margin-left: 0.3em;
  padding: 0 0.6em;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: #fff;
  color: inherit;
  cursor: pointer;
}

/* A picture on a network volume is read only when this is pressed (#494; media.mjs). */
.media-net {
  font: inherit;
  font-size: 0.85em;
  margin-left: 0.3em;
  padding: 0 0.6em;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* #698 task list: open button and GitHub Projects status select sit side by side, never nested. */
.github-task-item:has(.task-project-status), .github-mobile-item:has(.task-project-status) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.task-row-open, .task-row-open:hover { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; white-space: normal; font: inherit; }
.task-project-status { display: flex; flex-direction: column; gap: 4px; max-width: 160px; }
.task-project-choice { display: flex; flex-direction: column; font-size: 11px; min-width: 0; }
.task-project-choice select { max-width: 150px; min-width: 80px; font: inherit; padding: 4px; }

/* The sidebar: brand, workspace picker, search, the session tree, ＋ rows, drag-and-drop marks. */
.brand {
  font-weight: 650;
  font-size: 20px;
  padding: 0 8px 10px;
}
.brand small {
  font-size: 9px;
  letter-spacing: 1px;
  color: #658174;
  margin-left: 8px;
}
nav {
  flex: 1;
  overflow: auto;
}
nav button {
  display: grid;
  grid-template-columns: 12px 24px 1fr;
  align-items: center;
  width: 100%;
  text-align: left;
  gap: 0 6px;
  border: 0;
  background: none;
  padding: 5px 9px;
  margin: 1px 0;
  font-size: 13px;
}
nav button.selected {
  background: #dfe9e1;
}
#workspace {
  width: 100%;
  margin: 0 0 6px;
  font-size: 12px;
  padding: 6px;
}
.plugin-host {
  height: 100%;
  overflow: auto;
}
.plugin-error {
  padding: 12px;
  color: #a04436;
  font-size: 12px;
  white-space: pre-wrap;
}
.ws-session-row {
  display: flex;
  gap: 6px;
  margin: 4px 0;
}
.ws-session-row input {
  flex: 1;
}
.ws-plugins {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 8px;
}
/* Group tree: header row with a disclosure mark, member sessions indented below. */
.session-group .group-toggle {
  position: relative;
  grid-template-columns: 12px 1fr auto;
  padding: 8px 9px 4px;
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #4a5d52;
  cursor: grab;
  user-select: none;
}
.session-group.group-pointer-moving .group-toggle { cursor: grabbing; }
.session-group .group-toggle b {
  position: absolute;
  left: -2px;
  top: 50%;
  width: 10px;
  transform: translateY(-50%);
  text-align: center;
  font-weight: 400;
  color: #8a968f;
}
.session-group .group-toggle span {
  grid-column: 2;
}
.session-group .group-toggle small {
  grid-column: 3;
  color: #8a968f;
  font-weight: 400;
}
.session-group .group-toggle .group-status {
  justify-self: start;
}
.session-row.in-group {
  margin-left: 14px;
  border-left: 1px solid #dfe4dd;
}
/* A group-less root is a peer of the group headings, so its status lines up with theirs. Its
   disclosure cannot hang left like a member's (the scrolling nav would clip it), so it sits in the
   button's own 9px gutter instead, as the heading's mark does. */
.session-row:not(.in-group):not(.is-child) .subsession-toggle {
  left: 0;
  width: 9px;
}
nav button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Status icon: shape + color per phase, words in the tooltip. */
nav i {
  width: 9px;
  height: 9px;
  border: 1px solid #a1aaa3;
  border-radius: 100%;
  box-sizing: border-box;
}
/* 送信中 draws as running: that Codex has not taken the message yet is too thin a difference to
   need a mark of its own (2026-09-23, the person); the tooltip and the status line say it. */
nav i.running,
nav i.connecting,
nav i.external {
  background: radial-gradient(circle at 30% 25%, #d9d9d9, #898989 65%, #666);
  border-color: #999;
}
/* Work still going on elsewhere reads as work, not as a broken row. */
nav i.external {
  background: radial-gradient(circle at 30% 25%, #cfe1f2, #6ea3d0 65%, #3b7fb6);
  border-color: #3b7fb6;
}
nav .session-pick small {
  justify-self: end;
  font-size: 10px;
  color: #8a968f;
  white-space: nowrap;
  padding-left: 6px;
}
nav i.waiting {
  background: #e8b04a;
  border-color: #c9962f;
}
/* 判断待ち (#246): a turn that ended asking in its words — the colour of 承認待ち as a ring, so the two
   are told apart at a glance. */
nav i.asking {
  background: #fff;
  border: 2px solid #e8b04a;
}
nav i.ready,
nav i.completed {
  background: #2e7d69;
  border-color: #2e7d69;
}
nav i.stopped {
  background: #b9c0bb;
  border-color: #9aa39c;
  border-radius: 2px;
}
nav i.failed {
  background: #c14e45;
  border-color: #c14e45;
  border-radius: 2px;
}
nav i.queued,
nav i.external {
  border-style: dashed;
  border-color: #3b7fb6;
}
/* Engine mark: two letters, tinted per engine. */
nav b.engine {
  font-size: 9.5px;
  font-weight: 700;
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.3px;
  padding: 1px 0;
  border-radius: 4px;
  text-align: center;
  color: #fff;
}
nav b.engine.codex {
  background: #3b7fb6;
}
nav b.engine.claude {
  background: #c97a3d;
}
/* A channel: no engine and no state, so the status column stays empty and the mark is "#". */
nav b.engine.channel {
  background: #7d877f;
}
nav i.status.channel {
  visibility: hidden;
}
.session-add button {
  display: block;
  padding: 3px 9px 3px 15px;
  color: #8a968f;
  font-size: 13px;
  border: 0;
  background: none;
  text-align: left;
  width: 100%;
}
.session-add button:hover,
.session-add button:focus-visible {
  color: #2e7d69;
  background: #edf2ee;
}
.session-add.in-group {
  margin-left: 14px;
  border-left: 1px solid #dfe4dd;
}
footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  color: #748078;
}
.session-row[draggable="true"] {
  cursor: grab;
}
.session-row .subsession-toggle {
  position: absolute;
  z-index: 1;
  /* The disclosure lives in the tree gutter, not in front of the session grid. This keeps the
     status column fixed for same-depth rows whether or not they have descendants. */
  left: -12px;
  top: 3px;
  display: block;
  width: 20px;
  padding: 2px 0;
  color: #718078;
  text-align: center;
  cursor: pointer;
}
.session-row.family-collapsed .session-pick {
  font-weight: 600;
}
.draft-wrap {
  position: relative;
}
/* A sub-session sits under the one it belongs to: one step right of its parent, per level. */
.session-row.is-child {
  margin-left: calc(14px + var(--depth, 0) * 12px);
  border-left: 1px solid #dfe4dd;
}
.session-row.is-child .session-pick span::before {
  content: "└ ";
  color: #9aa39c;
}
.page-frame {
  flex: 1;
  width: 100%;
  min-height: 200px;
  border: 0;
  border-radius: 6px;
  background: #fff;
}
.session-row.waiting-copy .session-pick {
  background: #fdf1ef;
}

/* Another desk's sessions */
.session-group.peer .group-toggle span {
  color: #3b6fa0;
  font-weight: 700;
}
.session-group.peer.offline .group-toggle span {
  color: #9aa39c;
}
nav i.status.offline {
  background: #d8dcd8;
}

/* The picker on the 待機中 heading sits at its right, small. */
.session-group.waiting {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.session-group.waiting .group-toggle {
  flex: 1;
}
.waiting-filter {
  font-size: 10px;
  max-width: 104px;
  margin-bottom: 3px;
}

.session-group.waiting.none {
  opacity: 0.5;
}

/* Priority is the colour under the name: low blue, mid green, high red. Drawn as the box's own
 * border, not as an underline: the name is clipped to one line, and an underline sitting below the
 * baseline is cut off with the overflow (measured: a 16px line box, the underline at 3px below). */
.session-row.priority-low .session-pick span,
.session-row.priority-mid .session-pick span,
.session-row.priority-high .session-pick span {
  border-bottom: 2px solid;
  padding-bottom: 1px;
}
/* Low is meant to fall back: a quiet name and no line at all. */
.session-row.priority-low .session-pick span {
  border-bottom: 0;
  padding-bottom: 0;
  color: #93a09a;
}
.session-row.priority-mid .session-pick span { border-bottom-color: #2e7d69; }
.session-row.priority-high .session-pick span { border-bottom-color: #c14e45; }
/* Tucked away until its hour: still there, just quiet. */
.session-row.suspended { opacity: 0.55; }
.session-group.resting .group-toggle span { color: #8a968f; font-weight: 500; }
/* The key that summons a session, at the row's right edge. */
nav .session-pick small { font-family: ui-monospace, Menlo, monospace; }
.waiting-pickers { display: flex; gap: 3px; }
.waiting-pickers select { font-size: 10px; max-width: 84px; }

/* Cmd/Ctrl-click or Shift-click selects several sessions for one drag. */
.session-row.multi-selected .session-pick {
  background: #dceee5;
  box-shadow: inset 3px 0 #2e7d69;
}

/* The middle of a session makes sub-sessions; its top and bottom edges show insertion lines. */
.session-row.drop-into .session-pick {
  outline: 2px solid #479785;
  outline-offset: -2px;
  border-radius: 6px;
}
.session-row.drop-into .session-pick span::after {
  content: " ← ここのサブに";
  color: #2e7d69;
  font-size: 10px;
}

/* A session over a group's heading: into that group (its top edge means "above it, outside"). */
.session-group.drop-into .group-toggle {
  outline: 2px solid #479785;
  outline-offset: -2px;
  border-radius: 6px;
}
.session-group.drop-into .group-toggle span::after {
  content: " ← このグループに";
  color: #2e7d69;
  font-size: 10px;
  font-weight: 400;
}

/* Something reserved for a later hour: a timer beside the session's name. */
.session-row em.timer {
  font-style: normal;
  font-size: 10px;
  opacity: 0.75;
}

/* Talk carried on in the CLI outside the desk (#248, ui/model/outside-update.mjs): a blue ring round
   the state dot — never cut by a long name, and clear of the name's own marks (└, the watch badge).
   The name's tooltip says how many and that they are not shown yet. */
.session-row.outside-newer i.status {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3b7fb6;
}

/* A watched widget of this session changed: a badge left of its name. */
.session-row.watch-changed .session-pick span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #d9534f;
  vertical-align: 1px;
}

/* ⌘ held: each of the first nine sessions shows the number ⌘digit brings it up by, over the row's
   left edge; let go and it is gone. */
.holding-command .session-row[data-place]::after {
  content: attr(data-place);
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 5px;
  background: #2e7d69;
  color: #fff;
  font: 600 11px/18px ui-monospace, Menlo, monospace;
  text-align: center;
  box-shadow: 0 1px 4px #0003;
  z-index: 2;
  pointer-events: none;
}

/* A watch's condition holds: the session or group is flagged. */
/* Watched: a small eye before the name (a session's own watch, or a group's on its heading). */
.session-row.watching .session-pick span::before,
.session-group.watching .group-toggle span::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 4px;
  vertical-align: -2px;
  background: #6f7f73;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5.5 4.5 12 4.5 22.5 12 22.5 12 18.5 19.5 12 19.5 1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5.5 4.5 12 4.5 22.5 12 22.5 12 18.5 19.5 12 19.5 1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.session-row.watch-alert .session-pick { background: #fff4d6; box-shadow: inset 3px 0 0 #e0a100; }
.session-row.watch-alert .session-pick span::after { content: " ⚑"; color: #c98a00; }
.session-group.watch-alert .group-toggle { background: #fff4d6; box-shadow: inset 3px 0 0 #e0a100; border-radius: 6px; }
.session-group.watch-alert .group-toggle span::after { content: " ⚑"; color: #c98a00; }

/* Under しまったもの: how the session was put away. */
.session-row em.away {
  font-style: normal;
  font-size: 10px;
  color: #6e7f75;
  border: 1px solid #cfd8d2;
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 4px;
  flex-shrink: 0;
}
.session-row em.away:empty {
  display: none;
}
/* Not yet checked since the desk started: neither stopped nor running (2026-09-23). */
nav i.checking {
  background: transparent;
  border-style: dotted;
  border-color: #6b7369;
}

/* The sidebar footer: machine load chips and the weekly subscriptions with their bars. */
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.build-kind {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 2px 6px;
  border: 1px solid #8a968f;
  border-radius: 999px;
  color: #46514a;
  background: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.build-kind.development {
  border-color: #b66a00;
  color: #714400;
  background: #fff3cf;
}
.build-kind.release {
  border-color: #2e7d69;
  color: #205c4e;
  background: #e6f2ed;
}
.build-kind.unknown {
  border-color: #a5372c;
  color: #8a2f28;
  background: #fdeceb;
}
/* The member tier beside the build label (account.mjs showTier). */
.member-tier {
  margin-left: 5px;
  padding: 2px 7px;
  border: 1px solid #8a968f;
  border-radius: 999px;
  background: #fff;
  color: #46514a;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.member-tier:disabled { cursor: default; opacity: 1; }
.member-tier.guest { border-color: #a5372c; color: #8a2f28; background: #fdeceb; cursor: pointer; }
.member-tier.free { border-color: #2e7d69; color: #205c4e; background: #e6f2ed; }
.member-tier.paid { border-color: #6a4bb0; color: #4a3290; background: #efeafb; }
/* Machine load and what is left of the weekly subscriptions. */
#status-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid #e6eae6;
  padding-top: 7px;
}
#machine {
  display: flex;
  gap: 6px;
}
/* The plain look only applies while there is nothing to warn about; otherwise the id here would
   outrank .warn / .alert and the warning colour would never show. */
#status-area .chip:not(.warn):not(.alert) {
  background: #e9eee9;
  color: #46514a;
}
#status-area .chip {
  flex: 1;
  text-align: center;
  padding: 3px 6px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.quota-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.quota-row .engine {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 4px;
  color: #fff;
}
.quota-row .engine.codex {
  background: #3b7fb6;
}
.quota-row .engine.claude {
  background: #c97a3d;
}
.quota-week {
  flex: 1;
}
.quota-today,
.quota-week {
  padding: 2px 5px;
  border-radius: 8px;
  background: #f2f4f2;
}
/* One warning scale for the machine and for the subscription. */
.warn {
  background: #fbeec2;
  color: #7a5d10;
}
.alert {
  background: #f7d5d1;
  color: #a5372c;
}
.desk {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.quota-bars .bar {
  position: relative;
  height: 9px;
  border-radius: 3px;
  background: #eef1ee;
  margin-top: 4px;
}
/* The week's bar: grey for the days after today, today's share framed on top of it. */
.quota-bars .bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
}
.quota-bars .bar i.later { background: #b9c3bc; border-radius: 3px 0 0 3px; }
.quota-bars .bar i.today { background: #2e7d69; }
.quota-bars .bar i.today.warn { background: #e8b04a; }
.quota-bars .bar i.today.alert { background: #d98b52; }
.quota-bars .bar i.day {
  top: -2px;
  bottom: -2px;
  border: 1px solid #46564b;
  border-radius: 2px;
  box-sizing: border-box;
  background: transparent;
}
.quota-bars .bar i.over {
  background: repeating-linear-gradient(135deg, #d46a5c 0 3px, #f3c9c3 3px 6px);
}
/* Sessions waiting on the person, gathered under one heading */
.session-group.waiting .group-toggle span {
  color: #a5372c;
  font-weight: 700;
}

/* Today's share as a battery, filling from the left, flat when the day is overspent. */
.battery {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 11px;
  border: 1px solid #9aa39c;
  border-radius: 3px;
  background: #fff;
  flex-shrink: 0;
}
.battery i {
  display: block;
  height: 100%;
  background: #2e7d69;
}
.battery.warn i { background: #e8b04a; }
.battery.alert i { background: #d98b52; }
.battery.flat { border-color: #c14e45; background: #fdeceb; }
.battery .nub {
  position: absolute;
  right: -3px;
  top: 3px;
  width: 2px;
  height: 5px;
  background: #9aa39c;
  border-radius: 0 1px 1px 0;
}
.battery.flat .nub { background: #c14e45; }
nav b.engine.fable, .quota-row b.engine.fable { background: #7b5ea7; }
.quota-day-label { color: #8a968f; font-size: 10px; }

/* A reading we do not have: said plainly, never drawn as a full week. */
.quota-row.unknown {
  opacity: 0.75;
}
.quota-week.unknown {
  color: #8a968f;
}
.quota-unknown {
  font-size: 10px;
  color: #8a968f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quota-age {
  font-size: 10px;
  color: #8a968f;
  border: 1px solid #d7dfd8;
  border-radius: 3px;
  padding: 0 3px;
}
/* When the figure was read (0.4.4): on the row, quiet beside the figures. */
.quota-at {
  font-size: 10px;
  color: #8a968f;
  white-space: nowrap;
}
/* The version, and beside it "更新" when a newer build is published. */
.version-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#update {
  padding: 1px 8px;
  font-size: 11px;
  border-color: #2e7d69;
  background: #2e7d69;
  color: #fff;
  border-radius: 10px;
}
#update:disabled {
  opacity: 0.7;
}

/* 問い合わせ and 設定, side by side at the right of the footer row. */
.footer-actions { display: flex; align-items: center; gap: 4px; }
#contact { padding: 2px 8px; font-size: 14px; line-height: 1.2; }
.account-badge {
  align-self: center;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #53645a;
  font-size: 12px;
}

/* The phone: one column, the bar fixed above, the screen below it scrolling on its own. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #f8faf8; }
#app { display: flex; flex-direction: column; height: var(--mobile-viewport-height, 100dvh); }
.pull-refresh { position: fixed; z-index: 12; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 52px); transform: translate(-50%, calc(-100% + var(--pull-distance, 0px))); opacity: 0; pointer-events: none; padding: 6px 12px; border-radius: 14px; background: #244c38e8; color: #fff; font-size: 12px; box-shadow: 0 2px 8px #0003; transition: opacity 120ms ease, transform 120ms ease; }
.pull-refresh.shown { opacity: 1; }
.bar { display: flex; align-items: center; justify-content: space-between; padding: env(safe-area-inset-top, 0) 10px 0; min-height: 48px; border-bottom: 1px solid #dfe5e1; background: #fff; flex: none; }
.bar-left, .bar-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar h1 { font-size: 16px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar button { font-size: 20px; background: none; border: 0; padding: 6px 8px; }
.via { font-size: 11px; padding: 2px 6px; border-radius: 8px; background: #e6ebe7; color: #445; }
.via.direct { background: #d8f0dc; color: #1d5a2c; }
.via.relay { background: #e3e8f7; color: #2b3f8a; }
/* A note says what just happened; it never grows into the screen (a long path once pushed the
   whole conversation down). Two lines, then an ellipsis. */
/* Only the transient notice under the bar is clamped. `.message.note` is a conversation entry
   (including 「見た画像」) and must grow to the full height of its media and caption. */
#app > .note { padding: 6px 12px; background: #fff6d6; border-bottom: 1px solid #ecd9a0; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; will-change: transform; }
/* The screens are side by side: what moves out and what comes in are both seen. */
#app { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  main, .chat-screen { transition: none !important; }
}
/* The desk's rows, at a finger's size. */
.list nav { overflow: visible; }
.list nav button { font-size: 15px; padding: 11px 12px; gap: 0 8px; grid-template-columns: 12px 26px 1fr; }
.list nav .session-continue-check {
  display: block;
  width: calc(100% - 20px);
  margin: 8px 10px;
  padding: 10px 12px;
  border: 1px solid #bed8c8;
  border-radius: 8px;
  background: #eef7f0;
  color: #255c42;
  font-weight: 600;
}
.list nav .session-pick > i, .list nav .session-pick > b { grid-row: 1; }
.list nav .session-pick > span { grid-row: 1; grid-column: 3; }
.list nav .session-pick .handoff-mark { font-style: normal; color: #b26a00; }
.list nav .session-pick small.activity { grid-row: 2; grid-column: 3; justify-self: start; font-size: 12px; color: #778; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; padding: 0; }
.list .session-group .group-toggle { font-size: 13px; padding: 12px 12px 6px; }
.list .waiting-filter { font-size: 12px; max-width: 140px; margin: 0 8px 6px 0; }
.list nav p.muted { margin: 4px 12px 10px; }
/* A parent's ▾/▸ is pressed with a finger: the whole height of its row, still left of the status
   column (the desk's sidebar.css places it; a group-less root has only the button's own gutter). */
.list .session-row .subsession-toggle { top: 0; bottom: 0; padding: 0; font-size: 13px; }
.list .session-row:not(.in-group):not(.is-child) .subsession-toggle { width: 12px; }
.chat-screen { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; }
.chat-screen main.chat { flex: 1; overflow-y: auto; }
.to-latest { position: absolute; right: 14px; bottom: 96px; font-size: 12px; padding: 6px 12px; border-radius: 14px; border: 1px solid #d5dcd6; background: #fffffff2; box-shadow: 0 2px 8px #0002; }
.messages { padding: 8px 12px; }
/* Above the oldest message: read further back. */
.chat .older { display: block; margin: 8px auto 0; font-size: 12px; padding: 6px 14px; border-radius: 14px; border: 1px solid #d5dcd6; background: #fff; color: #445; }
.chat .older:disabled { color: #889; }
.message { margin: 8px 0; }
/* A long path or URL has nowhere to break and pushed the conversation wider than the screen (544〜686px
   on 390, 2026-10-04): it breaks anywhere inside the message. Code keeps its lines (white-space: pre)
   and scrolls sideways in its own block. */
.message-body { overflow-wrap: anywhere; }
.message.user .message-body { background: #e9efec; border-radius: 12px 12px 2px 12px; padding: 8px 12px; margin-left: 15%; white-space: pre-wrap; }
.message.note .message-body { color: #778; font-size: 12px; }
.message.pending { opacity: 0.6; }
.message-body pre { overflow-x: auto; background: #f0f3f1; padding: 8px; border-radius: 6px; }
.message-body img, .message-body video, figure.embed img, figure.embed video { max-width: 100%; height: auto; border-radius: 6px; }
figure.embed, .media-slot.media-loading { margin: 6px 0; }
figure.embed figcaption { font-size: 11px; color: #778; word-break: break-all; }
figure.embed audio { width: 100%; }
.message.shell .message-body { font-family: ui-monospace, Menlo, monospace; font-size: 12px; white-space: pre-wrap; background: #f0f3f1; padding: 8px; border-radius: 6px; }
.message-images { margin-top: 4px; }
.message-body img { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; box-sizing: border-box; background: #000e; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
.lightbox-controls { display: flex; gap: 8px; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; flex: none; padding: 4px; border-radius: 8px; background: #111; color: #fff; }
.lightbox-controls button { min-width: 44px; min-height: 44px; border: 1px solid #777; border-radius: 8px; background: #222; color: #fff; font: inherit; font-size: 22px; }
.lightbox-controls button:disabled { opacity: .45; }
.lightbox-close { margin-left: auto; }
.lightbox .lightbox-ratio { min-width: 3em; text-align: center; color: #fff; }
.lightbox-frame { width: 100%; flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; overscroll-behavior: contain; }
.lightbox-frame.zoomed { display: block; text-align: center; }
.lightbox img, .lightbox video { max-width: 100%; max-height: 100%; }
.lightbox-frame.zoomed img { max-width: none; max-height: none; }
.lightbox > video, .lightbox > audio { max-height: 80%; }
.lightbox .caption, .lightbox p { color: #ddd; font-size: 12px; word-break: break-all; }
.approvals { padding: 0 12px; }
.approval { border: 1px solid #e6c56b; background: #fff9e6; border-radius: 8px; padding: 10px; margin: 8px 0; }
.approval-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.approval-actions button { padding: 8px 12px; font: inherit; }
.approval-field { display: block; margin: 6px 0; }
.approval-field input, .approval-field select { width: 100%; box-sizing: border-box; padding: 8px; font: inherit; }
/* One's own words and their 送信, side by side; 送信 is as tall as the field. */
.approval-typed { display: flex; gap: 6px; align-items: flex-end; margin: 6px 0; }
.approval-typed .approval-field { flex: 1; min-width: 0; margin: 0; }
.approval-send { padding: 8px 14px; font: inherit; }
.state { padding: 4px 12px; color: #667; font-size: 12px; }
.compose { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0)); border-top: 1px solid #dfe5e1; background: #fff; flex: none; }
/* The session's model, effort and approval mode: one row of the phone's own pickers. */
.session-choices { display: flex; gap: 6px; min-width: 0; }
.session-choices select { flex: 1 1 0; min-width: 0; font-size: 12px; padding: 4px; border: 1px solid #d5dcd6; border-radius: 6px; background: #fff; }
.compose textarea { flex: 1; font: inherit; padding: 8px; resize: none; }
.compose button { padding: 0 14px; font: inherit; }
.compose .stop { color: #a33; }
.settings { padding: 12px; }
.settings h2 { font-size: 15px; }
.settings button, .pair input { display: block; width: 100%; box-sizing: border-box; padding: 12px; margin: 8px 0; font: inherit; }
.settings .primary { background: #2c6e49; color: #fff; border: 0; border-radius: 8px; }
.settings .danger { color: #a33; }
.remote-desk-settings { margin: 16px 0; }
.remote-settings-form input { box-sizing: border-box; width: 100%; min-width: 0; padding: 10px; font: inherit; }
.muted { color: #778; }

/* The desk's message actions, always shown (a finger has no hover). */
.message-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.message.assistant .message-actions, .message.note .message-actions { justify-content: flex-start; }
.message-actions button { font-size: 12px; padding: 4px 10px; border: 1px solid #d5dcd6; border-radius: 12px; background: #fff; color: #445; }
.message-actions button:disabled { opacity: 0.4; }
.compose .history { padding: 0 10px; font-size: 13px; }
/* A sheet from the bottom: the prompt history. */
.sheet { position: fixed; inset: 0; background: #0006; z-index: 15; display: flex; align-items: flex-end; }
.sheet-panel { background: #fff; width: 100%; max-height: 75vh; display: flex; flex-direction: column; border-radius: 12px 12px 0 0; padding-bottom: env(safe-area-inset-bottom, 0); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid #e3e8e4; }
.sheet-head button { font: inherit; background: none; border: 0; color: #2c6e49; }
.sheet-list { overflow-y: auto; }
.sheet-row { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid #eef1ee; background: none; font: inherit; }
.sheet-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.sheet-row small { display: block; color: #889; font-size: 11px; margin-top: 2px; }
.sheet-row.danger { color: #a33; }
.sheet-field { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; }
.sheet-field input, .sheet-field select { box-sizing: border-box; width: 100%; padding: 10px; font: inherit; }
.new-session-sheet > .primary { margin: 8px 12px calc(8px + env(safe-area-inset-bottom, 0)); padding: 11px; font: inherit; }
.new-session-sheet { overflow-y: auto; }
.new-session-details { margin: 4px 12px; border: 1px solid #d5dcd6; border-radius: 8px; }
.new-session-details summary { padding: 10px; color: #244d35; cursor: pointer; }
.new-session-role { flex-direction: row; align-items: center; justify-content: space-between; }
.new-session-role input { width: auto; }
.new-session-other { display: flex; flex-direction: column; gap: 4px; margin: 8px 12px; }
.new-session-other button, .past-session-row, .channel-pick { padding: 10px; border: 0; background: transparent; color: #244d35; font: inherit; text-align: left; }
.past-session-sheet, .channel-create-sheet { overflow-y: auto; padding: 0 12px 12px; }
.past-session-sheet > input, .channel-create-sheet > input, .past-session-sheet > select, .channel-create-sheet > select { box-sizing: border-box; width: 100%; padding: 10px; margin-top: 8px; font: inherit; }
.past-session-rows { display: flex; flex-direction: column; max-height: 55vh; overflow-y: auto; }
.past-session-row { display: flex; flex-direction: column; border-bottom: 1px solid #e0e5e1; }
.past-session-row small { color: #65766b; overflow-wrap: anywhere; }
.channel-pick { display: block; width: 100%; padding-left: 20px; }
.channel-screen { display: flex; flex-direction: column; min-height: 0; }
.channel-lines { flex: 1; overflow-y: auto; padding: 12px; }
.channel-line { padding: 8px 0; border-bottom: 1px solid #e0e5e1; overflow-wrap: anywhere; }
.channel-line small { color: #65766b; }
.channel-compose-phone { display: flex; gap: 6px; padding: 8px; }
.channel-compose-phone textarea { flex: 1; min-width: 0; font: inherit; }
.directory-candidates { display: grid; gap: 6px; padding: 0 12px 8px; }
.directory-candidate-list { max-height: 25vh; overflow-y: auto; display: grid; gap: 4px; }
.directory-candidate-list button { text-align: left; overflow-wrap: anywhere; }
.directory-toggle, .directory-more { text-align: left; }
.directory-count { margin: 0; font-size: 12px; }
.directory-candidates[hidden], .directory-browser[hidden] { display: none; }
.directory-candidate { width: 100%; white-space: normal; overflow-wrap: anywhere; }
.directory-candidate, .directory-open, .directory-controls button, .directory-row, .directory-add button { padding: 8px; border: 1px solid #d5dcd6; border-radius: 8px; background: #fff; color: #244d35; font: inherit; }
.directory-toggle, .directory-more { padding: 8px; border: 1px solid #d5dcd6; border-radius: 8px; background: #fff; color: #244d35; font: inherit; }
.directory-open { margin: 0 12px 8px; }
.directory-browser { margin: 0 12px 8px; padding: 10px; border: 1px solid #d5dcd6; border-radius: 8px; }
.directory-path { overflow-wrap: anywhere; margin: 0 0 8px; }
.directory-search { display: flex; gap: 6px; }
.directory-search input { box-sizing: border-box; min-width: 0; flex: 1; padding: 8px; font: inherit; }
.directory-search button { padding: 8px; border: 1px solid #d5dcd6; border-radius: 8px; background: #fff; color: #244d35; font: inherit; }
.directory-controls, .directory-add { display: flex; gap: 6px; align-items: center; margin: 6px 0; }
.directory-folders { max-height: 25vh; overflow-y: auto; }
.directory-row { display: block; width: 100%; text-align: left; margin: 4px 0; overflow-wrap: anywhere; }
.directory-add input { min-width: 0; flex: 1; padding: 8px; font: inherit; }

/* The reply box: the attachments over one row of controls. */
.compose-row { display: flex; gap: 6px; align-items: stretch; }
.compose-side { display: flex; flex-direction: column; gap: 4px; justify-content: flex-end; }
.compose-side button { font: inherit; padding: 6px 10px; border: 1px solid #d5dcd6; border-radius: 8px; background: #fff; }
.compose .attach { font-size: 18px; line-height: 1; }
.compose textarea { min-height: 40px; max-height: calc(var(--mobile-viewport-height, 100dvh) / 3); overflow-y: auto; box-sizing: border-box; }
.send-box { position: relative; display: flex; align-items: stretch; }
.send-box .send { padding: 0 16px; }
.send-box .stop { position: absolute; right: -2px; bottom: -6px; font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 10px; border: 1px solid #e0b4b4; background: #fff; color: #a33; }
.compose .attachment-strip .image-tile img { max-height: 64px; }

/* A widget of the desk, as a picture that keeps up, with its own pull-down above. */
.widget-screen { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.widget-bar { display: flex; gap: 4px; padding: 4px 6px; border-bottom: 1px solid #e3e8e4; background: #fff; align-items: center; min-width: 0; }
.widget-tabs { display: flex; gap: 4px; overflow-x: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.widget-bar .widget-tab { flex: none; font: inherit; font-size: 12px; line-height: 1.25; padding: 4px 8px; border: 1px solid #d5dcd6; border-radius: 12px; background: #fff; color: #445; white-space: nowrap; }
.widget-tab.on { background: #2c6e49; border-color: #2c6e49; color: #fff; }
.widget-bar button { font-size: 18px; padding: 4px 12px; background: none; border: 1px solid #d5dcd6; border-radius: 8px; }
.widget-view { flex: 1; overflow: auto; background: #f0f2f0; display: flex; align-items: flex-start; justify-content: center; }
.widget-shot { position: relative; width: 100%; height: auto; overflow: hidden; touch-action: none; user-select: none; background: #fff; }
.widget-shot-base { display: block; width: 100%; height: 100%; object-fit: fill; }
.widget-shot-patch { position: absolute; object-fit: fill; pointer-events: none; }
.widget-note { padding: 12px; }

/* The desk's footer in one line under the list: load, then each CLI's week. */
.machine-bar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0)); border-top: 1px solid #dfe5e1; background: #fff; flex: none; font-size: 12px; }
.machine-bar .quota-mini { display: flex; gap: 4px; align-items: center; }
.machine-bar .chip { padding: 2px 8px; }
/* The list scrolls inside; the load bar stays at the bottom of the screen. */
.list { display: flex; flex-direction: column; overflow: hidden; }
.list nav { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.sheet-url { padding: 8px 12px; word-break: break-all; margin: 0; border-bottom: 1px solid #eef1ee; }

/* A widget drawn on the phone itself (the desk's model, the phone's shape). */
.widget-view.own { display: block; background: #fff; }
.phone-widget { display: flex; flex-direction: column; min-height: 100%; }
/* GitHub tasks are text and controls on the phone, with one task per row. */
.github-mobile { width: 100%; box-sizing: border-box; min-height: 0; }
.github-mobile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 4px; }
.github-mobile-repo { color: #65736a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.github-mobile-refresh, .github-mobile-version, .github-mobile-back, .github-mobile-open { border: 1px solid #d5dcd6; border-radius: 8px; background: #fff; color: #244c38; font: inherit; padding: 7px 10px; }
.github-mobile-refresh { flex: none; font-size: 18px; line-height: 1; }
.github-mobile-versions { display: flex; gap: 6px; overflow-x: auto; padding: 4px 12px 8px; -webkit-overflow-scrolling: touch; }
.github-mobile-version { flex: none; font-size: 13px; border-radius: 18px; }
.github-mobile-version[aria-pressed="true"] { background: #2c6e49; border-color: #2c6e49; color: #fff; }
.github-mobile-toolbar { display: flex; gap: 6px; padding: 0 12px 8px; }
.github-mobile-toolbar select { flex: 1 1 0; min-width: 0; padding: 7px 3px; border: 1px solid #d5dcd6; border-radius: 8px; background: #fff; color: #334; font-size: 12px; }
.github-mobile-search { box-sizing: border-box; margin: 0 12px 4px; width: calc(100% - 24px); padding: 8px 10px; border: 1px solid #d5dcd6; border-radius: 8px; font: inherit; }
.github-mobile-note { margin: 0; padding: 4px 12px 8px; color: #65736a; font-size: 12px; overflow-wrap: anywhere; }
.github-mobile-list { display: flex; flex-direction: column; }
.github-mobile-item { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; padding: 12px; border: 0; border-bottom: 1px solid #e3e8e4; background: #fff; text-align: left; font: inherit; }
.github-mobile-title { font-weight: 600; overflow-wrap: anywhere; }
.github-mobile-meta { color: #68766e; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.github-mobile-empty, .github-mobile-limit { padding: 10px 12px; margin: 0; color: #68766e; font-size: 13px; }
.github-mobile-detail { padding: 8px 12px 18px; overflow-wrap: anywhere; }
.github-mobile-detail h2 { font-size: 17px; line-height: 1.4; margin: 14px 0 8px; }
.github-mobile-body { white-space: pre-wrap; line-height: 1.55; margin: 12px 0; }
.github-mobile-detail .github-mobile-meta { margin: 0; }
.github-mobile-open { margin-top: 6px; }
.github-mobile-create { margin: 4px 12px 10px; min-height: 38px; border: 1px solid #d5dcd6; border-radius: 8px; background: #fff; color: #244c38; font: inherit; }
.github-mobile-create-form, .github-mobile-edit-form, .github-mobile-comment-form { display: grid; gap: 8px; margin: 0 12px 12px; }
.github-mobile-create-form[hidden] { display: none; }
.github-mobile-create-form input, .github-mobile-create-form textarea, .github-mobile-create-form select,
.github-mobile-edit-form input, .github-mobile-edit-form textarea, .github-mobile-edit-form select,
.github-mobile-comment-form textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 8px; border: 1px solid #d5dcd6; border-radius: 8px; font: inherit; }
.github-mobile-create-form textarea, .github-mobile-edit-form textarea, .github-mobile-comment-form textarea { min-height: 88px; resize: vertical; }
.github-mobile-create-form button, .github-mobile-edit-form button, .github-mobile-comment-form button,
.github-mobile-project-save { min-height: 38px; border: 1px solid #d5dcd6; border-radius: 8px; background: #fff; color: #244c38; font: inherit; }
.github-mobile-create-more, .github-mobile-edit-more, .github-mobile-edit { min-width: 0; }
.github-mobile-create-more > input, .github-mobile-create-more > select,
.github-mobile-edit-more > input, .github-mobile-edit-more > select { margin-top: 8px; }
.github-mobile-project-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.github-mobile-project-select { flex: 1 1 120px; min-width: 0; min-height: 38px; }
.github-mobile-comment { white-space: pre-wrap; }
.files-bar { display: flex; gap: 6px; align-items: center; padding: 8px; border-bottom: 1px solid #e3e8e4; overflow-x: auto; }
.files-bar button, .files-sort { font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid #d5dcd6; border-radius: 8px; background: #fff; white-space: nowrap; }
.files-bar .on { background: #e6efe9; }
.files-crumbs { display: flex; gap: 2px; overflow-x: auto; flex: 1; }
.files-crumb { border: 0 !important; padding: 6px 4px !important; color: #2c6e49; }
.files-rows { display: flex; flex-direction: column; }
.files-actions, .files-row-actions, .files-confirm, .files-editor { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 10px; }
.files-confirm[hidden], .files-editor[hidden] { display: none; }
.files-actions button, .files-row-actions button, .files-confirm button, .files-editor button { border: 1px solid #d5dcd6; border-radius: 8px; background: #fff; padding: 7px 9px; font: inherit; }
.files-actions button:disabled { opacity: .5; }
.files-item { display: flex; flex-wrap: wrap; border-bottom: 1px solid #eef1ee; }
.files-item > .files-row { flex: 1; min-width: 0; border-bottom: 0; }
.files-item > button[aria-label$="の操作"] { border: 0; background: none; color: #2c6e49; padding: 8px; font: inherit; }
.files-row-actions { flex-basis: 100%; background: #f6f8f6; }
.files-editor-label { display: flex; gap: 6px; align-items: center; flex: 1; min-width: 180px; }
.files-editor-input { width: 100%; min-width: 0; box-sizing: border-box; padding: 7px; font: inherit; }
.files-confirm { background: #fff6ee; }
.files-row { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 8px; align-items: center; width: 100%; text-align: left; padding: 11px 12px; border: 0; border-bottom: 1px solid #eef1ee; background: none; font: inherit; }
.files-row .files-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-row.directory .files-name { font-weight: 600; }
.files-row small { color: #889; font-size: 11px; }
.files-note { padding: 12px; }

/* The terminal, drawn here: the shell's own text, and a line to run one command. */
.term-head { padding: 6px 12px; border-bottom: 1px solid #e3e8e4; }
.term-screen { flex: 1; margin: 0; padding: 10px 12px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.45; background: #10120f; color: #e6efe9; }
.term-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #e3e8e4; background: #fff; }
.term-line { flex: 1; font: inherit; font-size: 15px; padding: 9px 10px; border: 1px solid #d5dcd6; border-radius: 8px; }
.term-run { font: inherit; padding: 9px 14px; border: 1px solid #d5dcd6; border-radius: 8px; background: #e6efe9; }
/* The shelf: what the desk keeps at hand. */
.clip-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 8px; }
.clip-row { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #e3e8e4; border-radius: 10px; background: #fff; }
.clip-body { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: center; flex: 1; text-align: left; padding: 12px; border: 0; background: none; font: inherit; }
.clip-body .clip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-preview { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #111; }
.clip-preview.image { cursor: zoom-in; }
.clip-preview.missing { opacity: .35; }
.clip-row > .clip-name { padding: 7px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.clip-value { margin: 0; min-height: 72px; padding: 34px 10px 10px; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 13px; }
.clip-actions { position: absolute; top: 5px; right: 5px; display: flex; gap: 4px; }
.clip-copy, .clip-remove, .clip-edit { min-height: 30px; padding: 0 7px; border: 1px solid #d5dcd6; border-radius: 15px; background: rgba(255,255,255,.92); color: #445; font: inherit; }
.clip-remove { color: #889; }
.clip-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; }
.clip-edit-text { grid-column: 1 / -1; width: 100%; min-height: 90px; box-sizing: border-box; resize: vertical; font: inherit; }
.clip-save, .clip-cancel { min-height: 36px; font: inherit; }
.clip-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #e3e8e4; }
.clip-text { flex: 1; font: inherit; font-size: 15px; padding: 9px 10px; border: 1px solid #d5dcd6; border-radius: 8px; }
.clip-note { padding: 12px; }

/* The viewer, drawn here: letters, a picture, or a folder's rows. */
.viewer-head { padding: 6px 12px; border-bottom: 1px solid #e3e8e4; }
.viewer-raw { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.viewer-body { flex: 1; display: flex; flex-direction: column; gap: 8px; overflow: auto; padding: 12px; }
.viewer-text { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.viewer-media { max-width: 100%; }
.viewer-row { display: block; width: 100%; text-align: left; padding: 11px 2px; border: 0; border-bottom: 1px solid #eef1ee; background: none; font: inherit; }
.viewer-row.directory { font-weight: 600; }
.viewer-url { word-break: break-all; color: #667; }
.viewer-open { align-self: flex-start; font: inherit; padding: 8px 12px; border: 1px solid #d5dcd6; border-radius: 8px; background: #e6efe9; }
.viewer-body .page-frame { width: 100%; height: 70vh; flex: none; border: 0; background: #fff; }
/* Progress: every task shares this one date axis. In portrait the names stay put while the dates
   swipe sideways; landscape has enough room to show the canvas at once. */
.plan-timeline-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior-x: contain; background: #fff; }
.plan-projects { --plan-name: 158px; min-width: 720px; padding: 10px 12px 18px; box-sizing: border-box; }
.plan-axis, .plan-task, .plan-head { display: grid; grid-template-columns: var(--plan-name) minmax(0, 1fr); }
.plan-axis { position: sticky; top: 0; z-index: 4; height: 25px; color: #778; font-size: 10px; background: #fff; border-bottom: 1px solid #dfe5e1; }
.plan-axis-name, .plan-task-label, .plan-project-title { position: sticky; left: 0; z-index: 2; background: #fff; }
.plan-axis-name { padding: 5px 8px 0 0; }
.plan-axis-track, .plan-track { position: relative; background: repeating-linear-gradient(to right, #e5ebe7 0 1px, transparent 1px calc(100% / var(--plan-weeks, 6))); }
.plan-weeks { display: grid; height: 100%; }
.plan-weeks span { border-left: 1px solid #e5ebe7; padding: 5px 0 0 4px; overflow: hidden; white-space: nowrap; }
.plan-project { border-bottom: 1px solid #dfe5e1; }
.plan-head { min-height: 40px; background: #f5f8f6; border-bottom: 1px solid #e5ebe7; }
.plan-project-title { display: flex; flex-wrap: wrap; align-content: center; gap: 2px 8px; padding: 6px 8px 6px 0; background: #f5f8f6; }
.plan-name { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-overall { font-weight: 600; color: #2c6e49; }
.plan-due { align-self: center; padding-left: 7px; }
.plan-late { flex-basis: 100%; color: #b4453c; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-task { min-height: 47px; font-size: 12px; border-top: 1px solid #f0f3f1; }
.plan-task-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 5px; align-content: center; padding: 5px 8px 5px 0; }
.plan-task.mine .plan-task-name { font-weight: 700; }
.plan-task-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-status { color: #889; }
.plan-status.blocked { color: #b4453c; }
.plan-dates, .plan-note-text { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.plan-bar { position: absolute; top: 16px; height: 15px; min-width: 3px; border-radius: 4px; background: #d7e6df; overflow: hidden; box-shadow: 0 0 0 1px #c8d8d0; }
.plan-fill { display: block; height: 100%; background: #479785; }
.plan-bar.blocked .plan-fill, .plan-bar.late .plan-fill, .plan-bar.behind .plan-fill { background: #e5932a; }
.plan-bar.blocked { box-shadow: 0 0 0 1px #b4453c; }
.plan-bar.done .plan-fill { background: #3aa76d; }
.plan-today { position: absolute; z-index: 1; top: 0; bottom: 0; width: 0; border-left: 2px dashed #d9483b; pointer-events: none; }
.plan-axis-track > .plan-today::after { content: "今日"; position: absolute; top: 12px; left: -9px; color: #d9483b; white-space: nowrap; }
.plan-milestone { position: absolute; z-index: 2; top: 8px; width: 9px; height: 9px; margin-left: -4px; border-radius: 2px; background: #5b7fc7; transform: rotate(45deg); }
.plan-milestone.done { background: #bfe3cf; }
.plan-milestone-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 5px 8px; border-top: 1px solid #e8eeea; font-size: 12px; }
.plan-milestone-row span { min-width: 0; overflow-wrap: anywhere; flex: 1 1 150px; }
.plan-milestone-row button { border: 1px solid #d5dcd6; border-radius: 7px; background: #fff; padding: 5px 8px; font: inherit; }
.plan-note { padding: 12px; }
.plan-edit-button { border: 1px solid #d5dcd6; border-radius: 7px; background: #fff; padding: 5px 8px; font: inherit; }
.plan-editor { border-top: 1px solid #dfe5e1; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; background: #fff; }
.plan-editor[hidden] { display: none; }
.plan-editor h3 { flex-basis: 100%; margin: 0; font-size: 14px; }
.plan-edit-field { display: flex; flex-direction: column; gap: 3px; min-width: 120px; flex: 1; font-size: 12px; }
.plan-edit-field input { box-sizing: border-box; width: 100%; min-width: 0; padding: 7px; font: inherit; }
.plan-edit-more { flex-basis: 100%; }
.plan-edit-more > .plan-edit-field { margin-top: 8px; }
.plan-edit-sessions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; border: 1px solid #dfe5e1; }
.plan-edit-member { display: flex; gap: 4px; align-items: center; }
.plan-task-label .plan-edit-button { grid-column: 1 / -1; justify-self: start; }
@media (orientation: landscape) {
  .plan-projects { --plan-name: 190px; min-width: 100%; }
}

/* Mail: the rows the desk found, and one letter. */
.mail-search { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid #e3e8e4; }
.mail-keyword { flex: 1; font: inherit; font-size: 15px; padding: 9px 10px; border: 1px solid #d5dcd6; border-radius: 8px; }
.mail-find { font: inherit; padding: 9px 14px; border: 1px solid #d5dcd6; border-radius: 8px; background: #e6efe9; }
.mail-rows { display: flex; flex-direction: column; }
.mail-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; text-align: left; padding: 11px 12px; border: 0; border-bottom: 1px solid #eef1ee; background: none; font: inherit; }
.mail-row .mail-subject-line { grid-column: 1 / -1; font-size: 13px; color: #445; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-letter { padding: 12px; overflow: auto; }
.mail-back { font: inherit; padding: 8px 12px; border: 1px solid #d5dcd6; border-radius: 8px; background: #fff; }
.mail-head { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; }
.mail-text { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 13px; }
.mail-html img, .mail-html video { max-width: 100%; height: auto; }
.mail-note { padding: 12px; }

/* Posting: where it goes, the draft, and how long each place lets it be. */
.sns-targets { display: flex; gap: 6px; padding: 8px; flex-wrap: wrap; }
.sns-target { font: inherit; font-size: 13px; padding: 7px 12px; border: 1px solid #d5dcd6; border-radius: 999px; background: #fff; }
.sns-target.on { background: #e6efe9; border-color: #2c6e49; }
.sns-draft { margin: 0 8px; font: inherit; font-size: 15px; padding: 10px; border: 1px solid #d5dcd6; border-radius: 8px; resize: none; }
.sns-counts { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; }
.sns-count { color: #889; }
.sns-count.over, .sns-problem { color: #b4453c; }
.sns-put { align-self: flex-start; margin: 0 12px; font: inherit; padding: 10px 16px; border: 1px solid #d5dcd6; border-radius: 8px; background: #e6efe9; }
.sns-note { padding: 12px; }
/* The log, as it is written. */
.logs-screen { flex: 1; margin: 0; padding: 10px 12px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* A page the desk fetched: drawn here, allowed nothing. */
.page-bar { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid #e3e8e4; }
.page-url { flex: 1; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid #d5dcd6; border-radius: 8px; }
.page-go, .page-outside { font: inherit; padding: 8px 12px; border: 1px solid #d5dcd6; border-radius: 8px; background: #e6efe9; }
.page-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.page-note { padding: 12px; }

/* A document of the desk, opened on the phone. */
.file-sheet { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #fff; }
.file-sheet-bar { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #e3e8e4; }
.file-sheet-bar .file-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-close { font: inherit; padding: 8px 12px; border: 1px solid #d5dcd6; border-radius: 8px; background: #fff; }
.file-sheet-body { flex: 1; overflow: auto; }
.file-frame { width: 100%; height: 100%; border: 0; }
.file-doc, .file-text { padding: 12px; }
.file-text { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.page-extras { display: flex; flex-wrap: nowrap; gap: 6px; padding: 8px; overflow-x: auto; flex: none; }
.page-media { flex: none; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; font-size: 13px; padding: 8px 12px; border: 1px solid #d5dcd6; border-radius: 8px; background: #e6efe9; }

/* A code block's icons, as on the desk — always shown here (a phone has no hover). */
/* The code block's icons: their own row under the block, right-aligned, never over its words. */
.message .code-actions { display: flex; justify-content: flex-end; gap: 4px; margin: 4px 0 8px; }
.message .code-actions button { font: inherit; font-size: 13px; line-height: 1; padding: 6px 8px; border: 1px solid #d5dcd6; border-radius: 6px; background: rgba(255, 255, 255, 0.92); }

/* セッション間: 表示／非表示 in a conversation's bar (screens.mjs renderBar). */
/* The title gives way (it already ends in …); the toggle and 直結 never wrap or squeeze. */
.bar-left { flex: 1 1 auto; }
.bar-right { flex: none; margin-left: 8px; }
.bar .via { white-space: nowrap; }
.bar .relay-toggle { font-size: 11px; padding: 4px 8px; border: 1px solid #d5dcd6; border-radius: 12px; background: #fff; color: #445; white-space: nowrap; }
.bar .relay-toggle.on { background: #e7f0e9; }
/* The band of sessions talking to each other (shared.css): on the phone the copy icons sit inside the
   row and the rows are closer, so the band reaches only 6px beyond a row and never over the next one. */
.message[class*="relay-"] { clip-path: inset(-6px -100vmax -6px); }
/* #659: an AI's messages waiting for the person (ui/remote/send-approvals.mjs). Opened by a tap only. */
.bar .send-holds { font-size: 12px; padding: 4px 10px; border: 1px solid #c9772b; border-radius: 12px; background: #fff4e8; color: #7a3d00; white-space: nowrap; }
.send-approval-sheet .sheet-body { padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0)); overflow-y: auto; }
.send-approval-sheet .confirm-maybe { color: #7a3d00; }
.send-approval-sheet .dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.send-approval-sheet .dialog-actions button { flex: 1 1 auto; min-height: 44px; padding: 10px; font: inherit; border: 1px solid #d5dcd6; border-radius: 8px; background: #fff; color: #244d35; }
/* #405: このアプリについて・ライセンス（desktop/ui/licenses-view.mjs の共通の絵） */
.about-open { display: block; margin: 16px 0 0; padding: 10px; font: inherit; border: 1px solid #d5dcd6; border-radius: 8px; background: #fff; color: #244d35; }
.about-sheet .sheet-body { padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0)); overflow-y: auto; }
.about-sheet .about-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 12px; }
.about-sheet .about-facts dd { margin: 0; }
.about-sheet .about-links { display: flex; flex-wrap: wrap; gap: 8px; }
.about-sheet button { min-height: 40px; padding: 8px 10px; font: inherit; border: 1px solid #d5dcd6; border-radius: 8px; background: #fff; color: #244d35; }
.about-sheet .licences-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.about-sheet .licences-head input[type=search] { flex: 1; min-width: 0; font: inherit; padding: 8px; }
.about-sheet .licences-list { list-style: none; margin: 0; padding: 0; }
.about-sheet .licences-list li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid #e3e8e4; }
.about-sheet .licences-item { border: 0; text-align: left; flex: 1; }
.about-sheet .licences-kind { color: #556; font-size: 12px; align-self: center; }
.about-sheet .licence-text, .sheet .terms-text { font-size: 12px; }
.about-sheet .about-copyright { color: #556; margin: 0 0 10px; }

/* One connection menu shared by Android and the Web entry. */
.connection-menu { position: relative; }
.connection-menu > summary { list-style: none; cursor: pointer; min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.connection-menu > summary::-webkit-details-marker { display: none; }
.connection-menu[open] { z-index: 100; }
.connection-menu-items > button { display: block; min-width: 8rem; min-height: 44px; width: 100%; }
.connection-menu-items { position: absolute; right: 0; top: 100%; padding: 4px; background: #fff; color: #223c2c; border: 1px solid #dfe5e1; border-radius: 8px; }

body { margin: 0; }
#cover { position: fixed; inset: 0; z-index: 10000; background: #f5f7f4; color: #242c27; padding: max(2rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); overflow: auto; box-sizing: border-box; }
.connect-page { max-width: 52rem; margin: 0 auto; font-family: system-ui, sans-serif; line-height: 1.6; }
.connect-header { margin-bottom: 1.75rem; }
.connect-brand { color: #456454; font-size: .875rem; font-weight: 700; letter-spacing: .08em; }
#cover h1 { font-size: clamp(1.65rem, 4vw, 2rem); margin: .25rem 0 .5rem; }
#cover p { margin: .5rem 0; }
.connect-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.connect-method { background: #fff; border: 1px solid #d4ded6; border-radius: 1rem; padding: 1.5rem; min-width: 0; box-shadow: 0 3px 12px #223a2b05; }
#cover h2 { font-size: 1.2rem; margin: 0 0 .75rem; }
.connect-method p { color: #536158; }
#cover label { display: block; font-size: .875rem; font-weight: 600; margin-top: 1rem; }
#cover textarea { display: block; width: 100%; min-height: 6rem; margin: .5rem 0 1rem; padding: .75rem; box-sizing: border-box; border: 1px solid #a4b5a9; border-radius: .5rem; background: #fafcf9; color: inherit; font: inherit; resize: vertical; }
#cover button { min-height: 44px; font: inherit; cursor: pointer; }
#cover button { border-radius: .5rem; padding: .65rem 1rem; }
#cover .connect-primary { display: block; width: 100%; margin-top: 1.25rem; border: 1px solid #285d42; background: #285d42; color: white; font-weight: 600; }
#cover button:disabled { cursor: wait; opacity: .55; }
#cover :is(button, textarea):focus-visible { outline: 3px solid #5d9977; outline-offset: 3px; }
.connect-message { padding: 1rem 0 .5rem; min-height: 1.6em; font-weight: 600; }
.connect-help { border-top: 1px solid #d4ded6; padding-top: 1rem; font-size: .875rem; color: #536158; }
#cover #resume { margin-top: .75rem; background: transparent; color: #285d42; border: 1px solid #a4b5a9; }
@media (max-width: 600px) { .connect-methods { grid-template-columns: 1fr; } .connect-method { padding: 1.25rem; } .connect-header { margin-bottom: 1.25rem; } }

.qr-scanner { position: fixed; inset: 0; z-index: 11000; padding: 1.5rem; background: #f8f6f1; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.qr-scanner video { width: min(100%, 640px); max-height: 60vh; object-fit: contain; background: #24221e; }
.qr-scanner button { min-height: 44px; min-width: 100px; }