/* --- Dock façon Gather -------------------------------------------------------------------------
   Chaque bouton rond a un fond, même au repos : on voit où cliquer. Micro et caméra sont des
   boutons groupés (dock-media.js) : une pilule, l'appareil puis son chevron, séparés d'un fin trait.
   Allumés, ils sont teintés de vert ; coupés, ils restent neutres, l'icône grisée barrée de rouge.
   La sortie (« Aller à mon bureau », en conversation ou en réunion) est rouge, au bout du dock. */

.dock {
  --btn-bg: var(--fill);
  --btn-hover: var(--fill-2);
  --live-bg: rgba(52, 199, 89, 0.16);
  --live-hover: rgba(52, 199, 89, 0.26);
  --live-text: var(--green-text);
}
:root[data-theme="dark"] .dock {
  --live-bg: rgba(52, 199, 89, 0.2);
  --live-hover: rgba(52, 199, 89, 0.3);
  /* (Un vert très clair : lisible sur la pilule comme sur la vague de la voix.) */
  --live-text: #a3eeb6;
}
.dock .dock-btn:not(.dock-me, .cowork-pill) {
  background: var(--btn-bg);
}
.dock .dock-btn:not(.dock-me, .cowork-pill):hover {
  background: var(--btn-hover);
}
.dock .dock-btn.active {
  --btn-bg: var(--fill-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
/* Ce qui est en direct (partage d'écran) : la même teinte verte que le micro allumé. */
.dock .dock-btn.on-air {
  --btn-bg: var(--live-bg);
  --btn-hover: var(--live-hover);
  color: var(--live-text);
}
.dock .dock-btn.raised {
  --btn-bg: var(--yellow);
  --btn-hover: #f2c200;
}

/* Bouton groupé : la pilule entière s'enfonce sous le doigt, pas seulement la moitié touchée. */
.dock-group {
  display: flex;
  height: 46px;
  border-radius: var(--r-pill);
  transition: transform var(--dur-slow) var(--ease-spring);
}
.dock-group:has(.dock-btn:active) {
  transform: scale(0.94);
  transition-duration: var(--dur-press);
  transition-timing-function: var(--ease-out);
}
.dock .dock-group .dock-btn {
  height: 46px;
  min-width: 0;
  padding: 0;
  transform: none;
}
.dock .dock-group .dock-media {
  width: 52px;
  border-radius: 23px 0 0 23px;
  padding-left: 3px;
}
.dock .dock-group .dock-chevron {
  width: 28px;
  border-radius: 0 23px 23px 0;
  padding-right: 3px;
}
/* Le fin séparateur, de la couleur de l'icône. */
.dock-group .dock-chevron::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 1px;
  background: currentColor;
  opacity: 0.2;
}
.dock-group .dock-chevron svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-slow) var(--ease-spring);
}
/* Menu ouvert : le chevron se retourne vers le bas ; un nouveau clic referme le menu (ui.js). */
.dock-group .dock-chevron[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.dock-group.on {
  --btn-bg: var(--live-bg);
  --btn-hover: var(--live-hover);
}
.dock-group.on .dock-btn {
  color: var(--live-text);
}
.dock-group.off .dock-btn {
  color: var(--text-2);
}
.dock-group .slash {
  stroke: var(--red);
  stroke-width: 1.75;
}
.dock-group.locked .dock-media {
  opacity: 0.55;
  cursor: not-allowed;
}
/* Au clavier : l'anneau du focus dans la moitié qui l'a (l'autre la toucherait). */
.dock-group .dock-btn:focus-visible {
  outline-offset: -3px;
}

/* --- La voix : une vague dans la pilule du micro ----------------------------------------------
   Quand on parle, une eau claire monte au fond de la pilule, sous l'icône et le chevron : plus la
   voix est forte, plus elle est haute et agitée (--mic-level, de 0 à 1 : showMicLevel,
   dock-media.js). Deux houles roulent en sens contraires ; au silence (data-level="0"), l'eau
   redescend et s'arrête : rien ne tourne pour rien. Seulement des déplacements et des
   agrandissements, que la carte graphique fait seule. */
.dock {
  --water-1: rgba(120, 230, 140, 0.55);
  --water-2: rgba(120, 230, 140, 0.32);
}
:root[data-theme="dark"] .dock {
  --water-1: rgba(120, 230, 140, 0.32);
  --water-2: rgba(120, 230, 140, 0.2);
}
.dock-group[data-key="mic-group"] {
  position: relative;
  isolation: isolate;
}
.voice {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
.dock-group.off .voice {
  display: none;
}
.dock-group[data-level="0"] .voice {
  opacity: 0;
}
.water {
  position: absolute;
  inset: 0;
  transform: translateY(calc(100% - var(--mic-level, 0) * 58%));
  transition: transform 240ms var(--ease-out);
}
/* Une houle : sa crête (un motif d'une longueur d'onde, --len) puis l'eau pleine en dessous. Elle
   roule d'une longueur d'onde par tour ; la voix creuse ses crêtes (scale, depuis leur pied). */
.water i {
  --len: 24px;
  position: absolute;
  left: 0;
  top: -8px;
  bottom: 0;
  width: calc(100% + var(--len));
  background: var(--water-1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4C2 2.3 4 1 6 1s4 1.3 6 3 4 3 6 3 4-1.3 6-3v4H0Z'/%3E%3C/svg%3E") 0 0 / var(--len) 8px repeat-x, linear-gradient(#000 0 0) 0 8px / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4C2 2.3 4 1 6 1s4 1.3 6 3 4 3 6 3 4-1.3 6-3v4H0Z'/%3E%3C/svg%3E") 0 0 / var(--len) 8px repeat-x, linear-gradient(#000 0 0) 0 8px / 100% 100% no-repeat;
  transform-origin: 50% 8px;
  scale: 1 calc(0.5 + var(--mic-level, 0) * 1.1);
  animation: voice-roll 1.8s linear infinite;
  transition: scale 240ms var(--ease-out);
}
.water i + i {
  --len: 34px;
  background: var(--water-2);
  scale: 1 calc(0.4 + var(--mic-level, 0) * 1.5);
  animation-duration: 2.6s;
  animation-direction: reverse;
}
.dock-group[data-level="0"] .water i {
  animation-play-state: paused;
}
@keyframes voice-roll {
  to {
    translate: calc(-1 * var(--len)) 0;
  }
}

/* --- La sortie : « Aller à mon bureau » en conversation ou en réunion ------------------------- */
.dock .dock-btn.exit {
  --btn-bg: var(--red);
  --btn-hover: #c8434f;
  color: #fff;
}

/* --- Téléphone -----------------------------------------------------------------------------------
   La carte personnelle est montée au-dessus du dock (lane.js) ; les boutons se resserrent. S'il
   reste trop large (en conversation, avec tous ses boutons), le dock se réduit d'un rien pour
   tenir dans l'écran (--dock-scale, layout dans ui.js) au lieu de déborder. */
.dock {
  transform: translateX(-50%) scale(var(--dock-scale, 1));
  transform-origin: 50% 100%;
  transition: left var(--slide), transform var(--dur-base) var(--ease-out);
}
@media (max-width: 479.98px) {
  :root {
    --dock-h: 56px;
  }
  .dock {
    gap: 4px;
    padding: 6px;
  }
  .dock .sep {
    margin: 0 1px;
  }
  .dock .dock-btn:not(.dock-me),
  .dock .dock-group,
  .dock .dock-group .dock-btn {
    height: 42px;
  }
  .dock .dock-btn:not(.dock-me, .cowork-pill, .dock-group .dock-btn) {
    width: 42px;
    min-width: 42px;
  }
  .dock .dock-group .dock-media {
    width: 44px;
    border-radius: 21px 0 0 21px;
  }
  .dock .dock-group .dock-chevron {
    width: 24px;
    border-radius: 0 21px 21px 0;
  }
  .dock-group .dock-chevron::before {
    top: 12px;
    bottom: 12px;
  }
}

/* Mouvement réduit : la vague ne roule plus (elle monte et descend toujours avec la voix). */
@media (prefers-reduced-motion: reduce) {
  .water i {
    animation: none;
  }
}

/* --- Ce qui pousse à côté de son personnage (ui.js, island) -----------------------------------
   La réunion qui approche, des messages, Smappy, quelqu'un qui frappe : un bouton chacun, avec un
   visage ou une icône et des mots (jamais la couleur seule). Il pousse en douceur, le dock
   s'élargit avec lui ; deux au plus, puis « +N ». */
.dock .island {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dock .island.empty {
  display: none;
}
.island-chip {
  display: flex;
  align-items: center;
  flex: none;
  height: 46px;
  max-width: 340px;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  box-shadow: inset 0 0 0 1px var(--hairline);
  overflow: hidden;
}
.island-chip.arriving {
  animation: island-in 0.6s var(--ease-spring) backwards;
}
@keyframes island-in {
  from {
    max-width: 0;
    opacity: 0;
  }
}
.island-main {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  min-width: 0;
  padding: 0 14px 0 6px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--fs-sub);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.island-main:hover {
  background: var(--btn-hover);
}
.island-main b {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.island-when,
.island-more {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.island-more {
  font-weight: 700;
}
/* Un visage (qui vous a écrit, qui frappe) ou une icône sur une pastille teintée. */
.island-face,
.island-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
}
.island-face {
  background: var(--fill-2);
}
.island-face canvas {
  border-radius: 50%;
}
.island-ic {
  background: var(--tint, var(--accent));
  color: #ffffff;
}
/* (L'icône à sa taille, sans la marge du texte autour : elle tombe au milieu de sa pastille.) */
.island-ic .ic,
.island-ic svg {
  width: 18px;
  height: 18px;
}
.island-go {
  flex: none;
  height: 34px;
  margin: 0 6px 0 -6px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-size: var(--fs-sub);
  font-weight: 600;
  cursor: pointer;
}
.island-go:hover {
  filter: brightness(1.08);
}
.island-chip.more {
  justify-content: center;
  min-width: 46px;
  padding: 0 12px;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: var(--fs-sub);
  font-weight: 700;
  cursor: pointer;
}
.island-chip.more:hover {
  background: var(--btn-hover);
}
.island-menu .menu-item .island-face,
.island-menu .menu-item .island-ic {
  width: 26px;
  height: 26px;
}
.island-menu .menu-item .island-ic .ic,
.island-menu .menu-item .island-ic svg {
  width: 15px;
  height: 15px;
}
.island-menu-text {
  white-space: nowrap;
}
.island-chip :focus-visible,
.island-chip.more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* Téléphone sorti : il dit déjà tout (son nom, son statut, ses messages, sa prochaine réunion).
   Le dock se resserre (sa carte : l'avatar et le petit téléphone, qui garde son chiffre ; à côté,
   seulement ce qui se fait d'un clic : Rejoindre, répondre à qui frappe), pour laisser au téléphone
   sa place à côté de la carte, même en conversation. */
.app.phone-out .dock .dock-btn.dock-me {
  padding-right: 8px;
}
.app.phone-out .dock .dock-me .me-card-name,
.app.phone-out .island-chip.chat,
.app.phone-out .island-chip.agents,
.app.phone-out .island-chip.more {
  display: none;
}
.app.phone-out .island-main {
  padding-right: 6px;
}
.app.phone-out .island-main > :not(.island-face, .island-ic) {
  display: none;
}
/* Écran étroit : le visage ou l'icône, et Rejoindre ; les mots au survol et pour les lecteurs
   d'écran. */
@media (max-width: 720px) {
  .island-main {
    padding-right: 6px;
  }
  .island-main > :not(.island-face, .island-ic) {
    display: none;
  }
}

/* Ce qui vient d'arriver, ouvert au-dessus de son personnage quelques secondes : qui, quoi, et de
   quoi répondre ; il grandit depuis le personnage et s'y range. */
.island-card {
  position: absolute;
  /* (Comme les notifications : au-dessus des vignettes et de la vue réunion, sous les fenêtres.) */
  z-index: 25;
  width: min(380px, calc(100vw - 2 * var(--edge)));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 12px;
  padding: 14px 12px 14px 14px;
  border-radius: 26px;
  background: var(--glass-strong);
  transform-origin: var(--from-x, 34px) 100%;
  /* (Elle suit sa carte personnelle quand le dock s'élargit ou se recentre.) */
  transition: left var(--dur-slow) var(--ease-sheet), bottom var(--dur-slow) var(--ease-sheet);
}
/* Écran étroit, téléphone sorti par-dessus la carte : elle passe sous le téléphone plutôt que de
   cacher son dock ; ce qu'elle dit y est déjà (widget Messages, Agenda), et son bouton reste à côté
   du personnage. */
.app.panel-over.phone-out .island-card {
  z-index: 8;
}
.island-card.in {
  animation: island-card-in 0.5s var(--ease-spring) backwards;
}
.island-card.leaving {
  animation: island-card-out 0.18s var(--ease-in) forwards;
  pointer-events: none;
}
@keyframes island-card-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.3);
  }
}
@keyframes island-card-out {
  to {
    opacity: 0;
    transform: translateY(12px) scale(0.6);
  }
}
.island-card .island-face.big,
.island-card .island-ic.big {
  width: 44px;
  height: 44px;
  grid-row: span 2;
}
.island-card .island-ic.big .ic,
.island-card .island-ic.big svg {
  width: 22px;
  height: 22px;
}
.island-card-text {
  min-width: 0;
  padding-top: 2px;
}
.island-card-text.openable {
  cursor: pointer;
}
.island-card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.island-card-head b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.island-card-head small {
  flex: none;
  color: var(--text-3);
  font-size: var(--fs-caption);
}
.island-card p {
  margin: 3px 0 0;
  color: var(--text-2);
  font-size: var(--fs-sub);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.island-card-close {
  grid-column: 3;
  grid-row: 1;
}
.island-card-actions {
  grid-column: 2 / 4;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .island-chip.arriving,
  .island-card.in,
  .island-card.leaving {
    animation: none;
  }
}