/* chikutik Chat (web/chat/): the project chats alone, for a phone's Home Screen. Theme tokens only. */
/* the light values of the app's tokens this page uses and ck.css does not carry (same numbers as app.css :root; a chosen theme overrides them) */
:root { --on-gold: #000000; --ft-green: #1E7F45; --ft-blue: #2458C6; --ft-amber: #A35F00; --ft-red: #B42318; --ft-violet: #7A3DB8;
  --duck: #FFD23F; --duck-bill: #F28C1B; --duck-ink: #3B2A05;
  --note-yellow: #FFF1A8; --note-green: #CDEFC9; --note-blue: #CFE3FF; --note-pink: #FFD3DC; --note-violet: #E4D5FF; }
html, body.ca { height: 100%; margin: 0; overscroll-behavior: none; }
body.ca { display: flex; flex-direction: column; background: var(--paper); }
.ca-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ca-view[hidden] { display: none; }
/* a narrow screen shows one of the two; from 700 px they sit side by side (below) */
.ca[data-view="chat"] #v-list, .ca[data-view="list"] #v-chat { display: none; }
.ca-top { flex: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: calc(6px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 6px max(14px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: var(--paper); }
.ca-top h1 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.ca-top .sp { flex: 1; }
.ca-link { font-size: 13.5px; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.ca-back { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; color: var(--ink); border-radius: 50%; }
.ca-back:active { background: var(--wash); }
.ca-title { display: grid; min-width: 0; line-height: 1.25; }
.ca-title b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-title small { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-note { margin: 0; padding: 22px 18px; color: var(--mute); font-size: 14.5px; line-height: 1.5; }
.ca-list { flex: 1; min-height: 0; overflow: auto; list-style: none; margin: 0; padding: 0 0 env(safe-area-inset-bottom); width: 100%; max-width: 760px; align-self: center; }
.ca-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ca-row:active, .ca-row:hover { background: var(--wash); }
.ca-ava { font-style: normal; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--ink); color: var(--on-ink); font-size: 15px; font-weight: 600; }
.ca-mid { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ca-nm { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ca-nm b { flex: 0 1 auto; min-width: 3ch; font-size: 15.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-nm small { flex: 0 10000 auto; min-width: 0; font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-last { font-size: 13.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-last em { font-style: normal; }
.ca-last b { font-weight: 500; }
.ca-row.unread .ca-nm b { font-weight: 700; }
.ca-row.unread .ca-last { color: var(--ink); }
.ca-row.on { background: var(--wash); box-shadow: inset 3px 0 0 var(--gold); }
.ca-find { flex: none; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.ca-find[hidden] { display: none; }
.ca-find input { width: 100%; box-sizing: border-box; margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--wash); color: var(--ink); font: inherit; font-size: 15px; }
.ca-none { display: none; }
.ca-end { flex: none; display: grid; justify-items: end; gap: 4px; }
.ca-end time { font-size: 11.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.ca-n { min-width: 22px; padding: 0 6px; border-radius: 11px; background: var(--gold); color: var(--on-gold); font-size: 12px; font-weight: 600; line-height: 22px; text-align: center; }
.ca-install { flex: none; margin: 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--wash); font-size: 13.5px; }
.ca-install summary { cursor: pointer; font-weight: 600; }
.ca-install p { margin: 8px 0 0; color: var(--mute); line-height: 1.5; }
.ca-body { flex: 1; min-height: 0; display: flex; }
.ca-host { flex: 1; min-width: 0; min-height: 0; display: flex; }
.ca-ib { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--mute); cursor: pointer; }
.ca-ib[hidden] { display: none; }
.ca-ib:hover, .ca-ib:focus-visible { background: var(--wash); color: var(--ink); }
.ca-ib.on { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--gold); }
.ca-desk { flex: none; margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--wash); font-size: 13.5px; }
.ca-desk[hidden] { display: none; }
.ca-desk b { font-size: 14px; }
.ca-desk p { margin: 4px 0 10px; color: var(--mute); line-height: 1.45; }
.ca-deskact { display: flex; gap: 8px; }
.ca-people { display: none; }
.ca .ca-host .chat { flex: 1; height: auto; min-height: 0; margin: 0; border: 0; padding-bottom: env(safe-area-inset-bottom); }
/* what the app's stylesheet gives the room dialog there */
.ca dialog { max-width: min(92vw, 460px); width: 100%; padding: 18px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); }
.ca dialog::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.ca .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ca .modal-head h2 { margin: 0; font-size: 18px; }
.ca .icon-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.ca .icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ca dialog label { display: grid; gap: 4px; margin: 0 0 12px; font-size: 13px; color: var(--mute); }
.ca dialog label > input:not([type="checkbox"]) { padding: 9px 0; border: 0; border-bottom: 1.5px solid var(--faint); background: none; color: var(--ink); font: inherit; font-size: 16px; }
.ca .row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ca .row-actions .spacer { flex: 1; }
.ca .chat-modl label { display: flex; color: var(--ink); }
.ca-sure p { margin: 0 0 16px; font-size: 15px; line-height: 1.5; }
.ca-lb { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 88%, transparent); cursor: zoom-out; }
.ca-lb img { max-width: 100vw; max-height: 100dvh; object-fit: contain; }
.ca .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }

/* iOS zooms the page into any box with letters under 16 px and does not zoom back (the app has this rule in mobile.css; this page does not load it) */
@media (max-width: 760px) { .ca input, .ca select, .ca textarea { font-size: 16px !important; } }
/* a wide screen (an unfolded phone, a tablet, a computer): the list on the left, the chat beside it */
@media (min-width: 700px) {
  body.ca { flex-direction: row; }
  .ca[data-view] #v-list { display: flex; flex: none; width: clamp(260px, 34vw, 360px); border-right: 1px solid var(--line); }
  .ca[data-view] #v-chat { display: flex; min-width: 0; }
  .ca #v-list[hidden], .ca #v-chat[hidden] { display: none; }
  .ca-list { max-width: none; }
  .ca-back { display: none; }
  #v-chat .ca-top { padding-left: 18px; }
  .ca[data-view="list"] #v-chat .ca-top, .ca[data-view="list"] #c-host { display: none; }
  .ca[data-view="list"] .ca-none { flex: 1; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 24px; text-align: center; color: var(--mute); }
  .ca-none b { font-size: 18px; color: var(--ink); }
  .ca-none p { margin: 0; font-size: 14.5px; }
}
/* between 700 and 1100 px the chat's own room column would leave too little for the messages: rooms go on top as a strip
   (the same shape chat.css gives phones under 820 px) */
@media (min-width: 821px) and (max-width: 1099px) {
  .ca .chat { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .ca .chat-rooms { border-right: 0; border-bottom: 1px solid var(--line); min-width: 0; }
  .ca .chat-rl li { flex: none; }
  /* the + (new room, or propose one) stays at the start of the strip; hidden with the heading until 4 Oct 2026, so a phone had no way to add a room */
  .ca .chat-rooms { flex-direction: row; align-items: center; }
  .ca .chat-rooms-h { flex: none; padding: 0; }
  .ca .chat-rooms-h span { display: none; }
  .ca .chat-rooms-h .chat-ib { width: 34px; height: 34px; margin-left: 10px; border: 1px dashed var(--ink); border-radius: 999px; background: var(--paper); }
  .ca .chat-rl { flex: 1; min-width: 0; }
  .ca .chat-askf form { display: flex; gap: 6px; } .ca .chat-askf input { width: 150px; min-width: 0; }
  .ca .chat-rl { display: flex; gap: 4px; padding: 6px 10px; overflow-x: auto; }
  .ca .chat-room { padding: 6px 10px; white-space: nowrap; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; font-size: 14px; }
  .ca .chat-room.on { box-shadow: none; border-color: var(--ink); }
  .ca .chat-ib.sm { opacity: 1; }
  .ca .chat-hset { display: grid; } .ca .chat-rl li > .chat-ib.sm[data-c="roomedit"] { display: none; }
}

/* who is online and who is not: the strip on the list, the number on a project, the groups beside the chat or on a sheet */
.ca-on { flex: none; border-bottom: 1px solid var(--line); background: var(--wash); }
.ca-on[hidden] { display: none; }
.ca-onb { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 16px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ca-onb:hover, .ca-onb:focus-visible { background: color-mix(in srgb, var(--ink) 5%, var(--wash)); }
.ca-onh { flex: none; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.ca-onh small, .ca-onall small { font-weight: 400; letter-spacing: 0; }
.ca-ocs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; overflow: hidden; white-space: nowrap; }
.ca-ocs em { font-style: normal; font-size: 13px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; }
.ca-oc { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ca-oc b { font-weight: 500; }
.ca-oc i, .ca-pl i { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-style: normal; font-size: 11.5px; font-weight: 600; }
.ca-oc i { width: 26px; height: 26px; font-size: 10.5px; }
.ca-oc i::after, .ca-pl li i::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--wash); background: var(--ft-green); }
.ca-oc.away i::after, .ca-pl li.away i::after { background: var(--ft-amber); }
.ca-pl li.off i::after { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--mute); }
.ca-more { flex: none; font-size: 12.5px; color: var(--mute); }
.ca-onall { flex: none; font-size: 13px; color: var(--ink-2, var(--ink)); text-decoration: underline; text-underline-offset: 3px; }
.ca-pon { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ft-green); font-weight: 600; }
.ca-pon::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ft-green); }
.ca-ib { position: relative; }
.ca-ibn { position: absolute; right: -2px; top: -2px; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--ft-green); color: var(--paper); font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; }
.ca-pg { margin: 12px 6px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.ca-pg small { font-weight: 400; letter-spacing: 0; }
.ca-pl { list-style: none; margin: 0; padding: 0; }
.ca-pl li { display: flex; align-items: center; gap: 9px; padding: 6px; }
.ca-pl li.off { opacity: .6; }
.ca-pl span { display: grid; min-width: 0; line-height: 1.25; }
.ca-pl b { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-pl small { font-size: 11.5px; color: var(--mute); }
.ca-ocs.many .ca-oc b { display: none; }
.ca-ocs.many .ca-oc { margin-right: -2px; }
.ca-pl li > span { flex: 1 1 auto; }
.ca-ago { flex: none; margin-left: 6px; font-size: 11.5px; color: var(--mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ca-pq { display: block; width: calc(100% - 12px); margin: 8px 6px 2px; box-sizing: border-box; font: inherit; font-size: 13.5px; padding: 7px 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 0; }
.ca-pq[hidden] { display: none; }
.ca-pq:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
.ca-pmore { all: unset; cursor: pointer; display: block; margin: 2px 6px 8px; padding: 6px 0; font-size: 12.5px; color: var(--ink-2, var(--mute)); text-decoration: underline; text-underline-offset: 2px; }
.ca-pmore:focus-visible { outline: 2px solid var(--gold); }
.ca-sh-h h2 small { font-weight: 400; font-size: 13px; color: var(--mute); }
.ca-sh-b .ca-pg { position: sticky; top: 0; z-index: 1; margin: 0; padding: 12px 6px 4px; background: var(--paper); }
.ca-sh-b .ca-pq { position: sticky; top: 0; z-index: 2; }
.ca-sh-b .ca-pq:not([hidden]) ~ .ca-pb .ca-pg { top: 42px; }
.ca-pnote { margin: 8px 6px; font-size: 13px; color: var(--mute); line-height: 1.45; }
.ca-sheet { width: min(420px, 100vw); max-width: 100vw; max-height: min(86vh, 760px); max-height: min(86dvh, 760px); margin: auto auto 0; padding: 0; border: 1px solid var(--line); border-bottom: 0; background: var(--paper); color: var(--ink); overflow: hidden; }
.ca-sheet[open] { display: flex; flex-direction: column; }
.ca-sheet::backdrop { background: color-mix(in srgb, var(--ink) 35%, transparent); }
.ca-sh-h { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 16px; border-bottom: 1px solid var(--line); }
.ca-sh-h h2 { flex: 1; margin: 0; font-size: 16px; }
/* `flex: 1 1 auto`, never `flex: 1`: the sheet has no height of its own, and Safari reads a 0% basis there as zero, so the list
   collapsed to its padding and the sheet was a strip at the bottom of an iPhone (owner's screenshot, 5 Oct 2026) */
.ca-sh-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 10px calc(14px + env(safe-area-inset-bottom)); }
.ca-sh-b .ca-pl i::after { border-color: var(--paper); }
@media (min-width: 700px) { .ca-sheet { margin: auto; border-bottom: 1px solid var(--line); } }
@media (max-width: 520px) { .ca-onh { display: none; } .ca-onb { gap: 10px; } }
/* beside the chat on a wide window */
@media (min-width: 1240px) {
  .ca-people { display: block; flex: none; width: 250px; overflow: auto; padding: 12px 10px; border-left: 1px solid var(--line); background: var(--wash); }
  .ca-people[hidden] { display: none; }
  .ca-people h2 { margin: 2px 6px 0; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
  .ca-people h2 small { font-weight: 400; letter-spacing: 0; text-transform: none; }
}


/* japri: private conversations above the projects, a round face with where the person stands, and a way to start one from the people list */
.ca-sec { padding: 12px 16px 5px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--line); }
/* a person is a dark round face, a project a light square with a line: told apart at a glance, and a list of projects is no longer a column of black */
.ca-row:not(.dm) .ca-ava { background: var(--wash); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.ca-row:not(.dm):hover .ca-ava, .ca-row:not(.dm).on .ca-ava { background: var(--paper); }
.ca-row.unread:not(.dm) .ca-ava { box-shadow: inset 0 0 0 1.5px var(--ink); }
.ca-last:empty { display: none; }
/* chats nobody has written in yet: one short line each, under their own heading */
.ca-row.quiet { padding-top: 8px; padding-bottom: 8px; }
.ca-row.quiet .ca-ava { width: 32px; height: 32px; margin: 0 6px; border-radius: 8px; font-size: 12px; }
.ca-row.quiet .ca-nm b { font-weight: 500; }
.ca-row.dm .ca-ava { position: relative; border-radius: 50%; }
.ca-row.dm .ca-ava::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--paper); background: var(--ft-green); }
.ca-row.dm .ca-ava.away::after { background: var(--ft-amber); }
.ca-row.dm .ca-ava.off::after { display: none; }
.ca-row.dm:hover .ca-ava::after, .ca-row.dm.on .ca-ava::after { border-color: var(--wash); }
.ca-pm { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-left: 4px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; }
.ca-pm:hover, .ca-pm:focus-visible { border-color: var(--ink); }
.ca-pm svg { width: 17px; height: 17px; }
.ca-pl li.off .ca-pm { opacity: 1; }
.ca-pl li.off { opacity: 1; } .ca-pl li.off > i, .ca-pl li.off > span, .ca-pl li.off > .ca-ago { opacity: .6; }
.ca .chat.dm .chat-head h3 { display: none; } /* the page's own header already names the person */