/* The icon-button package (COMMAND-1259): icon-only buttons, the main action as icon + one word, the tabs, the name
   bubble and the own confirm window. Loaded by index.html after app.css and every other package's stylesheet, so a
   button's own class (btn, primary, ghost, danger, small-btn) keeps its colours and these rules set its shape. Built
   without a design: the bubble and the confirm window carry poc-ui. */

/* A long press shows the name: no text selection and no phone menu on a named button. */
.icon-only, .icon-word, .ib-tab[data-tip] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ib-own: a place that draws its whole look itself (the composer's round send and mic) keeps its own size and colours. */
.icon-only:not(.ib-own) svg.lucide, .icon-word svg.lucide, .ib-tab svg.lucide { width: 20px; height: 20px; flex: none; }

/* Icon only: a square button, as tall as the text button it replaces. */
.btn.icon-only { width: 44px; min-width: 44px; padding: 0; }
.btn.small-btn.icon-only, .btn.small.icon-only { width: 38px; min-width: 38px; min-height: 38px; }
.btn.small-btn.icon-only svg.lucide, .btn.small.icon-only svg.lucide { width: 18px; height: 18px; }
.btn.big.icon-only { width: 52px; min-height: 52px; }
.icon-only:not(.btn):not(.icon-btn):not(.ib-own) {
  display: inline-grid; place-items: center;
  min-width: 32px; min-height: 32px; padding: 4px;
  border: 0; border-radius: 10px; background: none; color: inherit; cursor: pointer; font: inherit;
}
.icon-only:not(.btn):not(.icon-btn):disabled { opacity: .45; cursor: default; }

/* Icon + one word: the screen's main action. */
.icon-word { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn.icon-word { padding: 0 14px 0 12px; white-space: nowrap; }
.btn.small-btn.icon-word { padding: 0 12px 0 10px; }
.btn.small-btn.icon-word svg.lucide { width: 18px; height: 18px; }

/* TP-596: the word only (a button named by its record, variant label, or one whose record has no icon). */
.label-only { display: inline-flex; align-items: center; justify-content: center; }
.btn.label-only { padding: 0 14px; white-space: nowrap; }
.btn.small-btn.label-only { padding: 0 12px; }

/* Yes is always green, no always red (approve and reject; consent's Allow and Deny). */
.icon-only.tone-yes, .icon-word.tone-yes, .label-only.tone-yes { background: var(--advice-soft); border-color: transparent; color: var(--advice); }
.icon-only.tone-no, .icon-word.tone-no, .label-only.tone-no { background: var(--danger-soft); border-color: transparent; color: var(--danger); }

/* Tabs: the open one its icon and its name, the others their icon. */
.ib-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.ib-tab:not(.on) { min-width: 40px; }
.ib-tab-name { overflow: hidden; text-overflow: ellipsis; }
.ib-tab-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--surface-2); color: var(--muted); font-size: 0.72rem; font-weight: 700; line-height: 18px; text-align: center;
}

/* The name bubble: above the button when there is room, else below it; never wider than the screen. */
#icon-tip {
  position: fixed; z-index: 1000; pointer-events: none;
  max-width: min(280px, calc(100vw - 8px)); padding: 4px 9px; border-radius: 8px;
  background: var(--text); color: var(--bg); box-shadow: 0 4px 14px rgb(0 0 0 / 22%);
  font-size: 0.8rem; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#icon-tip[hidden] { display: none; }

/* The own confirm window (instead of the browser's): over a dimmed page; at the bottom on a phone, in the middle on a
   wide screen; above every other popup, since it can be asked from inside one. */
.confirm-back {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, 0.45);
}
@media (min-width: 900px) { .confirm-back { align-items: center; } }
.confirm-window { border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 8px 28px rgb(0 0 0 / 25%); }
.confirm-window .modal-head:empty { display: none; }
.confirm-window .modal-body { padding-top: 16px; }
.confirm-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.confirm-input { display: block; width: 100%; margin-top: 12px; }
.confirm-window .modal-foot { display: flex; justify-content: flex-end; gap: 8px; }

/* The overlay menu (COMMAND-1631, IDEA-5671): a toggle. Open, the panel grows from the corner the button sits in into
   the screen; the button stays in that corner, above the panel, and shows an X. --overlay-menu-btn is the button's
   height, so the first row starts below it (a top corner) or the last row ends above it (a bottom corner). */
.overlay-menu { position: relative; flex: none; display: inline-flex; }
.overlay-menu-btn { position: relative; }
.overlay-menu-icon, .overlay-menu-close { display: inline-flex; align-items: center; justify-content: center; }
.overlay-menu-btn .overlay-menu-close, .overlay-menu[data-open] > .overlay-menu-btn .overlay-menu-icon { display: none; }
.overlay-menu[data-open] > .overlay-menu-btn .overlay-menu-close { display: inline-flex; }
.overlay-menu[data-open] { z-index: 31; }
.overlay-menu[data-open] > .overlay-menu-btn { z-index: 2; color: var(--text); }
.overlay-menu-panel { position: absolute; z-index: 1; min-width: 210px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; display: flex; flex-direction: column; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 6px 20px rgb(0 0 0 / 25%); }
.overlay-menu-panel[hidden] { display: none !important; }
.overlay-menu[data-corner="tl"] > .overlay-menu-panel { top: -4px; left: -4px; right: auto; bottom: auto; padding-top: calc(var(--overlay-menu-btn, 40px) + 8px); transform-origin: top left; }
.overlay-menu[data-corner="tr"] > .overlay-menu-panel { top: -4px; right: -4px; left: auto; bottom: auto; padding-top: calc(var(--overlay-menu-btn, 40px) + 8px); transform-origin: top right; }
.overlay-menu[data-corner="bl"] > .overlay-menu-panel { bottom: -4px; left: -4px; right: auto; top: auto; padding-bottom: calc(var(--overlay-menu-btn, 40px) + 8px); transform-origin: bottom left; }
.overlay-menu[data-corner="br"] > .overlay-menu-panel { bottom: -4px; right: -4px; left: auto; top: auto; padding-bottom: calc(var(--overlay-menu-btn, 40px) + 8px); transform-origin: bottom right; }
.overlay-menu[data-fresh] > .overlay-menu-panel { animation: overlay-menu-grow 140ms ease-out; }
@keyframes overlay-menu-grow { from { opacity: 0; transform: scale(0.6); } }
@media (prefers-reduced-motion: reduce) { .overlay-menu[data-fresh] > .overlay-menu-panel { animation: none; } }