/* style/clippy.css - the Office Assistant.

   Its own file rather than a block in 2000.css, so this work and the Ableton
   skin do not sit in the same diff.

   8500 is the whole point of the layer: above every window (wm.js starts at
   100 and counts up) and below the taskbar at 9000, the Start menu at 9500,
   the modal layer at 9800 and boot at 10000. A dialog stays answerable. */

#clippy {
  position: fixed;
  inset: 0 0 var(--taskbar-h) 0;
  z-index: 8500;
  display: none;
  pointer-events: none;         /* the desktop underneath still takes clicks */
}
#clippy.on { display: block; }
#clippy > * { pointer-events: auto; }

/* The runtime sets position, left, top and the background sprite inline. It
   also sets width and height from the agent's own frame size, which is 124x93
   for Clippy and 128x128 for Merlin, so nothing here may state either. */
.clippy-sprite {
  image-rendering: pixelated;
  cursor: default;
}

/* -------------------------------------------------------------- balloon */

.clippy-balloon {
  position: absolute;
  display: none;
  max-width: 260px; min-width: 150px;
  background: #ffffe1;                    /* the Win2K tooltip yellow */
  color: var(--text);
  border: 1px solid var(--dkshadow);
  padding: 6px 8px;
  cursor: default;
}
.clippy-balloon.open { display: block; }

.clippy-text { line-height: 15px; white-space: pre-wrap; }

.clippy-buttons {
  display: flex; justify-content: flex-end; gap: 6px;
  margin: 8px -2px -2px 0;
}
.clippy-buttons button { min-width: 60px; min-height: 20px; padding: 0 8px; }

/* The tail is drawn rather than an image: two triangles, the back one the
   border colour, so the balloon keeps its 1px outline all the way round.
   --tip-x is written by place() in shells/clippy.js and tracks the sprite
   after the box has been clamped sideways. */
.clippy-tip { position: absolute; left: var(--tip-x, 20px); }
.clippy-tip::before, .clippy-tip::after {
  content: ""; position: absolute;
  border: 8px solid transparent;
}
.clippy-balloon .clippy-tip::before { top: 0; border-top-color: var(--dkshadow); }
.clippy-balloon .clippy-tip::after  { top: -1px; border-top-color: #ffffe1; }
.clippy-balloon:not(.below) .clippy-tip { bottom: -6px; }

.clippy-balloon.below .clippy-tip { top: -10px; }
.clippy-balloon.below .clippy-tip::before {
  top: auto; bottom: 0; border-top-color: transparent; border-bottom-color: var(--dkshadow);
}
.clippy-balloon.below .clippy-tip::after {
  top: auto; bottom: -1px; border-top-color: transparent; border-bottom-color: #ffffe1;
}

/* --------------------------------------------------------- context menu */

/* .menu, .menu-item, .menu-sep, .menu-item.has-sub, .submenu and
   .menu-item.disabled are all 2000.css's, shared with the menu bar and the
   Start menu. Only the floating box and the two fixes below are new. */
.clippy-menu {
  position: absolute;
  background: var(--face); box-shadow: var(--raised);
  padding: 3px; min-width: 150px;
}

/* The hint column, where a real menu put its keyboard shortcut. Here it is an
   animation's length, or how many are in a group. */
.clippy-menu .menu-hint {
  margin-left: auto; padding-left: 18px;
  color: var(--shadow); text-shadow: 1px 1px 0 var(--hilight);
}
.clippy-menu .menu-item:hover > .menu-hint,
.clippy-menu li.open > .menu-item > .menu-hint { color: #c8c4bc; text-shadow: none; }

/* Opened from a character who is usually in the bottom right corner, so three
   levels of submenu run off both edges. fit() in shells/clippy.js measures and
   adds this; the vertical lift is an inline margin-top from the same place. */
.clippy-menu .submenu.flip-x { left: auto; right: 100%; }

/* Merlin's Look group is fifteen rows. Scroll rather than clip - but only on a
   list that opens nothing further, since overflow on a parent clips the child
   submenu out of existence. build() adds .leaf. */
.clippy-menu .submenu.leaf {
  max-height: calc(100vh - 60px); overflow-y: auto;
}

/* Smaller on a phone. Three quarters of the 4/3 phone zoom brings him back to
   1x, three screen pixels to each of his on a 3x iPhone, so he stays sharp. Scaled from the top left,
   because that is the corner style.left and style.top place; the placement
   code measures the drawn box, so it already sees the smaller size. */
.phone .clippy-sprite { transform: scale(.75); transform-origin: 0 0; }

/* On a phone the balloon sits level with him on his left (place() in
   shells/clippy.js), as wide as the room beside him allows, with its tail on
   the right pointing at him. Buttons stay on one row, slimmed to fit, and
   wrap only if a label is too long for it. */
.phone .clippy-balloon { max-width: 236px; min-width: 0; }
.phone .clippy-buttons { flex-wrap: wrap; gap: 4px; }
.phone .clippy-buttons button { min-width: 0; padding: 0 6px; }

.clippy-balloon.side .clippy-tip { left: 100%; top: var(--tip-y, 20px); bottom: auto; }
.clippy-balloon.side .clippy-tip::before,
.clippy-balloon.side .clippy-tip::after {
  top: -8px; border-color: transparent;
}
.clippy-balloon.side .clippy-tip::before { left: 0;    border-left-color: var(--dkshadow); }
.clippy-balloon.side .clippy-tip::after  { left: -1px; border-left-color: #ffffe1; }

/* Phone: out of the way while a window fills the screen (see wire() in
   shells/clippy.js), lifted a little while held for dragging, and a menu at
   three quarters size. The menu is scaled rather than zoomed because its
   position is written in the layer's pixels and measured as drawn; a
   transform keeps those two in step, a zoom would scale the position too. */
#clippy.behind { display: none; }
.phone .clippy-sprite { touch-action: none; -webkit-touch-callout: none; }
.phone .clippy-sprite.held { filter: drop-shadow(2px 3px 0 rgba(0,0,0,.35)); }
.phone .clippy-menu { transform: scale(.75); transform-origin: 0 0; }