/* faz1/chat.css · the one chat look of KSS, WhatsApp's (faz1/chat-kit.js). Every selector starts with .f1w-.
   Used by the iPhone (phone.css sets the host to 16 px) and the pano's Sohbet drawer (dashboard.css, 13 px); every size
   is in em. Colours are WhatsApp's own, light and dark. No blue control anywhere: blue is only the read ticks.
   Transitions: none. */
:root {
  --f1w-wall: #efeae2; --f1w-wall-ink: rgba(84, 101, 111, .07);
  --f1w-in: #ffffff; --f1w-out: #d9fdd3; --f1w-ink: #111b21; --f1w-meta: #667781;
  --f1w-bar: #f6f5f3; --f1w-panel: #ffffff; --f1w-line: #e9edef; --f1w-soft: #f0f2f5;
  --f1w-green: #25d366; --f1w-green-ink: #008069; --f1w-chip: #d9fdd3; --f1w-chip-ink: #15603e;
  --f1w-notice: #ffeecd; --f1w-notice-ink: #54656f; --f1w-tick: #53bdeb; --f1w-end: #ea0038;
  --f1w-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
:root[data-film-theme="dark"] {
  --f1w-wall: #0b141a; --f1w-wall-ink: rgba(233, 237, 239, .035);
  --f1w-in: #202c33; --f1w-out: #005c4b; --f1w-ink: #e9edef; --f1w-meta: #8696a0;
  --f1w-bar: #1f2c34; --f1w-panel: #111b21; --f1w-line: #26343d; --f1w-soft: #202c33;
  --f1w-green: #00a884; --f1w-green-ink: #00a884; --f1w-chip: #0a332c; --f1w-chip-ink: #e9edef;
  --f1w-notice: #182229; --f1w-notice-ink: #ffd279; --f1w-shadow: 0 1px .5px rgba(0, 0, 0, .3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-film-theme]) {
    --f1w-wall: #0b141a; --f1w-wall-ink: rgba(233, 237, 239, .035);
    --f1w-in: #202c33; --f1w-out: #005c4b; --f1w-ink: #e9edef; --f1w-meta: #8696a0;
    --f1w-bar: #1f2c34; --f1w-panel: #111b21; --f1w-line: #26343d; --f1w-soft: #202c33;
    --f1w-green: #00a884; --f1w-green-ink: #00a884; --f1w-chip: #0a332c; --f1w-chip-ink: #e9edef;
    --f1w-notice: #182229; --f1w-notice-ink: #ffd279; --f1w-shadow: 0 1px .5px rgba(0, 0, 0, .3);
  }
}

/* icons */
.f1w-i { width: 1.5em; height: 1.5em; flex: none; display: inline-block; vertical-align: middle; }
.f1w-ico-s { width: 1.05em; height: 1.05em; margin-top: -.15em; color: var(--f1w-meta); }
.f1w-tk { width: 1.1em; height: .75em; flex: none; color: var(--f1w-meta); vertical-align: -.02em; }
.f1w-tk-read { color: var(--f1w-tick); }

/* avatars */
.f1w-av { --f1w-av: 3.25em; width: var(--f1w-av); height: var(--f1w-av); flex: none; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 1em; font-weight: 650; color: #fff; letter-spacing: .01em; overflow: hidden; }
.f1w-av { font-size: calc(var(--f1w-av) * .36); }
.f1w-av-ai { background: linear-gradient(150deg, #1d9f5f, #0b6b52); color: #fff; }
.f1w-av-ai .f1w-i { width: 58%; height: 58%; }

/* chat list rows */
.f1w-row { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: .75em; padding: .55em 1em; color: var(--f1w-ink); }
.f1w-row + .f1w-row .f1w-row-main { border-top: 1px solid var(--f1w-line); }
.f1w-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15em; padding: .55em 0; margin: -.55em 0; }
.f1w-row-top, .f1w-row-bot { display: flex; align-items: center; gap: .5em; min-width: 0; }
.f1w-row-name { flex: 1; min-width: 0; font-size: 1.04em; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.f1w-row-time { flex: none; font-size: .8em; color: var(--f1w-meta); font-variant-numeric: tabular-nums; }
.f1w-row-time.f1w-unread { color: var(--f1w-green); font-weight: 600; }
.f1w-row-prev { flex: 1; min-width: 0; font-size: .92em; color: var(--f1w-meta); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.f1w-badge { flex: none; min-width: 1.45em; height: 1.45em; padding: 0 .4em; box-sizing: border-box; border-radius: 999px; background: var(--f1w-green); color: #fff;
  font-size: .78em; font-weight: 700; display: inline-grid; place-items: center; }
:root[data-film-theme="dark"] .f1w-badge { color: #111b21; }
.f1w-pin { width: 1.05em; height: 1.05em; color: var(--f1w-meta); }
.f1w-row-on { background: var(--f1w-soft); }

/* the conversation */
.f1w-wall { background-color: var(--f1w-wall);
  background-image: radial-gradient(circle at 20% 30%, var(--f1w-wall-ink) 0 1.6px, transparent 2.4px), radial-gradient(circle at 70% 75%, var(--f1w-wall-ink) 0 2.2px, transparent 3px),
    radial-gradient(circle at 80% 20%, var(--f1w-wall-ink) 0 1.2px, transparent 2px);
  background-size: 46px 46px, 58px 58px, 38px 38px; }
.f1w-thread { display: flex; flex-direction: column; gap: .2em; padding: .6em .7em .8em; }
.f1w-day, .f1w-notice { align-self: center; margin: .45em 0 .3em; }
.f1w-day span { display: inline-block; padding: .3em .75em; border-radius: .55em; background: var(--f1w-in); color: var(--f1w-meta); font-size: .78em; font-weight: 500; box-shadow: var(--f1w-shadow); }
.f1w-notice { max-width: 88%; display: flex; gap: .45em; align-items: flex-start; padding: .5em .8em; border-radius: .55em; background: var(--f1w-notice); color: var(--f1w-notice-ink);
  font-size: .8em; line-height: 1.35; text-align: center; box-shadow: var(--f1w-shadow); }
.f1w-notice .f1w-ico-s { color: inherit; margin-top: .05em; }
.f1w-msg { display: flex; position: relative; }
.f1w-tail { margin-top: .45em; }
.f1w-in { justify-content: flex-start; }
.f1w-out { justify-content: flex-end; }
.f1w-bub { position: relative; max-width: 80%; box-sizing: border-box; padding: .38em .55em .3em; border-radius: .5em; box-shadow: var(--f1w-shadow); color: var(--f1w-ink);
  font-size: 1em; line-height: 1.32; overflow-wrap: anywhere; }
.f1w-in .f1w-bub { background: var(--f1w-in); }
.f1w-out .f1w-bub { background: var(--f1w-out); }
.f1w-in.f1w-tail .f1w-bub { border-top-left-radius: 0; }
.f1w-out.f1w-tail .f1w-bub { border-top-right-radius: 0; }
.f1w-in.f1w-tail .f1w-bub::before, .f1w-out.f1w-tail .f1w-bub::before { content: ""; position: absolute; top: 0; width: .55em; height: .7em; }
.f1w-in.f1w-tail .f1w-bub::before { left: -.5em; background: var(--f1w-in); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.f1w-out.f1w-tail .f1w-bub::before { right: -.5em; background: var(--f1w-out); clip-path: polygon(0 0, 100% 0, 0 100%); }
.f1w-from { display: block; font-size: .84em; font-weight: 650; margin-bottom: .1em; }
.f1w-text { white-space: pre-wrap; }
.f1w-meta { float: right; display: inline-flex; align-items: center; gap: .25em; margin: .45em 0 -.2em .7em; font-size: .7em; color: var(--f1w-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.f1w-msg.f1-cue .f1w-bub, .f1w-row.f1-cue, .f1w-notice.f1-cue { outline: 2.5px solid var(--f1w-green); outline-offset: 2px; }
.f1w-typing { display: inline-flex; gap: .3em; align-items: center; padding: .7em .8em; }
.f1w-typing i { width: .45em; height: .45em; border-radius: 50%; background: var(--f1w-meta); opacity: .55; }
.f1w-typing i:nth-child(2) { opacity: .8; }

/* voice note (with the KSS transcript under it) */
.f1w-b-voice { min-width: 15em; }
.f1w-voice { display: flex; align-items: center; gap: .55em; }
.f1w-play { width: 1.6em; height: 1.6em; display: grid; place-items: center; color: var(--f1w-meta); }
.f1w-play .f1w-i { width: 1.4em; height: 1.4em; }
.f1w-wave { flex: 1; height: 1.7em; display: flex; align-items: center; gap: 2px; }
.f1w-wave i { flex: 1; min-width: 1.5px; border-radius: 1px; background: var(--f1w-meta); opacity: .55; }
.f1w-out .f1w-wave i { background: #4a8a68; opacity: .7; }
.f1w-voice-foot { display: flex; justify-content: space-between; align-items: center; padding-left: 3.4em; font-size: .78em; color: var(--f1w-meta); }
.f1w-voice-foot .f1w-meta { float: none; margin: 0; font-size: 1em; }
.f1w-transcript { display: block; margin-top: .35em; padding-top: .35em; border-top: 1px solid color-mix(in srgb, var(--f1w-meta) 25%, transparent); font-size: .86em; font-style: italic; color: var(--f1w-ink); opacity: .85; }

/* photo, file, call */
.f1w-b-photo { padding: .2em; }
.f1w-photo { display: block; width: 14em; height: 11em; border-radius: .4em; overflow: hidden; background: var(--kagit, #fbfaf6); position: relative; }
.f1w-b-photo .f1w-text { display: block; padding: .3em .35em 0; }
.f1w-b-photo .f1w-meta { margin-right: .3em; }
.f1w-meta-on { position: absolute; right: .55em; bottom: .5em; float: none; margin: 0; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.f1w-meta-on .f1w-tk { color: #fff; }
.f1w-file { display: flex; align-items: center; gap: .6em; padding: .45em .5em; margin: .05em -.2em .1em; border-radius: .4em; background: color-mix(in srgb, var(--f1w-meta) 10%, transparent); min-width: 14em; }
.f1w-file-ico { flex: none; width: 2.2em; height: 2.6em; border-radius: .25em; background: #e5484d; color: #fff; display: grid; place-items: end center; padding-bottom: .3em; box-sizing: border-box; font-size: .72em; font-weight: 700; }
.f1w-file-t { display: flex; flex-direction: column; min-width: 0; }
.f1w-file-t b { font-weight: 600; font-size: .95em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f1w-file-t small, .f1w-call small { font-size: .78em; color: var(--f1w-meta); }
.f1w-call { display: flex; align-items: center; gap: .6em; min-width: 11em; padding: .1em 0; }
.f1w-call > span:last-child { display: flex; flex-direction: column; }
.f1w-call-ico { width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--f1w-meta) 16%, transparent); color: var(--f1w-ink); }
.f1w-call-ico .f1w-i { width: 1.2em; height: 1.2em; }

/* a KSS card inside a message (WhatsApp's interactive message: header, body, footer, reply buttons) */
.f1w-b-card { width: 80%; max-width: 19em; padding: .25em .25em .3em; }
.f1w-card { display: flex; flex-direction: column; gap: .25em; padding: .55em .6em .5em; border-radius: .4em; background: color-mix(in srgb, var(--f1w-green-ink) 7%, var(--f1w-in)); }
.f1w-card-k { display: flex; align-items: center; gap: .35em; font-size: .74em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--f1w-green-ink); }
.f1w-card-k .f1w-i { width: 1.25em; height: 1.25em; }
.f1w-card-t { font-weight: 650; font-size: 1em; line-height: 1.25; }
.f1w-card-h { font-size: .9em; }
.f1w-card-c { font-size: .82em; color: var(--f1w-meta); }
.f1w-card-checks { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .15em; }
.f1w-card-checks span { font-size: .76em; font-weight: 600; padding: .12em .5em; border-radius: 999px; background: var(--f1w-in); border: 1px solid var(--f1w-line); }
.f1w-card-checks i { font-style: normal; color: var(--st-ok, #2a9d6f); margin-right: .2em; }
.f1w-card-done { font-size: .84em; font-weight: 650; color: var(--f1w-green-ink); }
.f1w-b-card .f1w-meta { margin-right: .3em; }
.f1w-cbtns { display: flex; flex-direction: column; clear: both; margin: .35em -.25em -.3em; border-top: 1px solid var(--f1w-line); }
.f1w-cbtn { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: .6em .5em; font-size: .95em; font-weight: 600; color: var(--f1w-green-ink); }
.f1w-cbtn + .f1w-cbtn { border-top: 1px solid var(--f1w-line); }
.f1w-cbtn.f1-cue { outline: 2.5px solid var(--f1w-green); outline-offset: -3px; border-radius: .4em; }

/* "#f1-app button { font: inherit; color: inherit }" outranks class selectors; the chat restates its button text */
.f1w-row { color: var(--f1w-ink) !important; font-size: 1em !important; }
.f1w-cbtn { color: var(--f1w-green-ink) !important; font-size: .95em !important; font-weight: 600 !important; }