/* call-modes.css */
.call-modal-shell {
  position: absolute !important;
  inset: 0;
  margin: auto;
  pointer-events: auto;
  transition: width var(--call-transition), height var(--call-transition), border-radius var(--call-transition), transform var(--call-transition), opacity var(--call-transition), top var(--call-transition), left var(--call-transition);
  overflow: visible;
  background: var(--muted);
  width: 100%;
  height: 100%;
  border-radius: var(--call-radius);
  place-self: anchor-center;
  align-self: anchor-center;
  justify-self: anchor-center;
  box-shadow: var(--call-shadow);
}

/* Tiny FAB (Item 9) */
.call-modal-tiny {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  box-shadow: var(--call-shadow);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--call-bg);
  border: 2px solid transparent; /* controlled by voice glow */
  transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out, transform var(--call-transition);
}
.call-modal-tiny:active { cursor: grabbing; }
.call-modal-tiny.is-speaking {
  border-color: var(--call-speaking-glow);
  box-shadow: 0 0 16px var(--call-speaking-glow);
}
.call-modal-tiny .tiny-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}

/* Small Window */
.call-modal-small {
  width: 320px;
  height: 240px;
  border-radius: var(--call-radius);
  box-shadow: var(--call-shadow);
  border: 1px solid var(--call-border);
  display: flex;
  flex-direction: column;
}
.call-modal-small .small-header {
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.4);
  cursor: grab;
  flex-shrink: 0;
}
.call-modal-small .small-header:active { cursor: grabbing; }
.call-modal-small .small-stage {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
}
.call-modal-small .small-stage .split-pane {
  flex: 1;
  position: relative;
  border-right: 1px solid var(--call-border);
}
.call-modal-small .small-stage .split-pane:last-child { border-right: none; }
.call-modal-small .small-footer {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}

/* Medium View */
.call-modal-medium {
  width: 800px;
  height: 600px;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 30px;
  box-shadow: var(--call-shadow);
  border: 1px solid var(--call-border);
  position: relative;
  /* background: var(--call-bg); */
  /* Centering handled natively by root Flexbox (.call-manager-overlay) */
}

/* Full Screen View */
.call-modal-full {
  width: 100vw;
  height: 100vh;
  top: 0 !important;
  left: 0 !important;
  border-radius: 0;
  border: none;
  background: #000;
  box-shadow: none;
}