/* ============================================================
   Artemis AI
   Everything is scoped under .artemis-stage so the host theme is
   untouched, and theme rules never leak in.

   Colour lives entirely in tokens. Light and dark differ only in
   the token block — no component below knows which theme it is in.
============================================================ */

.artemis-stage{
  /* ---- light (default) ---- */
  --a-bg:        #F5FAF9;
  --a-bg-2:      #EDF4F3;   /* the rail column */
  --a-surface:   #FFFFFF;
  --a-raised:    #E9F3F1;

  --a-ink:       #0B1618;
  --a-ink-2:     #3E514F;
  --a-ink-3:     #7A8E8B;

  --a-line:      rgba(11,22,24,0.09);
  --a-line-2:    rgba(11,22,24,0.16);

  --a-accent:    #0E9384;
  --a-accent-2:  rgba(14,147,132,0.10);
  --a-warn:      #B45309;

  --a-shadow:    rgba(22,24,27,0.10);
  --a-shadow-2:  rgba(22,24,27,0.28);

  --a-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --a-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --a-display: 'Syne', 'Instrument Sans', system-ui, sans-serif;

  --a-rail: 0px;   /* desktop side rail width, set in the desktop query */

  /* A persona may multiply every tone-carrying corner at once. 1 is the
     house shape; round reads as gentle, square as serious. */
  --a-radius-scale: 1;

  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--artemis-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  background: var(--a-bg);
  color: var(--a-ink);
  font-family: var(--a-sans);
  transition: background-color .45s ease, color .45s ease;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;

  /* The host theme may be RTL. Layout is authored LTR; text direction is set
     per message from its own content, so both languages read correctly
     without the furniture mirroring. */
  direction: ltr;
}

/* ---- dark ---- */
.artemis-stage.theme-dark{
  --a-bg:        #050A0B;
  --a-bg-2:      #070E10;
  --a-surface:   #0A1416;
  --a-raised:    #0F1D1F;

  --a-ink:       #E7F5F3;
  --a-ink-2:     #A2BAB7;
  --a-ink-3:     #66817E;

  --a-line:      rgba(46,230,206,0.13);
  --a-line-2:    rgba(46,230,206,0.28);

  --a-accent:    #2EE6CE;
  --a-accent-2:  rgba(46,230,206,0.12);
  --a-warn:      #E0A050;

  --a-shadow:    rgba(0,0,0,0.55);
  --a-shadow-2:  rgba(0,0,0,0.85);

  color-scheme: dark;
}

.artemis-stage *,
.artemis-stage *::before,
.artemis-stage *::after{ box-sizing: border-box; }
.artemis-stage [hidden]{ display: none !important; }

/*
 * :where() so the reset carries no weight of its own.
 *
 * Written as `.artemis-stage button` this outranked every component class
 * below it — .artemis-send, .artemis-tool, .artemis-dock-btn — and quietly
 * stripped their background, border and padding back out again. It still
 * beats a host theme's bare `button {}`, which is the only thing it was ever
 * meant to beat.
 */
.artemis-stage :where(button){
  font-family: inherit; background: none; border: none; color: inherit;
  cursor: pointer; margin: 0; padding: 0; box-shadow: none; text-transform: none;
}
/* min-height and height are here because a host theme almost always sets a
   min-height on textarea for its comment form, and inherited into a one-line
   composer that turns the field into a block several hundred pixels tall. */
.artemis-stage textarea,
.artemis-stage input[type="text"]{
  font-family: inherit; background: none; border: none; box-shadow: none;
  outline: none; color: var(--a-ink); margin: 0; padding: 0; border-radius: 0;
  min-height: 0; height: auto; width: auto;
}
.artemis-stage textarea:focus,
.artemis-stage input[type="text"]:focus{ outline: none; box-shadow: none; }

.artemis-stage button:focus-visible,
.artemis-stage a:focus-visible{
  outline: 2px solid var(--a-accent);
  outline-offset: 2px;
  border-radius: 8px;
}
.artemis-stage ::selection{ background: var(--a-accent-2); }

/* ============================ boot ============================ */
.artemis-boot{
  position: absolute; inset: 0; z-index: 90; background: var(--a-bg);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.artemis-boot pre{
  font-family: var(--a-mono); color: var(--a-ink-3);
  font-size: 12px; line-height: 2; white-space: pre-wrap; margin: 0;
  background: none; border: none; padding: 0;
}
.artemis-boot.is-hidden{ animation: a-fade-out .5s ease forwards; pointer-events: none; }
@keyframes a-fade-out{ to{ opacity: 0; visibility: hidden; } }

/* ============================ top bar ============================ */
.artemis-topbar{
  position: relative; z-index: 30; flex-shrink: 0;
  display: flex; align-items: center;
  gap: clamp(8px, 2vw, 16px);
  padding: 14px clamp(12px, 3vw, 26px);
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.artemis-stage:not(.is-empty) .artemis-topbar{
  border-bottom-color: var(--a-line);
  /* Opaque, not blurred: a backdrop-filter here recomposites the whole strip
     on every frame the core draws. */
  background: var(--a-bg);
}

/* The brand sits between the menu key and the tools, and takes the slack so
   the two icon clusters stay pinned to the edges. */
.artemis-brand{
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
}
.artemis-brand-name{
  font-size: 12.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  white-space: nowrap; color: var(--a-ink);
}
/* The state now reads as a sentence in the canvas, so the pill is retired.
   The node stays for anything still reading it. */
.artemis-state{ display: none; }

/* The pulse animates transform and opacity only. Animating box-shadow forces
   a repaint every frame, which is what made this stutter beside the animated
   core — especially in dark mode, where the blur behind it cost more. */
.artemis-dot{
  position: relative; flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%; background: var(--a-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--a-accent) 70%, transparent);
}
.artemis-dot::after{
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--a-accent);
  animation: a-pulse 2.4s ease-out infinite;
  will-change: transform, opacity;
}
@keyframes a-pulse{
  0%{ transform: scale(1); opacity: .45; }
  70%{ transform: scale(3.4); opacity: 0; }
  100%{ transform: scale(3.4); opacity: 0; }
}

.artemis-tools{ display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

/* Borderless icon keys. A boxed control in a corner reads as chrome; these
   read as part of the surface until you reach for one. */
.artemis-tool{
  position: relative;
  width: 38px; height: 38px; border-radius: 12px;
  border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--a-ink-3); transition: color .2s ease, background .2s ease;
}
.artemis-tool svg{ width: 18px; height: 18px; }
.artemis-tool:hover{ background: var(--a-raised); color: var(--a-ink); }
.artemis-tool.is-active{ color: var(--a-accent); }
.artemis-tool.is-degraded{ color: var(--a-warn); }
.artemis-tool[disabled]{ opacity: .35; cursor: not-allowed; }

.artemis-menu{ margin-inline-start: -6px; }

/* the sun/moon swap inside the theme button */
.artemis-tool .a-moon{ display: none; }
.theme-dark .artemis-tool .a-moon{ display: block; }
.theme-dark .artemis-tool .a-sun{ display: none; }

.artemis-membadge{
  position: absolute; top: 2px; inset-inline-end: 2px;
  min-width: 15px; height: 15px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--a-accent); color: #04211E;
  font-family: var(--a-mono); font-size: 9px; line-height: 1;
}

/* Furniture that belongs to the wide layout only. It is in the markup at
   every width so the same nodes can be placed rather than duplicated, but a
   phone has no room for any of it and says the same things elsewhere. */
.artemis-brandmark,
.artemis-statuschip,
.artemis-strapline,
.artemis-inputmeter{ display: none; }

/* ============================ canvas ============================ */
.artemis-canvas{
  position: relative; z-index: 10;
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 clamp(14px, 3vw, 30px);
}
.artemis-canvas::-webkit-scrollbar{ width: 6px; }
.artemis-canvas::-webkit-scrollbar-thumb{ background: var(--a-line-2); border-radius: 6px; }
.artemis-canvas::-webkit-scrollbar-track{ background: transparent; }

.artemis-orb{
  position: relative; pointer-events: auto; overflow: visible;
  width: min(58vw, 330px); height: min(58vw, 330px);
  transition: width .55s cubic-bezier(.3,.9,.3,1), height .55s cubic-bezier(.3,.9,.3,1);
}
.artemis-stage:not(.is-empty) .artemis-orb{ width: 80px; height: 80px; }
.artemis-orb canvas{
  position: absolute; inset: 0; display: block;
  width: 100% !important; height: 100% !important;
}

/* ---------- greeting ---------- */
.artemis-greeting{
  text-align: center; max-width: 520px;
  margin: clamp(10px, 2.5vh, 26px) auto 0;
  transition: opacity .35s ease, transform .35s ease;
}
.artemis-greeting h2{
  font-family: var(--a-display);
  font-size: clamp(2rem, 7vw, 2.9rem); font-weight: 500; letter-spacing: -.015em;
  line-height: 1.15; color: var(--a-ink);
  margin: 0 0 12px;
  animation: a-rise .7s cubic-bezier(.2,.8,.2,1) both;
}
.artemis-greeting p{
  margin: 0; color: var(--a-ink-3); font-size: 14px; line-height: 1.7;
  animation: a-rise .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: .08s;
}
.artemis-stage:not(.is-empty) .artemis-greeting{
  opacity: 0; transform: translateY(-8px); height: 0; margin: 0;
  overflow: hidden; pointer-events: none;
}
@keyframes a-rise{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: none; }
}

/* ---------- the rule under the greeting ----------
   A hairline that fades in from both edges to a lit facet in the middle.
   It is the same mark as the core, small enough to read as punctuation. */
.artemis-rule{
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: min(330px, 78%); margin: clamp(14px, 3vh, 26px) auto 0;
  animation: a-rise .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: .14s;
}
.artemis-rule::before,
.artemis-rule::after{
  content: ""; flex: 1; height: 1px;
}
.artemis-rule::before{ background: linear-gradient(90deg, transparent, var(--a-line-2)); }
.artemis-rule::after{ background: linear-gradient(270deg, transparent, var(--a-line-2)); }
.artemis-rule svg{
  width: 20px; height: 20px; flex-shrink: 0; color: var(--a-accent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--a-accent) 55%, transparent));
}
.artemis-stage:not(.is-empty) .artemis-rule{ display: none; }

/* ---------- opening suggestions ----------
   Three ways in, for the visitor who has not decided what to ask yet. They
   fill the field rather than sending, because the useful version of any of
   them ends with something only the person can supply. */
.artemis-suggestions{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 2vw, 14px);
  width: 100%; max-width: 560px;
  margin: clamp(16px, 3.5vh, 30px) auto 0;
}
.artemis-stage:not(.is-empty) .artemis-suggestions{ display: none; }

.artemis-suggestion{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 104px;
  padding: 16px 8px;
  border: 1px solid color-mix(in srgb, var(--a-accent) 18%, transparent);
  border-radius: calc(16px * var(--a-radius-scale));
  background: var(--a-surface);
  color: var(--a-ink-2);
  text-align: center;
  animation: a-rise .7s cubic-bezier(.2,.8,.2,1) both;
  transition: border-color .22s ease, transform .22s ease,
              background .22s ease, box-shadow .22s ease;
}
.artemis-suggestion:nth-child(1){ animation-delay: .18s; }
.artemis-suggestion:nth-child(2){ animation-delay: .24s; }
.artemis-suggestion:nth-child(3){ animation-delay: .30s; }

.artemis-suggestion svg{
  width: 26px; height: 26px; color: var(--a-accent);
  transition: filter .22s ease, transform .22s ease;
}
.artemis-suggestion span{
  font-size: 12px; line-height: 1.5; font-weight: 500;
  max-width: 14ch;
}
.artemis-suggestion:hover{
  border-color: color-mix(in srgb, var(--a-accent) 45%, transparent);
  background: var(--a-surface);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -22px color-mix(in srgb, var(--a-accent) 90%, transparent);
}
.artemis-suggestion:hover svg{
  transform: translateY(-1px);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--a-accent) 60%, transparent));
}
.artemis-suggestion:active{ transform: translateY(0) scale(.985); }

/* ---------- the state, said in words ----------
   "Artemis is thinking" belongs where you are already looking — under the
   face — not in a monospace pill in the corner. */
.artemis-statusline{
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 14px auto 0;
  color: var(--a-accent);
  font-size: 13.5px; letter-spacing: .01em;
  animation: a-rise .4s ease both;
}
.artemis-statusline-dots{ display: none; align-items: center; gap: 7px; }
.artemis-statusline-dots i{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--a-accent);
  animation: a-wait 1.3s ease-in-out infinite;
}
.artemis-statusline-dots i:nth-child(2){ animation-delay: .16s; }
.artemis-statusline-dots i:nth-child(3){ animation-delay: .32s; }
.artemis-stage.state-thinking .artemis-statusline-dots{ display: flex; }

.artemis-statusline-wave{
  display: none; align-items: center; justify-content: center; gap: 5px;
  width: min(76vw, 460px); height: 22px;
}
.artemis-statusline-wave i{
  flex: 0 1 2px; max-width: 2px; height: 14%; border-radius: 2px;
  background: var(--a-accent); opacity: .85;
  animation: a-wave 1s ease-in-out infinite;
}
.artemis-statusline-wave i:nth-child(3n)  { animation-delay: .12s; }
.artemis-statusline-wave i:nth-child(3n+1){ animation-delay: .26s; }
.artemis-statusline-wave i:nth-child(4n)  { animation-delay: .38s; }
.artemis-statusline-wave i:nth-child(5n)  { animation-delay: .07s; }
.artemis-stage.state-speaking .artemis-statusline-wave{ display: flex; }

@media (prefers-reduced-motion: reduce){
  .artemis-statusline-dots i,
  .artemis-statusline-wave i{ animation: none !important; }
}

/* ============================ thread ============================ */
.artemis-thread{
  width: 100%; max-width: 720px;
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px 0 10px;
}
.artemis-stage.is-empty .artemis-thread{ padding: 0; }
.artemis-scrollpad{ height: 24px; flex-shrink: 0; }

/* A turn is an avatar and a column. The avatar is what makes a long thread
   scannable at a glance — you can find who said what without reading. */
.artemis-msg{
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 100%;
  animation: a-msg-in .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes a-msg-in{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: none; }
}
.artemis-msg.is-user{ flex-direction: row-reverse; }
.artemis-msg.is-artemis + .artemis-msg.is-user{ margin-top: 8px; }

.artemis-msg-main{ min-width: 0; display: flex; flex-direction: column; }
/* The percentage is measured against the row, and the avatar sits in the same
   row — so the cap has to subtract it or the bubble pushes its own portrait
   off the edge. */
.artemis-msg.is-user .artemis-msg-main{
  align-items: flex-end;
  max-width: min(84%, 540px, calc(100% - 48px));
}
.artemis-msg.is-artemis .artemis-msg-main{ align-items: flex-start; flex: 1; }

/* ---------- the avatars ---------- */
.artemis-avatar{
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--a-line);
  background: var(--a-surface);
  color: var(--a-ink-3);
}
.artemis-avatar svg{ width: 17px; height: 17px; }
.artemis-msg.is-artemis .artemis-avatar{
  border-color: color-mix(in srgb, var(--a-accent) 40%, transparent);
  color: var(--a-accent);
  background: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--a-accent) 16%, var(--a-surface)) 0%,
    var(--a-surface) 75%);
  box-shadow: 0 0 18px -6px color-mix(in srgb, var(--a-accent) 70%, transparent);
}

/* ---------- the bubbles ---------- */
.artemis-bubble{
  position: relative;
  padding: 13px 16px 10px;
  border-radius: calc(16px * var(--a-radius-scale));
  font-size: 15px; line-height: 1.75; color: var(--a-ink);
  word-break: break-word; overflow-wrap: anywhere;
}
.artemis-bubble-body{ white-space: pre-wrap; }

.artemis-msg.is-user .artemis-bubble{
  background: var(--a-raised);
  border: 1px solid var(--a-line);
  border-start-end-radius: calc(6px * var(--a-radius-scale));
}
.artemis-msg.is-artemis .artemis-bubble{
  width: 100%;
  background: var(--a-surface);
  border: 1px solid var(--a-line);
  border-start-start-radius: calc(6px * var(--a-radius-scale));
  font-size: 15.5px; line-height: 1.85;
}

/* ---------- the foot of a bubble: time on one side, controls on the other */
/* Forced LTR. The clock belongs on the same side of every bubble, whichever
   language the message above it is written in — a timestamp that jumps from
   one corner to the other between turns reads as a fault. */
.artemis-bubble-foot{
  direction: ltr;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 8px; min-height: 22px;
}
.artemis-time{
  font-family: var(--a-mono); font-size: 10.5px; color: var(--a-ink-3);
  flex-shrink: 0;
}

.artemis-acts{ display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.artemis-act{
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--a-ink-3);
  opacity: 0; transform: translateY(-2px);
  transition: opacity .2s ease, transform .2s ease, color .2s ease, background .2s ease;
}
.artemis-act svg{ width: 14px; height: 14px; }
.artemis-msg:hover .artemis-act,
.artemis-act:focus-visible{ opacity: 1; transform: none; }
.artemis-act:hover{ color: var(--a-ink); background: var(--a-raised); }
.artemis-act.is-on{ opacity: 1; color: var(--a-accent); }
@media (hover: none){ .artemis-act{ opacity: .6; transform: none; } }

/* Anything still rendering the old role label keeps out of the way. */
.artemis-msg-meta{ display: none; }

.artemis-word{ opacity: 0; animation: a-word-in .32s ease forwards; }
@keyframes a-word-in{ to{ opacity: 1; } }

.artemis-caret{
  display: inline-block; width: 2px; height: 1em; vertical-align: -2px;
  background: var(--a-accent); margin-inline-start: 3px;
  animation: a-blink 1s step-end infinite;
}
@keyframes a-blink{ 50%{ opacity: 0; } }

/* The placeholder says what it is doing, then keeps the slot warm. */
.artemis-thinking{
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 2px 0;
  color: var(--a-accent); font-size: 14px;
}
.artemis-thinking b{ font-weight: 400; }
.artemis-thinking span{ display: flex; align-items: center; gap: 7px; }
.artemis-thinking i{
  width: 6px; height: 6px; border-radius: 50%; background: var(--a-accent);
  animation: a-wait 1.3s ease-in-out infinite;
}
.artemis-thinking i:nth-child(2){ animation-delay: .16s; }
.artemis-thinking i:nth-child(3){ animation-delay: .32s; }
@keyframes a-wait{
  0%,100%{ opacity: .25; transform: translateY(0); }
  40%{ opacity: .9; transform: translateY(-4px); }
}

.artemis-filed{
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 4px;
  animation: a-msg-in .5s ease both;
}
.artemis-filed span{
  font-family: var(--a-mono); font-size: 10.5px; line-height: 1.7; color: var(--a-ink-3);
}
.artemis-filed span::before{ content: "\25C6 "; color: var(--a-accent); }

.artemis-sources{
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.artemis-sources a,
.artemis-sources span{
  font-family: var(--a-mono); font-size: 10px; text-decoration: none;
  color: var(--a-ink-2); background: var(--a-raised);
  padding: 4px 10px; border-radius: 999px; transition: .2s ease;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.artemis-sources a:hover{ color: var(--a-accent); background: var(--a-accent-2); }

/* ============================ jump ============================ */
.artemis-jump{
  position: absolute; z-index: 25;
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  inset-inline-end: clamp(14px, 3vw, 30px);
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--a-surface); border: 1px solid var(--a-line-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--a-ink-2);
  box-shadow: 0 6px 18px -8px var(--a-shadow-2);
  animation: a-msg-in .3s ease both;
}
.artemis-jump svg{ width: 16px; height: 16px; }
.artemis-jump:hover{ color: var(--a-accent); border-color: var(--a-accent); }

/* ============================ composer ============================ */
.artemis-composer{
  position: relative; z-index: 20; flex-shrink: 0;
  padding: 12px clamp(12px, 3vw, 26px) 14px;
  background: linear-gradient(to top, var(--a-bg) 62%, transparent);
}
.artemis-stage.has-dock .artemis-composer{ padding-bottom: 8px; }

/* One pill. The mic and the send key are the only two things in it, and the
   send key is the only lit surface on the screen when the field is empty. */
.artemis-inputbar{
  position: relative;
  width: 100%; max-width: 720px; margin: 0 auto;
  display: flex; align-items: flex-end; gap: 6px;
  padding: 6px 6px 6px 8px;
  background: var(--a-surface);
  border: 1px solid var(--a-line);
  border-radius: calc(26px * var(--a-radius-scale));
  box-shadow: 0 2px 16px -8px var(--a-shadow);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.artemis-inputbar.is-focused,
.artemis-inputbar:focus-within{
  border-color: color-mix(in srgb, var(--a-accent) 45%, transparent);
  box-shadow: 0 10px 34px -20px color-mix(in srgb, var(--a-accent) 90%, transparent);
}

/* A textarea, not an input: long messages grow instead of scrolling sideways
   out of sight. */
.artemis-inputbar textarea{
  flex: 1; min-width: 0; resize: none;
  font-size: 15px; line-height: 1.6; color: var(--a-ink);
  padding: 11px 4px; max-height: 180px; overflow-y: auto;
}
.artemis-inputbar textarea::placeholder{ color: var(--a-ink-3); opacity: 1; }
.artemis-inputbar textarea::-webkit-scrollbar{ width: 4px; }
.artemis-inputbar textarea::-webkit-scrollbar-thumb{ background: var(--a-line-2); border-radius: 4px; }

.artemis-mic{
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--a-ink-3); transition: .22s ease;
}
.artemis-mic svg{ width: 17px; height: 17px; }
.artemis-mic:hover{ color: var(--a-ink); background: var(--a-raised); }
.artemis-mic.is-on{
  color: #04211E; background: var(--a-warn);
  animation: a-mic-live 1.6s ease-in-out infinite;
}
@keyframes a-mic-live{
  0%,100%{ box-shadow: 0 0 0 0 rgba(224,160,80,.4); }
  50%{ box-shadow: 0 0 0 7px transparent; }
}
.artemis-mic[disabled]{ opacity: .3; cursor: not-allowed; }

.artemis-send{
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--a-accent) 96%, #fff) 0%,
    var(--a-accent) 55%,
    color-mix(in srgb, var(--a-accent) 70%, #000) 100%);
  color: #04211E;
  opacity: .55;
  box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--a-accent) 90%, transparent);
  transition: opacity .22s ease, transform .18s ease, box-shadow .22s ease;
}
.artemis-send svg{ width: 18px; height: 18px; }
.artemis-send.is-armed{
  opacity: 1;
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--a-accent) 100%, transparent);
}
.artemis-send.is-armed:hover{ transform: scale(1.06); }
.artemis-send:active{ transform: scale(.92); }
.artemis-send[disabled]{ opacity: .3; cursor: not-allowed; transform: none; }

.artemis-ping{
  position: fixed; z-index: 44; pointer-events: none;
  width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  border: 1px solid var(--a-accent);
  animation: a-ping 800ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes a-ping{
  0%{ transform: scale(1); opacity: .55; }
  100%{ transform: scale(6); opacity: 0; }
}

/* ============================ memory drawer ============================ */
.artemis-drawer{
  position: absolute; top: 0; bottom: 0; inset-inline-end: 0; z-index: 45;
  width: min(370px, 90%);
  background: var(--a-surface);
  border-inline-start: 1px solid var(--a-line);
  box-shadow: -18px 0 40px -24px var(--a-shadow-2);
  display: flex; flex-direction: column;
  animation: a-drawer-in .32s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes a-drawer-in{ from{ transform: translateX(14px); opacity: 0; } to{ transform: none; opacity: 1; } }

.artemis-drawer-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 14px; border-bottom: 1px solid var(--a-line);
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-ink-3);
}
.artemis-drawer-head button{ font-size: 22px; line-height: 1; color: var(--a-ink-3); padding: 2px 6px; }
.artemis-drawer-head button:hover{ color: var(--a-ink); }

.artemis-drawer-body{ flex: 1; overflow-y: auto; padding: 12px 14px; }
.artemis-drawer-body::-webkit-scrollbar{ width: 4px; }
.artemis-drawer-body::-webkit-scrollbar-thumb{ background: var(--a-line-2); border-radius: 4px; }

.artemis-mem{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 13px; margin-bottom: 7px;
  background: var(--a-bg); border: 1px solid var(--a-line); border-radius: 12px;
  font-size: 13px; line-height: 1.7; color: var(--a-ink-2);
  transition: border-color .2s ease, opacity .3s ease, transform .3s ease;
}
.artemis-mem:hover{ border-color: var(--a-line-2); }
.artemis-mem.is-going{ opacity: 0; transform: translateX(10px); }
.artemis-mem p{ margin: 0; flex: 1; word-break: break-word; }
.artemis-mem button{
  flex-shrink: 0; font-size: 16px; line-height: 1; color: var(--a-ink-3);
  opacity: 0; transition: opacity .2s ease, color .2s ease;
}
.artemis-mem:hover button{ opacity: 1; }
.artemis-mem button:hover{ color: var(--a-warn); }
.artemis-mem.is-manual{ border-inline-start: 2px solid var(--a-accent); }
@media (hover: none){ .artemis-mem button{ opacity: .75; } }

.artemis-drawer-empty{
  padding: 28px 12px; text-align: center; font-size: 12.5px; line-height: 1.8;
  color: var(--a-ink-3);
}

.artemis-drawer-foot{
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--a-line);
}
.artemis-drawer-foot input{ flex: 1; min-width: 0; font-size: 13px; }
.artemis-drawer-foot input::placeholder{ color: var(--a-ink-3); }
.artemis-drawer-foot button{
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--a-raised); color: var(--a-ink-2); font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: .2s ease;
}
.artemis-drawer-foot button:hover{ background: var(--a-accent); color: var(--a-bg); }

.artemis-drawer-clear{
  padding: 13px; border-top: 1px solid var(--a-line);
  padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px));
  font-family: var(--a-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--a-ink-3); transition: color .2s ease;
}
.artemis-drawer-clear:hover{ color: var(--a-warn); }

/* ============================================================
   Desktop
   The layout stops being a centred column and becomes an
   asymmetric one: a narrow rail carries the identity and the
   status, and the conversation sits in its own field beside it.
   This is the part that stops it looking like every other chat.
============================================================ */

/* Very wide screens: hold the measure, let the whitespace grow. */

/* ============================================================
   Mobile
============================================================ */
@media (max-width: 680px){
  .artemis-topbar{ padding: 12px 14px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .artemis-state{ display: none; }
  .artemis-brand-name{ font-size: 12px; letter-spacing: .14em; }

  /* 36px is fine for a mouse and frustrating for a thumb. */
  .artemis-tool{ width: 40px; height: 40px; border-radius: 12px; }
  .artemis-tools{ gap: 6px; }

  .artemis-canvas{ padding: 0 14px; }

  .artemis-orb{
    width: min(64vw, 230px); height: min(64vw, 230px);
    min-width: 140px; min-height: 140px;
  }
  .artemis-stage:not(.is-empty) .artemis-orb{ width: 58px; height: 58px; }

  .artemis-greeting{ margin-top: 14px; }
  .artemis-greeting h2{ font-size: 1.65rem; }
  .artemis-greeting p{ font-size: 13.5px; }

  .artemis-thread{ gap: 14px; padding: 16px 0 6px; }
  .artemis-msg{ gap: 8px; }
  .artemis-avatar{ width: 32px; height: 32px; }
  .artemis-avatar svg{ width: 15px; height: 15px; }
  .artemis-msg.is-user .artemis-msg-main{ max-width: min(88%, calc(100% - 42px)); }
  .artemis-bubble{ padding: 11px 14px 8px; font-size: 14.5px; }
  .artemis-msg.is-artemis .artemis-bubble{ font-size: 15px; line-height: 1.8; }

  .artemis-suggestions{ gap: 8px; margin-top: 18px; }
  .artemis-suggestion{ min-height: 92px; padding: 14px 6px; gap: 10px; }
  .artemis-suggestion svg{ width: 23px; height: 23px; }
  .artemis-suggestion span{ font-size: 11px; }

  .artemis-composer{ padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .artemis-inputbar{ padding: 6px 6px 6px 10px; border-radius: calc(20px * var(--a-radius-scale)); }

  /* Below 16px, iOS Safari zooms the page the moment the field is tapped and
     the whole layout jumps. This value is not a style choice. */
  .artemis-inputbar textarea{ font-size: 16px; padding: 8px 0; max-height: 120px; }

  .artemis-mic, .artemis-send{ width: 40px; height: 40px; }

  .artemis-jump{
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    inset-inline-end: 14px; width: 40px; height: 40px;
  }

  .artemis-drawer{ width: 100%; border-inline-start: none; }
  .artemis-drawer-head{ padding: 16px 16px 12px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .artemis-mem{ font-size: 13.5px; }
  .artemis-mem button{ font-size: 20px; padding: 0 4px; }
  .artemis-drawer-foot input{ font-size: 16px; }
  .artemis-drawer-foot button{ width: 34px; height: 34px; }
}

/* Short viewports: landscape phones, and portrait with the keyboard up. */
@media (max-height: 620px){
  .artemis-orb{ width: min(40vh, 180px); height: min(40vh, 180px); min-width: 110px; min-height: 110px; }
  .artemis-greeting{ margin-top: 8px; }
  .artemis-greeting h2{ font-size: 1.4rem; margin-bottom: 6px; }
  .artemis-greeting p{ font-size: 12.5px; }
  .artemis-rule{ margin-top: 12px; }
  .artemis-suggestions{ margin-top: 14px; }
  .artemis-suggestion{ min-height: 78px; }
}

/* With the on-screen keyboard open there is no room for a hero. Set by JS
   from the visualViewport API, because CSS cannot see the keyboard. */
.artemis-stage.is-keyboard .artemis-orb{ width: 46px !important; height: 46px !important; }
.artemis-stage.is-keyboard .artemis-greeting,
.artemis-stage.is-keyboard .artemis-rule,
.artemis-stage.is-keyboard .artemis-suggestions{ display: none; }

@media (max-width: 380px){
  .artemis-greeting h2{ font-size: 1.45rem; }
  .artemis-msg.is-user .artemis-msg-main{ max-width: calc(100% - 40px); }
  .artemis-canvas{ padding: 0 11px; }
  .artemis-composer{ padding-inline: 11px; }
  .artemis-tool{ width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce){
  .artemis-stage *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .artemis-canvas{ scroll-behavior: auto; }
  .artemis-word{ opacity: 1 !important; }
}

/* ============================================================
   Mobile, second pass
============================================================ */
@media (max-width: 680px){
  /* Stop the page behind the widget from scrolling when the thread hits its
     end — the classic scroll-chaining annoyance on phones. */
  .artemis-stage{ touch-action: manipulation; }
  .artemis-canvas{ overscroll-behavior-y: contain; }

  /* The composer needs a real edge on mobile: a gradient over a scrolling
     thread leaves text ghosting through it. */
  .artemis-composer{
    background: var(--a-bg);
    border-top: 1px solid var(--a-line);
  }

  /* Long unbroken strings — URLs, tokens, file paths — were the one thing
     that could still force a horizontal scroll. */
  .artemis-bubble{ overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
  .artemis-sources a{ max-width: 100%; }

  /* The docked core stays centred — off to one side it reads as a mistake
     rather than a decision. It sits on its own line above the thread, small
     enough to cost almost nothing. */
  .artemis-stage:not(.is-empty) .artemis-orb{ width: 52px; height: 52px; }
  .artemis-stage:not(.is-empty) .artemis-thread{ padding-top: 12px; }

  /* Tapping the send button should never scroll-jank the thread. */

  /* Drawer: give it a grab edge and full-height scroll on short screens. */
  .artemis-drawer-body{ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
}

/* Landscape phone: the composer and thread need every pixel. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape){
  .artemis-topbar{ padding: 8px 14px; }
  .artemis-orb{ width: min(30vh, 120px); height: min(30vh, 120px); min-width: 90px; min-height: 90px; }
  .artemis-greeting h2{ font-size: 1.25rem; margin-bottom: 4px; }
  .artemis-greeting p{ display: none; }
  .artemis-rule{ display: none; }
  .artemis-suggestion{ min-height: 66px; padding: 10px 6px; gap: 7px; }
  .artemis-thread{ gap: 12px; }
  .artemis-composer{ padding-block: 8px; }
}

/* Tablets sit between the two designs and deserve their own measure. */
@media (min-width: 681px) and (max-width: 1079px){
  .artemis-thread, .artemis-inputbar{ max-width: 640px; }
  .artemis-orb{ width: min(46vw, 280px); height: min(46vw, 280px); }
  .artemis-canvas, .artemis-composer{ padding-inline: clamp(20px, 4vw, 40px); }
}

/* Wider still: hold the reading measure, let the stage take the extra room. */

/* Below 1080 the caption belongs to the desktop composition only. */

/* Very wide: the measure holds, the room grows around it. */

.artemis-brand-name{
  font-family: var(--a-display);
  font-weight: 700;
  letter-spacing: .22em;
}
.artemis-greeting h2{
  font-family: var(--a-display);
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Wide screens: hold the measure, let the margins grow. */


/* ============================================================
   THE FIELD
   The core lives behind the interface, not inside it. It is
   ambient: always there, never in the way, and it brightens
   when Artemis is doing something.
============================================================ */
.artemis-field{
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.artemis-field .artemis-orb{
  position: absolute;
  width: min(120vw, 900px); height: min(120vw, 900px);
  transition: opacity .9s ease, transform 1.2s cubic-bezier(.3,.9,.3,1);
  will-change: opacity;
}

/* At rest it sits centred and present. */
.artemis-stage.is-empty .artemis-field .artemis-orb{ opacity: .95; }

/* Once you are reading, it recedes and drifts up out of the reading path —
   still alive, no longer competing with the text. */
.artemis-stage:not(.is-empty) .artemis-field .artemis-orb{
  opacity: .22;
  transform: translateY(-14%) scale(.92);
}
.artemis-stage:not(.is-empty).state-thinking .artemis-field .artemis-orb{ opacity: .42; }
.artemis-stage:not(.is-empty).state-listening .artemis-field .artemis-orb{ opacity: .46; }
.artemis-stage:not(.is-empty).state-speaking .artemis-field .artemis-orb{ opacity: .36; }

/* Dark mode carries the veil at lower contrast, so it needs a little more. */
.theme-dark.artemis-stage:not(.is-empty) .artemis-field .artemis-orb{ opacity: .30; }

/* ============================================================
   THE WORDMARK
   Syne, used in exactly one place. That is what a wordmark is for.
============================================================ */
.artemis-brand-name{
  font-family: var(--a-display);
  font-weight: 700;
  letter-spacing: .22em;
}
.artemis-greeting h2{
  font-family: var(--a-display);
  font-weight: 600;
  letter-spacing: -.015em;
}

/* Everything that reads must sit above the field. */
.artemis-topbar,
.artemis-canvas,
.artemis-composer{ position: relative; z-index: 10; }
.artemis-topbar{ z-index: 30; }
.artemis-composer{ z-index: 20; }

/* ============================================================
   DESKTOP
   Same composition, more room. The turns keep their avatars and
   their bubbles — the spine the old desktop layout drew is gone,
   because two speakers reading as one column was the thing that
   made a conversation hard to skim.
============================================================ */
@media (min-width: 1080px){

  .artemis-stage{
    display: flex; flex-direction: column;
  }

  /* ---- header: the only permanent chrome ---- */
  .artemis-topbar{
    padding: 20px clamp(28px, 4vw, 56px);
    border-bottom: 1px solid transparent;
    background: transparent !important;
    backdrop-filter: none !important;
  }
  .artemis-stage:not(.is-empty) .artemis-topbar{
    border-bottom-color: var(--a-line);
    background: color-mix(in srgb, var(--a-bg) 92%, transparent) !important;
  }
  .artemis-brand-name{ font-size: 13px; }

  /* ---- opening ---- */
  .artemis-canvas{ padding: 0 clamp(28px, 4vw, 56px); align-items: center; }

  .artemis-greeting{
    max-width: 620px;
    margin: 0 auto;
    padding-top: 10vh;
    text-align: center;
  }
  .artemis-greeting h2{
    font-size: clamp(2.6rem, 4.4vw, 3.8rem);
    line-height: 1.05;
    margin: 0;
  }
  .artemis-greeting p{
    margin-top: 16px;
    font-size: 15px;
    color: var(--a-ink-3);
  }

  /* With a portrait above it, the greeting is a caption, not the hero — and
     the whole opening has to clear the field and the rail underneath it. */
  .artemis-stage.has-avatar .artemis-greeting{ padding-top: 0; margin-top: 6px; }
  .artemis-stage.has-avatar .artemis-greeting h2{ font-size: clamp(1.8rem, 2.4vw, 2.3rem); }
  .artemis-stage.has-avatar .artemis-greeting p{ margin-top: 10px; font-size: 14px; }
  .artemis-stage.has-avatar .artemis-rule{ margin-top: 16px; }

  .artemis-suggestions{ max-width: 600px; gap: 14px; margin-top: 20px; }
  .artemis-suggestion{ min-height: 104px; }
  .artemis-suggestion span{ font-size: 12.5px; }

  /* ---- the thread ---- */
  .artemis-thread{
    width: 100%; max-width: 780px;
    padding: 30px 0 8px;
    gap: 20px;
  }
  .artemis-msg{ gap: 12px; }
  .artemis-avatar{ width: 38px; height: 38px; }
  .artemis-bubble{ padding: 15px 18px 11px; }
  .artemis-msg.is-artemis .artemis-bubble{ font-size: 16px; line-height: 1.85; }

  /* ---- composer ---- */
  .artemis-composer{
    padding: 14px clamp(28px, 4vw, 56px) clamp(20px, 3vh, 30px);
    background: linear-gradient(to top, var(--a-bg) 58%, transparent);
  }
  .artemis-inputbar{
    max-width: 780px;
    padding: 7px 7px 7px 16px;
    box-shadow: 0 8px 30px -20px var(--a-shadow-2);
  }
  .artemis-inputbar textarea{ font-size: 15.5px; }

  .artemis-jump{ bottom: 108px; inset-inline-end: calc(50% - 390px - 50px); }
  .artemis-drawer{ width: 400px; }
}

@media (min-width: 1600px){
  .artemis-thread, .artemis-inputbar{ max-width: 840px; }
  .artemis-jump{ inset-inline-end: calc(50% - 420px - 50px); }
}

/* ============================================================
   WORKSHOP MODE
   A different room. The ambient core recedes almost entirely,
   the type goes monospace, and the surface tightens up — this
   is a place to read code, not to have a conversation.
============================================================ */

/* The core is a distraction when you are reading a stack trace. */
.artemis-stage.is-dev .artemis-field .artemis-orb{ opacity: .08 !important; }
.theme-dark.artemis-stage.is-dev .artemis-field .artemis-orb{ opacity: .12 !important; }

.artemis-stage.is-dev .artemis-state{
  color: var(--a-accent);
  font-weight: 600;
}

/* Wider measure: code lines do not wrap kindly at 46 characters. */
@media (min-width: 1080px){
  .artemis-stage.is-dev .artemis-thread,
  .artemis-stage.is-dev .artemis-inputbar{ max-width: 940px; }
  .artemis-stage.is-dev .artemis-jump{ inset-inline-end: calc(50% - 470px - 50px); }
}

.artemis-stage.is-dev .artemis-msg.is-artemis .artemis-bubble{
  font-size: 15px; line-height: 1.75;
}
.artemis-stage.is-dev .artemis-msg.is-user .artemis-bubble{
  font-family: var(--a-mono);
  font-size: 13px;
}
.artemis-stage.is-dev .artemis-inputbar textarea{
  font-family: var(--a-mono);
  font-size: 13.5px; line-height: 1.7;
  max-height: 320px;
}

.artemis-prose{ margin: 0 0 10px; }
.artemis-prose:last-child{ margin-bottom: 0; }

.artemis-inline-code{
  font-family: var(--a-mono);
  font-size: .88em;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--a-raised);
  color: var(--a-ink);
}

/* ---------- code blocks ---------- */
.artemis-code{
  margin: 14px 0;
  border: 1px solid var(--a-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--a-surface);
  direction: ltr;              /* code is never RTL, whatever the prose is */
  text-align: left;
}
.theme-dark .artemis-code{ background: #0F1214; }

.artemis-code-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 1px solid var(--a-line);
  background: var(--a-raised);
  font-family: var(--a-mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--a-ink-3);
}
.theme-dark .artemis-code-head{ background: #151A1C; }
.artemis-code-head button{
  font-family: var(--a-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--a-ink-3);
  padding: 2px 6px; border-radius: 4px; transition: .2s ease;
}
.artemis-code-head button:hover{ color: var(--a-accent); background: var(--a-bg); }

.artemis-code pre{
  margin: 0; padding: 14px 16px;
  overflow-x: auto;
  background: none; border: none;
}
.artemis-code code{
  font-family: var(--a-mono);
  font-size: 12.5px; line-height: 1.75;
  color: var(--a-ink);
  white-space: pre;
  background: none; padding: 0;
}
.artemis-code pre::-webkit-scrollbar{ height: 6px; }
.artemis-code pre::-webkit-scrollbar-thumb{ background: var(--a-line-2); border-radius: 6px; }

/* ---------- the workbench ---------- */
.artemis-workbench{
  position: relative; z-index: 20; flex-shrink: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  padding: 10px clamp(14px, 3vw, 30px) 0;
  max-width: 100%;
}
@media (min-width: 1080px){
  .artemis-workbench{
    width: 100%; max-width: 940px;
    margin: 0 auto;
    padding-inline: 0;
  }
}

.artemis-file{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 8px 5px 11px;
  border: 1px solid var(--a-line);
  border-radius: 7px;
  background: var(--a-surface);
  font-family: var(--a-mono); font-size: 11px;
  color: var(--a-ink-2);
  max-width: 240px;
}
.artemis-file span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artemis-file button{
  font-size: 14px; line-height: 1; color: var(--a-ink-3);
  padding: 0 2px; transition: color .2s ease;
}
.artemis-file button:hover{ color: var(--a-warn); }

.artemis-workbench-add{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px dashed var(--a-line-2);
  border-radius: 7px;
  font-family: var(--a-mono); font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--a-ink-3);
  cursor: pointer;
  transition: .2s ease;
}
.artemis-workbench-add:hover{ color: var(--a-accent); border-color: var(--a-accent); }
.artemis-workbench-add svg{ width: 12px; height: 12px; }

/* ---------- drop target ---------- */
.artemis-dropzone{
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--a-bg) 88%, transparent);
  backdrop-filter: blur(3px);
  animation: a-fade-in .18s ease both;
}
@keyframes a-fade-in{ from{ opacity: 0; } to{ opacity: 1; } }

.artemis-dropzone-inner{
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 48px 64px;
  border: 1.5px dashed var(--a-accent);
  border-radius: 18px;
  color: var(--a-accent);
  font-family: var(--a-mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
}
.artemis-dropzone-inner svg{ width: 34px; height: 34px; }

@media (max-width: 680px){
  .artemis-workbench{ padding: 8px 12px 0; }
  .artemis-file{ max-width: 160px; font-size: 10.5px; }
  .artemis-code code{ font-size: 11.5px; }
  .artemis-dropzone-inner{ padding: 32px 28px; font-size: 11px; }
}

/* ---------- the loaded package ---------- */
.artemis-package{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 12px;
  border: 1px solid var(--a-accent);
  border-radius: 8px;
  background: var(--a-accent-2);
  font-family: var(--a-mono); font-size: 11px;
  color: var(--a-ink);
  max-width: 100%;
}
.artemis-package-name{
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 220px;
}
.artemis-package-tree{
  font-family: var(--a-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--a-ink-2);
  padding: 3px 8px; border-radius: 5px;
  transition: .2s ease;
}
.artemis-package-tree:hover{ background: var(--a-surface); color: var(--a-ink); }

.artemis-package-build{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 6px;
  background: var(--a-surface);
  font-family: var(--a-mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--a-ink-2);
  transition: .2s ease;
}
.artemis-package-build svg{ width: 12px; height: 12px; }
.artemis-package-build:hover{ color: var(--a-ink); }
/* Edits waiting: the button changes state so it is obvious it will write. */
.artemis-package-build.has-edits{
  background: var(--a-accent); color: #fff;
  animation: a-edits 2.2s ease-in-out infinite;
}
@keyframes a-edits{
  0%,100%{ opacity: 1; }
  50%{ opacity: .78; }
}
.artemis-package-x{
  font-size: 15px; line-height: 1; color: var(--a-ink-3);
  padding: 0 5px; transition: color .2s ease;
}
.artemis-package-x:hover{ color: var(--a-warn); }

/* ---------- file tree ---------- */
.artemis-tree{
  position: absolute; z-index: 50;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, 92%); max-height: 70vh;
  display: flex; flex-direction: column;
  background: var(--a-surface);
  border: 1px solid var(--a-line-2);
  border-radius: 14px;
  box-shadow: 0 30px 70px -40px var(--a-shadow-2);
  animation: a-msg-in .25s cubic-bezier(.2,.8,.2,1) both;
}
.artemis-tree-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px 12px;
  border-bottom: 1px solid var(--a-line);
  font-family: var(--a-mono); font-size: 11px;
  color: var(--a-ink-2);
}
.artemis-tree-head button{ font-size: 20px; line-height: 1; color: var(--a-ink-3); padding: 0 4px; }
.artemis-tree-head button:hover{ color: var(--a-ink); }
.artemis-tree-hint{
  margin: 0; padding: 10px 16px 6px;
  font-size: 11px; color: var(--a-ink-3);
}
.artemis-tree-list{
  flex: 1; overflow-y: auto; padding: 4px 10px 12px;
  display: flex; flex-direction: column;
}
.artemis-tree-list::-webkit-scrollbar{ width: 5px; }
.artemis-tree-list::-webkit-scrollbar-thumb{ background: var(--a-line-2); border-radius: 5px; }

.artemis-tree-item{
  text-align: left; direction: ltr;
  padding: 7px 10px; border-radius: 6px;
  font-family: var(--a-mono); font-size: 11.5px;
  color: var(--a-ink-2);
  transition: .15s ease;
  word-break: break-all;
}
.artemis-tree-item:hover{ background: var(--a-raised); color: var(--a-ink); }
.artemis-tree-item.is-loading{ opacity: .5; }
.artemis-tree-item.is-loaded{ color: var(--a-accent); }
.artemis-tree-item.is-loaded::after{ content: " \2713"; }

/* ---------- download ---------- */
.artemis-download{
  display: inline-flex; align-items: center;
  margin-top: 12px; padding: 9px 16px;
  border-radius: 8px;
  background: var(--a-accent); color: #fff;
  font-family: var(--a-mono); font-size: 11.5px;
  text-decoration: none;
  transition: transform .2s ease, opacity .2s ease;
}
.artemis-download:hover{ transform: translateY(-1px); opacity: .92; color: #fff; }

@media (max-width: 680px){
  .artemis-package{ font-size: 10.5px; }
  .artemis-package-name{ max-width: 120px; }
  .artemis-tree{ width: 94%; max-height: 76vh; }
}

/* ============================================================ personas ==== */

/*
 * The switcher. Deliberately quiet: it sits under the top bar, scrolls
 * sideways on a phone rather than wrapping, and the active persona is marked
 * by weight and a filled dot rather than by colour alone.
 */
.artemis-personas {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 6px;
  padding: 8px 16px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.artemis-personas::-webkit-scrollbar { display: none; }

.artemis-persona {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--a-line);
  border-radius: 999px;
  background: var(--a-surface);
  color: var(--a-ink-2);
  font-family: var(--a-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.artemis-persona:hover {
  border-color: var(--a-line-2);
  color: var(--a-ink);
}

.artemis-persona.is-active {
  border-color: var(--a-accent);
  background: var(--a-accent-2);
  color: var(--a-accent);
  font-weight: 600;
}

.artemis-persona-icon {
  font-size: 11px;
  opacity: .75;
}

.artemis-persona.is-active .artemis-persona-icon { opacity: 1; }

/* On a narrow screen the names go and the icons carry it. */
@media (max-width: 460px) {
  .artemis-persona-name { display: none; }
  .artemis-persona { padding: 6px 10px; }
  .artemis-persona.is-active .artemis-persona-name {
    display: inline;
  }
}

/* ============================================================== the face ===
   Six portraits stacked, swapped by opacity alone. The theme picks a pair,
   the state picks one of the three. No JavaScript touches any of it — the
   stage already carries .theme-dark and .state-*, which is all that is
   needed, so the swap costs nothing and cannot desynchronise.

   The face sits in the canvas flow, above the greeting. The ambient orb
   behind it is unchanged and still does the rings.
========================================================================== */

.artemis-face{
  position: relative;
  flex: 0 0 auto;
  /* The vh term is what keeps the greeting and the cards on screen under it:
     with a 3:4 portrait, 34vh of width is 45vh of height, and the rest of the
     opening still fits on a phone. */
  width: min(62vw, 320px, 34vh);
  margin: clamp(8px, 3vh, 30px) auto 0;
  pointer-events: none;
  transition: width .55s cubic-bezier(.3,.9,.3,1),
              margin .55s cubic-bezier(.3,.9,.3,1);
}

/* Once the conversation starts the portrait steps back — but it does not
   collapse to a dot. Watching the character disappear the instant you speak
   is what breaks the sense that anyone is there, so it keeps enough size to
   still read as a face while the words take the rest of the screen. */
.artemis-stage:not(.is-empty) .artemis-face{
  width: min(40vw, 170px, 22vh);
  margin: 10px auto 2px;
}

.artemis-face-frame{
  position: relative;
  width: 100%;
  aspect-ratio: var(--a-face-ratio, 3/4);
  border-radius: calc(22px * var(--a-radius-scale));
  overflow: hidden;
  transition: border-radius .55s cubic-bezier(.3,.9,.3,1),
              aspect-ratio .55s cubic-bezier(.3,.9,.3,1);
}
/* The frame keeps the portrait's own proportion throughout. Cropping it to a
   circle mid-conversation changes who you are looking at. */
.artemis-stage:not(.is-empty) .artemis-face-frame{
  border-radius: calc(18px * var(--a-radius-scale));
}

/* In the dark, the portrait has no edge. An image lit for a black background
   should sit in the page, not in a box on it — so the frame is dropped and
   the bottom is faded into the surface instead. */
.artemis-stage.theme-dark .artemis-face-frame{
  border-radius: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 99%);
}

.artemis-face-layer{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
  opacity: 0;
  transition: opacity .5s ease;
  user-select: none;
  -webkit-user-drag: none;
}

/* Theme picks the pair. */
.artemis-face-layer[data-face-theme="dark"]{ display: none; }
.artemis-face-layer[data-face-theme="light"]{ display: block; }
.theme-dark .artemis-face-layer[data-face-theme="dark"]{ display: block; }
.theme-dark .artemis-face-layer[data-face-theme="light"]{ display: none; }

/* State picks the pose. Listening borrows the idle frame: the person is the
   one doing something then, not Artemis. */
.artemis-stage.state-idle      .artemis-face-layer[data-face-state="idle"],
.artemis-stage.state-listening .artemis-face-layer[data-face-state="idle"],
.artemis-stage.state-thinking  .artemis-face-layer[data-face-state="thinking"],
.artemis-stage.state-speaking  .artemis-face-layer[data-face-state="speaking"]{
  opacity: 1;
}

/* In light mode the portrait keeps its own dark well, so an image lit for a
   black background does not read as a hole punched through a white page. */
.artemis-stage:not(.theme-dark) .artemis-face-frame{
  background: linear-gradient(160deg, #0E1416 0%, #080C0D 100%);
  box-shadow: 0 20px 55px -24px var(--a-shadow-2),
              0 0 0 1px var(--a-line);
}

/* ---------- the glow behind ---------- */

.artemis-face-glow{
  position: absolute; inset: -12% -20%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%,
    color-mix(in srgb, var(--a-accent) 32%, transparent) 0%,
    transparent 70%);
  filter: blur(28px);
  opacity: .5;
  transition: opacity .5s ease, transform .5s ease;
}
.artemis-stage.state-thinking .artemis-face-glow{
  opacity: .85;
  animation: a-face-pulse 2.6s ease-in-out infinite;
}
.artemis-stage.state-speaking .artemis-face-glow{ opacity: 1; transform: scale(1.06); }
.artemis-stage:not(.is-empty) .artemis-face-glow{ filter: blur(12px); opacity: .45; }

@keyframes a-face-pulse{
  0%,100%{ opacity: .6; transform: scale(1); }
  50%    { opacity: .95; transform: scale(1.05); }
}

/* ---------- the core, over the chest ---------- */

.artemis-face-core{
  position: absolute;
  left: 50%; top: 64%;
  width: 24%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--a-accent) 90%, #fff) 0%,
    color-mix(in srgb, var(--a-accent) 55%, transparent) 32%,
    transparent 70%);
}
.artemis-face-core span{
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--a-accent) 45%, transparent);
  animation: a-core-ring 3.2s ease-out infinite;
}
.artemis-stage.state-thinking .artemis-face-core span{ animation-duration: 1.5s; }
.artemis-stage:not(.is-empty) .artemis-face-core{ opacity: 0; }

@keyframes a-core-ring{
  0%  { transform: scale(.5); opacity: .9; }
  100%{ transform: scale(1.95); opacity: 0; }
}

/* ---------- the waveform, while speaking ---------- */

.artemis-face-wave{
  position: absolute;
  left: 50%; bottom: -14px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px;
  width: 66%; height: 24px;
  opacity: 0;
  transition: opacity .3s ease;
}
.artemis-stage.state-speaking .artemis-face-wave{ opacity: 1; }
.artemis-stage:not(.is-empty) .artemis-face-wave{ display: none; }

.artemis-face-wave i{
  flex: 1; height: 16%;
  border-radius: 2px;
  background: var(--a-accent);
  opacity: .8;
}
.artemis-stage.state-speaking .artemis-face-wave i{ animation: a-wave 1s ease-in-out infinite; }
.artemis-face-wave i:nth-child(3n)  { animation-delay: .12s; }
.artemis-face-wave i:nth-child(3n+1){ animation-delay: .26s; }
.artemis-face-wave i:nth-child(4n)  { animation-delay: .38s; }
.artemis-face-wave i:nth-child(5n)  { animation-delay: .07s; }

@keyframes a-wave{
  0%,100%{ height: 14%; }
  50%    { height: 90%; }
}

/* With a portrait present the ambient orb is decoration, not the subject. */
.artemis-stage.has-avatar .artemis-field .artemis-orb{ opacity: .5; }
.artemis-stage.has-avatar:not(.is-empty) .artemis-field .artemis-orb{ opacity: .16; }

@media (prefers-reduced-motion: reduce){
  .artemis-face,
  .artemis-face-frame{ transition: none; }
  .artemis-face-glow,
  .artemis-face-core span,
  .artemis-face-wave i{ animation: none !important; }
}

/* ================================================================= dock ===
   A rail, not a tab bar. One hairline across the foot of the screen with the
   core raised on it, and the secondary actions sitting on the wire as nodes.
   Labels appear on demand rather than permanently, because five words along
   the bottom edge is five words competing with the conversation.
========================================================================== */

/* Source order puts the rail above the field; the design puts it below. An
   order swap is cheaper than moving the node, and keeps the tab order — dock
   first, then the field — which is the sensible one for a keyboard. */
.artemis-stage.has-dock .artemis-composer{ order: 90; }
.artemis-stage.has-dock .artemis-dock{ order: 91; }

.artemis-dock{
  position: relative; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
  width: min(100%, 460px);
  margin: 0 auto;
  padding: 8px clamp(14px, 6vw, 34px) 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

/* The wire. It stops short of both ends so it reads as an instrument scale
   rather than a border. */
.artemis-dock::before{
  content: "";
  position: absolute;
  left: clamp(14px, 6vw, 34px); right: clamp(14px, 6vw, 34px);
  top: 30px; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--a-line-2) 22%,
    var(--a-line-2) 78%,
    transparent 100%);
  pointer-events: none;
}

.artemis-dock-side{ display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.artemis-dock-side:last-child{ justify-content: flex-end; }

.artemis-dock-btn{
  position: relative;
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--a-line-2);
  border-radius: 50%;
  background: var(--a-bg);
  color: var(--a-ink-3);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.artemis-dock-btn svg{ width: 14px; height: 14px; }
.artemis-dock-btn:hover,
.artemis-dock-btn:focus-visible{
  color: var(--a-accent);
  border-color: color-mix(in srgb, var(--a-accent) 60%, transparent);
  box-shadow: 0 0 14px -4px color-mix(in srgb, var(--a-accent) 80%, transparent);
}
.artemis-dock-btn.is-active{
  color: var(--a-accent);
  border-color: color-mix(in srgb, var(--a-accent) 70%, transparent);
}

/* The label, kept off the rail until it is wanted. */
.artemis-dock-btn span{
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  padding: 4px 9px; border-radius: 8px;
  background: var(--a-raised); border: 1px solid var(--a-line);
  color: var(--a-ink); font-size: 11px; font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.artemis-dock-btn:hover span,
.artemis-dock-btn:focus-visible span{ opacity: 1; transform: translateX(-50%); }

.artemis-dock-badge{
  position: absolute; top: -5px; inset-inline-end: -5px;
  min-width: 15px; height: 15px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--a-accent); color: #04211E;
  font-size: 9px; font-style: normal; font-weight: 700;
}

/* The core rides the wire. Open, not filled: the facet reads as the same
   mark that sits on the portrait's forehead. */
.artemis-dock-core{
  position: relative; flex: 0 0 auto;
  width: 46px; height: 46px;
  margin: -4px 10px 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--a-accent) 45%, transparent);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--a-accent) 14%, var(--a-bg)) 0%,
    var(--a-bg) 74%);
  color: var(--a-accent);
  cursor: pointer;
  box-shadow: 0 0 22px -8px color-mix(in srgb, var(--a-accent) 90%, transparent);
  transition: transform .2s cubic-bezier(.3,.9,.3,1), box-shadow .2s ease;
}
.artemis-dock-core svg{
  width: 20px; height: 20px;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--a-accent) 60%, transparent));
}
.artemis-dock-core:hover{ transform: translateY(-2px); }
.artemis-dock-core:active{ transform: translateY(0) scale(.96); }
.artemis-dock-core.is-active{ box-shadow: 0 0 30px -6px color-mix(in srgb, var(--a-accent) 100%, transparent); }

.artemis-dock-core-ring{
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--a-accent) 35%, transparent);
  opacity: 0;
}
.artemis-stage.state-thinking .artemis-dock-core-ring,
.artemis-stage.state-speaking .artemis-dock-core-ring{
  opacity: 1; animation: a-core-ring 2s ease-out infinite;
}

/* The dock supersedes the duplicated top-bar tools where space is tight. */
@media (max-width: 1079px){
  .artemis-stage.has-dock .artemis-tools .artemis-tool[data-memory-toggle]{ display: none; }
}

/* =============================================================== sheets ===
   A bottom sheet on a phone, a floating panel once there is room. Same
   markup, one breakpoint.
========================================================================== */

.artemis-sheet-scrim{
  position: absolute; inset: 0; z-index: 45;
  background: color-mix(in srgb, var(--a-bg) 55%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .22s ease;
}
.artemis-sheet-scrim.is-open{ opacity: 1; }

.artemis-sheet{
  position: absolute; z-index: 50;
  left: 0; right: 0; bottom: 0;
  max-height: 68%;
  overflow-y: auto;
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--a-line);
  border-radius: 20px 20px 0 0;
  background: var(--a-surface);
  box-shadow: 0 -18px 50px -22px var(--a-shadow-2);
  transform: translateY(102%);
  transition: transform .24s cubic-bezier(.3,.9,.3,1);
}
.artemis-sheet.is-open{ transform: none; }

.artemis-sheet-grip{
  width: 34px; height: 4px; margin: 4px auto 12px;
  border-radius: 999px; background: var(--a-line-2);
}
.artemis-sheet h3{
  margin: 0 0 10px; padding: 0 4px;
  font-family: var(--a-display);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--a-ink-3);
}
.artemis-sheet-list{ display: flex; flex-direction: column; gap: 2px; }
.artemis-sheet-empty{ margin: 0; padding: 8px 4px; color: var(--a-ink-3); font-size: 13px; }

.artemis-sheet-row{
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 10px;
  border: 0; border-radius: calc(12px * var(--a-radius-scale));
  background: transparent;
  color: var(--a-ink);
  font-family: var(--a-sans); font-size: 14px; text-align: left;
  cursor: pointer;
  transition: background .18s ease;
}
.artemis-sheet-row:hover{ background: var(--a-raised); }
.artemis-sheet-row .artemis-sheet-icon svg{ width: 18px; height: 18px; }
.artemis-sheet-row .artemis-dock-badge{
  position: static; margin-inline-start: auto;
}
.artemis-sheet-row.is-static,
.artemis-sheet-row.is-static:hover{ cursor: default; background: transparent; }

.artemis-sheet-icon{
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--a-raised);
  color: var(--a-accent);
  font-size: 13px;
}
.artemis-sheet-icon svg{ width: 16px; height: 16px; }

.artemis-sheet-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.artemis-sheet-body strong{ font-weight: 500; }
.artemis-sheet-body small{ color: var(--a-ink-3); font-size: 11.5px; }

.artemis-sheet-tick{ flex: 0 0 auto; color: var(--a-accent); opacity: 0; font-size: 15px; }
.artemis-sheet-row.is-active .artemis-sheet-tick{ opacity: 1; }
.artemis-sheet-row.is-active .artemis-sheet-icon{ background: var(--a-accent-2); }

/* The theme row shows the icon for the theme it will switch to. */
.artemis-sheet .a-moon{ display: none; }
.theme-dark .artemis-sheet .a-sun{ display: none; }
.theme-dark .artemis-sheet .a-moon{ display: block; }

/* Site health. Colour is the second signal; the text beside it is the first. */
.artemis-led{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--a-ink-3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-ink-3) 18%, transparent);
}
.artemis-sheet-row.state-ok    .artemis-led{ background: var(--a-accent); box-shadow: 0 0 0 3px var(--a-accent-2); }
.artemis-sheet-row.state-quiet .artemis-led,
.artemis-sheet-row.state-warn  .artemis-led{ background: var(--a-warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-warn) 18%, transparent); }
.artemis-sheet-row.state-down  .artemis-led{ background: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,.18); }

@media (min-width: 681px){
  .artemis-sheet{
    left: 50%; right: auto; bottom: 92px;
    width: min(420px, calc(100% - 40px));
    max-height: 60%;
    border: 1px solid var(--a-line);
    border-radius: 16px;
    transform: translate(-50%, 12px);
    opacity: 0;
    transition: transform .22s cubic-bezier(.3,.9,.3,1), opacity .22s ease;
  }
  .artemis-sheet.is-open{ transform: translate(-50%, 0); opacity: 1; }
}

/* ========================================================== responsive ====
   Phone, tablet, desktop. The portrait is the element that has to give way,
   so every breakpoint is really a decision about how much of it survives.
========================================================================== */

@media (max-width: 680px){
  .artemis-face{ width: min(70vw, 290px, 32vh); margin-top: clamp(6px, 2vh, 20px); }
  .artemis-stage:not(.is-empty) .artemis-face{ width: min(44vw, 150px, 20vh); }
}

/* A short landscape phone has no vertical room for a portrait at all. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape){
  .artemis-face{ width: 96px; margin-top: 6px; }
  .artemis-stage:not(.is-empty) .artemis-face{ width: 72px; }
  .artemis-face-wave, .artemis-face-core{ display: none; }
}

@media (min-width: 1080px){
  /* The desktop opening puts the greeting a third of the way down. With a
     portrait above it that padding has to go, or the face is pushed off. */
  .artemis-stage.has-avatar .artemis-greeting{ padding-top: 20px; }

  .artemis-face{ width: min(24vw, 250px, 26vh); margin-top: 2vh; }

  /* Bigger screen, bigger portrait: there is room to keep the character
     properly legible beside the conversation. */
  .artemis-stage:not(.is-empty) .artemis-face{ width: min(18vw, 200px, 26vh); }
}

@media (min-width: 1600px){
  .artemis-face{ width: min(360px, 40vh); }
  .artemis-stage:not(.is-empty) .artemis-face{ width: min(220px, 28vh); }
}

/* The thumbnail stays put while the thread scrolls under it — a character
   that scrolls away stops being present halfway through the conversation. */
.artemis-stage:not(.is-empty) .artemis-face{
  position: sticky;
  top: 6px;
  z-index: 6;
}
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape){
  .artemis-stage:not(.is-empty) .artemis-face{ position: relative; }
}

/* ========================================================= wide layout ====
   Above 1080 the interface stops being a column and becomes a room. The
   portrait fills it edge to edge; everything else is furniture placed
   against the four sides — the wordmark and the state along the top, the
   strapline and the rail down the left, the caption on the right, the
   field in the bottom corner.

   Nothing here is new machinery. The same nodes the phone uses are simply
   put somewhere else, so a persona skin, a shell or a translation still
   reaches all of it.
========================================================================== */

@media (min-width: 1080px){

  /* ---------- the frame ---------- */

  .artemis-topbar{
    position: absolute; top: 0; left: 0; right: 0; z-index: 30;
    padding: clamp(20px, 2.6vh, 34px) clamp(28px, 3vw, 56px);
    border-bottom: 0 !important;
    background: transparent !important;
  }
  .artemis-stage:not(.is-empty) .artemis-topbar{
    border-bottom: 0 !important;
    background: transparent !important;
  }

  .artemis-brand{ gap: 14px; }
  .artemis-brandmark{
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0;
    color: var(--a-accent);
  }
  .artemis-brandmark svg{ width: 100%; height: 100%; }
  .artemis-brand .artemis-dot{ display: none; }
  .artemis-brand-name{ font-size: 15px; letter-spacing: .42em; font-weight: 500; }

  /* The state, top right. A dot that leads while Artemis is working and
     trails while it is not, which is the difference between "listen" and
     "nothing to report". */
  .artemis-statuschip{
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0; z-index: 30;
  }
  .artemis-statuschip .artemis-state{
    display: block; order: 1;
    border: 0; padding: 0; background: none;
    font-family: var(--a-sans);
    font-size: 11.5px; font-weight: 500; letter-spacing: .26em;
    text-transform: uppercase; color: var(--a-accent);
  }
  .artemis-statusdot{
    order: 2; width: 7px; height: 7px; border-radius: 50%;
    background: var(--a-accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--a-accent) 80%, transparent);
  }
  .artemis-stage.state-thinking .artemis-statusdot,
  .artemis-stage.state-speaking .artemis-statusdot,
  .artemis-stage.state-listening .artemis-statusdot{
    order: 0;
    animation: a-chip-blink 1.4s ease-in-out infinite;
  }
  @keyframes a-chip-blink{ 0%,100%{ opacity: 1; } 50%{ opacity: .28; } }

  .artemis-statuswave{
    order: 3; display: none; align-items: center; gap: 2px; height: 14px;
  }
  .artemis-statuswave i{
    width: 2px; height: 30%; border-radius: 2px; background: var(--a-accent);
    animation: a-wave 1s ease-in-out infinite;
  }
  .artemis-statuswave i:nth-child(2){ animation-delay: .1s; }
  .artemis-statuswave i:nth-child(3){ animation-delay: .22s; }
  .artemis-statuswave i:nth-child(4){ animation-delay: .34s; }
  .artemis-statuswave i:nth-child(5){ animation-delay: .16s; }
  .artemis-stage.state-thinking .artemis-statuswave,
  .artemis-stage.state-speaking .artemis-statuswave{ display: flex; }

  /* The rail carries the tools, so the menu key and the duplicated top-bar
     buttons stand down. Without a rail they are the only way in and stay. */
  .artemis-stage.has-dock .artemis-menu,
  .artemis-stage.has-dock .artemis-tools{ display: none; }

  /* ---------- the persona row ----------
     In the column layout the chips sit in the flow under the header. Here
     the header is absolute, so left in the flow they land underneath it and
     push the whole room down by their own height. Centred over the top of
     the portrait they read as what they are: a way to change who you are
     talking to, above the person you are talking to. */

  .artemis-personas{
    position: absolute; z-index: 31;
    top: clamp(66px, 8.5vh, 96px);
    left: 50%; transform: translateX(-50%);
    max-width: min(62vw, 720px);
    padding: 0; gap: 8px;
    justify-content: flex-start;
  }
  .artemis-persona{
    background: color-mix(in srgb, var(--a-surface) 82%, transparent);
    border-color: color-mix(in srgb, var(--a-accent) 18%, transparent);
    backdrop-filter: blur(8px);
  }

  /* ---------- the strapline, down the left ---------- */

  .artemis-strapline{
    display: block;
    position: absolute; z-index: 25;
    top: clamp(96px, 13vh, 150px);
    inset-inline-start: clamp(28px, 3vw, 56px);
    width: 7ch; margin: 0;
    font-size: 11.5px; font-weight: 500; line-height: 1.75;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--a-ink-2);
  }
  .artemis-strapline::after{
    content: ""; display: block;
    width: 26px; height: 2px; margin-top: 14px;
    background: var(--a-accent);
  }

  /* ---------- the rail ---------- */

  .artemis-stage.has-dock .artemis-dock{
    position: absolute; z-index: 35;
    inset-inline-start: clamp(28px, 3vw, 56px);
    top: 50%; transform: translateY(-50%);
    width: auto; margin: 0; padding: 0;
    flex-direction: column; align-items: center; gap: 12px;
    order: 0;
  }
  .artemis-dock::before{ display: none; }
  .artemis-dock-side{ flex-direction: column; align-items: center; gap: 12px; flex: 0 0 auto; }
  .artemis-dock-side:last-child{ justify-content: flex-start; }
  .artemis-dock-core{ display: none; }

  .artemis-dock-btn{
    width: 44px; height: 44px;
    border-radius: calc(14px * var(--a-radius-scale));
    border-color: color-mix(in srgb, var(--a-accent) 22%, transparent);
    background: color-mix(in srgb, var(--a-surface) 85%, transparent);
    color: var(--a-ink-2);
  }
  .artemis-dock-btn svg{ width: 18px; height: 18px; }
  .artemis-dock-btn:hover,
  .artemis-dock-btn:focus-visible{ background: var(--a-surface); }

  /* Labels move to the side of the rail rather than above it. */
  .artemis-dock-btn span{
    bottom: auto; top: 50%;
    inset-inline-start: calc(100% + 10px); left: auto;
    transform: translateY(-50%) translateX(-4px);
  }
  .artemis-dock-btn:hover span,
  .artemis-dock-btn:focus-visible span{ transform: translateY(-50%); }
  .artemis-dock-badge{ top: -4px; inset-inline-end: -4px; }

  /* ---------- the room ---------- */

  .artemis-canvas{
    position: relative;
    flex: 1; min-height: 0;
    display: block;
    overflow: hidden;
    padding: 0;
  }

  /* The portrait is the room, not an element in it. */
  .artemis-stage.has-avatar .artemis-face{
    position: absolute; z-index: 5;
    top: 0; bottom: 0; left: 50%;
    width: auto; margin: 0;
    transform: translateX(-50%);
    transition: transform .7s cubic-bezier(.3,.9,.3,1), opacity .7s ease;
  }
  .artemis-stage.has-avatar .artemis-face-frame{
    width: auto; height: 100%;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    /* Masked on every side, so the image sits in the page in both themes
       instead of being a rectangle laid on top of it. */
    /* Two masks, intersected: the ellipse softens the sides, the vertical
       fade dissolves the bottom. The second one matters because most avatar
       images have a hard edge of their own down there, and without it that
       edge draws a line across the room. */
    -webkit-mask-image: radial-gradient(closest-side at 50% 44%,
        #000 58%, rgba(0,0,0,.65) 84%, transparent 100%),
      linear-gradient(to bottom, #000 58%, rgba(0,0,0,.35) 88%, transparent 100%);
            mask-image: radial-gradient(closest-side at 50% 44%,
        #000 58%, rgba(0,0,0,.65) 84%, transparent 100%),
      linear-gradient(to bottom, #000 58%, rgba(0,0,0,.35) 88%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  .artemis-face-layer{ object-position: 50% 22%; }
  .artemis-face-glow{ inset: 4% 12%; filter: blur(60px); opacity: .55; }
  /* The uploaded portrait has a core of its own, drawn into the image. Ours
     would sit next to it as a second one, so it stands down here. */
  .artemis-stage.has-avatar .artemis-face-core,
  .artemis-face-wave{ display: none; }

  /* Same reasoning for the ambient rings: behind a full-height portrait they
     are no longer ambient, they are a second subject. */
  .artemis-stage.has-avatar .artemis-field{ opacity: .3; }

  /* Once there is something to read, the portrait steps aside rather than
     shrinking — the column of text needs the right half of the room. */
  .artemis-stage.has-avatar:not(.is-empty) .artemis-face{
    transform: translateX(-50%) translateX(-16vw);
    opacity: .72;
  }
  .artemis-stage.has-avatar:not(.is-empty) .artemis-face-glow{ opacity: .35; }

  /* A scrim under the text column, or a portrait behind it wins every
     legibility argument. */
  .artemis-canvas::after{
    content: ""; position: absolute; inset: 0; z-index: 6;
    pointer-events: none; opacity: 0;
    transition: opacity .7s ease;
    background: linear-gradient(to left,
      var(--a-bg) 12%,
      color-mix(in srgb, var(--a-bg) 82%, transparent) 34%,
      transparent 62%);
  }
  .artemis-stage:not(.is-empty) .artemis-canvas::after{ opacity: 1; }

  /* ---------- the caption on the right ---------- */

  .artemis-greeting{
    position: absolute; z-index: 20;
    top: 34%; inset-inline-end: clamp(28px, 3vw, 56px);
    width: 11ch; max-width: none; margin: 0; padding: 0;
    text-align: start;
    transition: opacity .4s ease;
  }
  .artemis-greeting h2{ display: none; }
  .artemis-greeting p{
    margin: 0;
    font-size: 12.5px; line-height: 1.75; color: var(--a-ink-2);
  }
  /* The caption and the state occupy the same slot; only one is ever true. */
  .artemis-stage.state-thinking .artemis-greeting,
  .artemis-stage.state-speaking .artemis-greeting,
  .artemis-stage.state-listening .artemis-greeting,
  .artemis-stage:not(.is-empty) .artemis-greeting{
    opacity: 0; pointer-events: none;
  }

  .artemis-rule,
  .artemis-suggestions{ display: none; }

  .artemis-statusline{
    position: absolute; z-index: 20;
    top: 34%; inset-inline-end: clamp(28px, 3vw, 56px);
    width: 11ch; margin: 0;
    align-items: flex-start; gap: 12px;
    font-size: 12.5px; line-height: 1.6;
  }
  .artemis-statusline-wave{ width: 100%; justify-content: flex-start; gap: 4px; height: 20px; }
  .artemis-statusline-wave i{ height: 26%; }

  /* ---------- the conversation, in the right half ---------- */

  .artemis-thread{
    position: absolute; z-index: 20;
    inset-inline-end: clamp(28px, 3vw, 56px);
    /* Clear of the state line above it, which is taller than it looks once
       the level meter is running underneath the sentence. */
    top: clamp(142px, 19vh, 200px);
    bottom: clamp(104px, 14vh, 140px);
    width: min(44vw, 560px);
    max-width: none;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 16px;
  }
  .artemis-thread::-webkit-scrollbar{ width: 5px; }
  .artemis-thread::-webkit-scrollbar-thumb{ background: var(--a-line-2); border-radius: 5px; }
  .artemis-thread::-webkit-scrollbar-track{ background: transparent; }
  .artemis-scrollpad{ display: none; }

  /* With the thread in that column, the state sits at the head of it. */
  .artemis-stage:not(.is-empty) .artemis-statusline{
    top: clamp(78px, 10vh, 120px);
    width: min(44vw, 560px);
  }
  .artemis-stage:not(.is-empty) .artemis-statusline-wave{ max-width: 220px; }

  /* A site with more than one persona has a chip row across the top, and the
     column below has to start under it rather than through it. Asked of the
     stage rather than hardcoded, so a single-persona site keeps the taller
     column it is entitled to. */
  .artemis-stage:has(.artemis-personas):not(.is-empty) .artemis-statusline{
    top: clamp(110px, 15vh, 152px);
  }
  .artemis-stage:has(.artemis-personas):not(.is-empty) .artemis-thread{
    top: clamp(174px, 23vh, 232px);
  }

  .artemis-msg{ gap: 12px; }
  .artemis-avatar{ width: 36px; height: 36px; }
  .artemis-bubble{
    padding: 14px 17px 10px;
    backdrop-filter: blur(6px);
    background: color-mix(in srgb, var(--a-surface) 88%, transparent);
  }
  .artemis-msg.is-artemis .artemis-bubble{ font-size: 15.5px; line-height: 1.8; }

  .artemis-jump{
    bottom: clamp(104px, 14vh, 140px);
    inset-inline-end: clamp(28px, 3vw, 56px);
  }

  /* ---------- the field, bottom corner ---------- */

  .artemis-composer{
    position: absolute; z-index: 22;
    inset-inline-end: clamp(28px, 3vw, 56px);
    bottom: clamp(24px, 4vh, 44px);
    inset-inline-start: auto;
    width: auto; padding: 0; background: none;
    order: 0;
  }
  .artemis-stage.has-dock .artemis-composer{ padding-bottom: 0; }

  /* At rest it is a microphone with a level beside it. It opens into a field
     when you touch it, and stays open once there is a conversation to add
     to — which is the only time an empty box is worth the space. */
  .artemis-inputbar{
    width: 240px; max-width: none; margin: 0;
    padding: 7px; gap: 4px;
    border-radius: 999px;
    align-items: center;
    transition: width .45s cubic-bezier(.3,.9,.3,1),
                border-color .25s ease, box-shadow .25s ease;
  }
  .artemis-inputbar textarea{
    flex: 0 0 0; width: 0; min-width: 0; padding: 0;
    opacity: 0;
    transition: opacity .25s ease;
  }
  .artemis-inputbar .artemis-send{ display: none; }

  .artemis-inputmeter{
    display: flex; align-items: center; justify-content: flex-start;
    flex: 1; gap: 3px; height: 18px; padding-inline-end: 8px;
    overflow: hidden;
  }
  .artemis-inputmeter i{
    flex: 0 0 2px; height: 26%; border-radius: 2px;
    background: var(--a-ink-3); opacity: .65;
  }
  /* A fixed silhouette while nothing is happening — a flat row of dots reads
     as a disabled control rather than a resting one. */
  .artemis-inputmeter i:nth-child(3n)  { height: 55%; }
  .artemis-inputmeter i:nth-child(4n)  { height: 80%; }
  .artemis-inputmeter i:nth-child(5n)  { height: 40%; }
  .artemis-inputmeter i:nth-child(7n)  { height: 96%; }
  .artemis-stage.state-speaking .artemis-inputmeter i,
  .artemis-stage.state-listening .artemis-inputmeter i{
    background: var(--a-accent);
    animation: a-wave 1s ease-in-out infinite;
  }
  .artemis-inputmeter i:nth-child(3n)  { animation-delay: .12s; }
  .artemis-inputmeter i:nth-child(3n+1){ animation-delay: .26s; }
  .artemis-inputmeter i:nth-child(4n)  { animation-delay: .38s; }

  .artemis-mic{
    width: 42px; height: 42px;
    border: 1px solid color-mix(in srgb, var(--a-accent) 55%, transparent);
    color: var(--a-accent);
  }
  .artemis-mic:hover{
    background: var(--a-accent-2);
    color: var(--a-accent);
  }

  /* open */
  .artemis-stage:not(.is-empty) .artemis-inputbar,
  .artemis-inputbar:focus-within,
  .artemis-inputbar.is-open{
    width: min(44vw, 560px);
    padding: 7px 7px 7px 10px;
  }
  .artemis-stage:not(.is-empty) .artemis-inputbar textarea,
  .artemis-inputbar:focus-within textarea,
  .artemis-inputbar.is-open textarea{
    flex: 1; width: auto; opacity: 1; padding: 10px 6px;
  }
  .artemis-stage:not(.is-empty) .artemis-inputbar .artemis-send,
  .artemis-inputbar:focus-within .artemis-send,
  .artemis-inputbar.is-open .artemis-send{ display: flex; }
  .artemis-stage:not(.is-empty) .artemis-inputmeter,
  .artemis-inputbar:focus-within .artemis-inputmeter,
  .artemis-inputbar.is-open .artemis-inputmeter{ display: none; }

  /* ---------- light ---------- */

  .artemis-stage:not(.theme-dark) .artemis-bubble{
    box-shadow: 0 10px 30px -24px var(--a-shadow-2);
  }
  .artemis-stage:not(.theme-dark) .artemis-inputbar{
    box-shadow: 0 10px 30px -20px var(--a-shadow-2);
  }
}

/* A short desktop window cannot afford the full-height portrait. */
@media (min-width: 1080px) and (max-height: 700px){
  .artemis-strapline{ top: 86px; }
  .artemis-statusline{ top: 30%; }
  .artemis-stage:not(.is-empty) .artemis-statusline{ top: 68px; }
  .artemis-thread{ top: 128px; bottom: 94px; }
}

/* ================================================================ shells ===
   Colour can only go so far. A persona that recolours still reads as the
   same interface in a different jacket, because the shape of the thing —
   the technical labels, the thread spine, the way the portrait shrinks to a
   dot the moment you speak — is what actually says "software".

   A shell changes that shape. It is a class on the stage, so it can override
   anything above without any component knowing shells exist.
========================================================================== */

/* ---------------------------------------------------------------- soft ---
   A companion rather than a tool. The face stays. Nothing announces its
   own machinery. Everything is slower, wider, quieter.
-------------------------------------------------------------------------- */

/* The single biggest change: the portrait does not shrink away. Watching
   the face collapse to a dot the instant you speak is what breaks the
   feeling that someone is there. */
.artemis-stage.shell-soft:not(.is-empty) .artemis-face{
  width: min(46vw, 190px);
  margin: 18px auto 4px;
  position: sticky;
  top: 8px;
}
.artemis-stage.shell-soft:not(.is-empty) .artemis-face-frame{
  aspect-ratio: 1;
  border-radius: 50%;
}
.artemis-stage.shell-soft:not(.is-empty) .artemis-face-core{ opacity: .8; }
.artemis-stage.shell-soft .artemis-face-glow{ filter: blur(34px); }

/* No technical chrome. The state code, the monospace timestamps and the
   uppercase letterspacing all read as instrumentation. */
.artemis-stage.shell-soft .artemis-state,
.artemis-stage.shell-soft .artemis-msg-meta,
.artemis-stage.shell-soft .artemis-dot{ display: none; }

.artemis-stage.shell-soft .artemis-brand-name{
  font-family: var(--a-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.artemis-stage.shell-soft .artemis-topbar{
  justify-content: center;
  border-bottom: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
.artemis-stage.shell-soft .artemis-tools{ position: absolute; right: 16px; }

/* Both sides get a bubble. The asymmetry of the standard thread — you in a
   box, Artemis as bare measured text — is a reading layout. A conversation
   wants two voices of equal weight. */
.artemis-stage.shell-soft .artemis-thread{
  max-width: 560px;
  gap: 18px;
  padding-left: 0;
}
.artemis-stage.shell-soft .artemis-thread::before{ display: none; }
.artemis-stage.shell-soft .artemis-msg::before{ display: none; }

.artemis-stage.shell-soft .artemis-msg.is-artemis .artemis-bubble{
  max-width: min(86%, 480px);
  padding: 15px 20px;
  background: var(--a-surface);
  border: 1px solid var(--a-line);
  border-inline-start: 1px solid var(--a-line);
  border-radius: calc(22px * var(--a-radius-scale)) calc(22px * var(--a-radius-scale))
                 calc(22px * var(--a-radius-scale)) calc(7px * var(--a-radius-scale));
  padding-inline-start: 20px;
  font-size: 16px;
  line-height: 1.95;
  box-shadow: 0 2px 14px -8px var(--a-shadow);
}
.artemis-stage.shell-soft .artemis-msg.is-user .artemis-bubble{
  background: var(--a-accent-2);
  border-color: transparent;
  font-size: 15.5px;
  line-height: 1.8;
}

/* Softer, slower entrances. A companion should not snap. */
.artemis-stage.shell-soft .artemis-word{ animation-duration: .5s; }
.artemis-stage.shell-soft .artemis-bubble{ transition: opacity .5s ease; }

.artemis-stage.shell-soft .artemis-inputbar{
  border-radius: 999px;
  padding: 10px 10px 10px 20px;
}
.artemis-stage.shell-soft .artemis-inputbar textarea{
  font-size: 15.5px;
}

/* The greeting stops shouting. */
.artemis-stage.shell-soft .artemis-greeting h2{
  font-family: var(--a-sans);
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -.01em;
}
.artemis-stage.shell-soft .artemis-greeting p{ font-size: 14px; }

@media (min-width: 1080px){
  /* The desktop rail and spine are both instrumentation. Off. */
  .artemis-stage.shell-soft .artemis-thread{
    padding-left: 0;
    max-width: 600px;
  }
  .artemis-stage.shell-soft.has-avatar .artemis-greeting{ padding-top: 12px; }
  .artemis-stage.shell-soft:not(.is-empty) .artemis-face{ width: 210px; }
}

@media (max-width: 680px){
  .artemis-stage.shell-soft:not(.is-empty) .artemis-face{ width: min(42vw, 140px); }
}

/* A short landscape phone cannot afford a persistent portrait either way. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape){
  .artemis-stage.shell-soft:not(.is-empty) .artemis-face{
    width: 74px; position: relative; margin: 8px auto 0;
  }
}

/* ---------------------------------------------------------------- bare ---
   Everything that is not the words, removed. For a persona whose whole
   point is that you forget you are using an interface.
-------------------------------------------------------------------------- */

.artemis-stage.shell-bare .artemis-topbar,
.artemis-stage.shell-bare .artemis-state,
.artemis-stage.shell-bare .artemis-dot,
.artemis-stage.shell-bare .artemis-msg-meta,
.artemis-stage.shell-bare .artemis-avatar,
.artemis-stage.shell-bare .artemis-bubble-foot,
.artemis-stage.shell-bare .artemis-rule,
.artemis-stage.shell-bare .artemis-suggestions,
.artemis-stage.shell-bare .artemis-personas{ display: none; }

.artemis-stage.shell-bare .artemis-thread{
  max-width: 620px;
  gap: 34px;
  padding-left: 0;
}
.artemis-stage.shell-bare .artemis-thread::before,
.artemis-stage.shell-bare .artemis-msg::before{ display: none; }

.artemis-stage.shell-bare .artemis-msg.is-user .artemis-bubble{
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--a-ink-3);
  font-size: 15px;
}
.artemis-stage.shell-bare .artemis-msg.is-artemis .artemis-bubble{
  border-inline-start: 0;
  padding-inline-start: 0;
  font-size: 17.5px;
  line-height: 1.95;
}

.artemis-stage.shell-bare .artemis-inputbar{
  border: 0;
  background: transparent;
  box-shadow: none;
  border-top: 1px solid var(--a-line);
  border-radius: 0;
}

.artemis-stage.shell-bare:not(.is-empty) .artemis-face{ width: 54px; opacity: .7; }