@import url("./selects.css");

/* Shared component presentation using native controls. */
.ui-button {
  --button-face: var(--surface);
  --button-depth: 6px;
  --button-grain-overlay: none;
  --button-edge: color-mix(in srgb, var(--fg) 48%, transparent);
  --button-front-edges:
    linear-gradient(var(--button-edge), var(--button-edge)) top / 100% 1px no-repeat,
    linear-gradient(var(--button-edge), var(--button-edge)) bottom / 100% 1px no-repeat,
    linear-gradient(var(--button-edge), var(--button-edge)) left / 1px 100% no-repeat,
    linear-gradient(var(--button-edge), var(--button-edge)) right / 1px 100% no-repeat;
  position: relative;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
  padding: .625rem 1rem;
  appearance: none;
  border: 0;
  border-radius: 0;
  box-shadow: 6px 12px 16px rgb(0 0 0 / 9%), 6px 20px 32px rgb(0 0 0 / 8%);
  background: var(--button-front-edges),
    var(--button-grain-overlay) center / 100% 100% no-repeat,
    var(--button-surface-grain, none) center / 100% 100% no-repeat,
    var(--button-face);
  color: var(--fg);
}

.ui-button::before, .ui-button::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* Extruded bottom face and right end, extending 6px down and right. */
.ui-button::before {
  left: 0;
  bottom: calc(-1 * var(--button-depth));
  width: calc(100% + var(--button-depth));
  height: var(--button-depth);
  background:
    linear-gradient(var(--button-edge), var(--button-edge)) bottom / 100% 1px no-repeat,
    linear-gradient(45deg, transparent calc(50% - 1px), var(--button-edge) 50%, transparent calc(50% + 1px)) left / var(--button-depth) 100% no-repeat,
    linear-gradient(45deg, transparent calc(50% - 1px), var(--button-edge) 50%, transparent calc(50% + 1px)) right / var(--button-depth) 100% no-repeat,
    var(--button-surface-grain, none) center bottom / 100% 24px no-repeat,
    color-mix(in srgb, var(--button-face) 65%, black);
  clip-path: polygon(0 0, calc(100% - var(--button-depth)) 0, 100% 100%, var(--button-depth) 100%);
}

.ui-button::after {
  top: 0;
  right: calc(-1 * var(--button-depth));
  width: var(--button-depth);
  height: calc(100% + var(--button-depth));
  background:
    linear-gradient(var(--button-edge), var(--button-edge)) right / 1px 100% no-repeat,
    linear-gradient(45deg, transparent calc(50% - 1px), var(--button-edge) 50%, transparent calc(50% + 1px)) top / 100% var(--button-depth) no-repeat,
    linear-gradient(45deg, transparent calc(50% - 1px), var(--button-edge) 50%, transparent calc(50% + 1px)) bottom / 100% var(--button-depth) no-repeat,
    var(--button-grain, url("./button-end-grain.svg")) center / 100% 100% no-repeat,
    color-mix(in srgb, var(--button-face) 80%, white);
  clip-path: polygon(0 0, 100% var(--button-depth), 100% 100%, 0 calc(100% - var(--button-depth)));
}

.ui-button--primary {
  --button-face: var(--accent);
  color: light-dark(#fff, var(--bg));
}

.ui-button--danger {
  color: var(--error);
}

/* Brighter grain on dark surfaces without washing out the button color. */
:root[data-theme="dark"] .ui-button {
  --button-edge: color-mix(in srgb, var(--fg) 48%, transparent);
  --button-grain-overlay: var(--button-surface-highlight, none);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .ui-button {
    --button-edge: color-mix(in srgb, var(--fg) 48%, transparent);
    --button-grain-overlay: var(--button-surface-highlight, none);
  }
}

@media (hover: hover) {
  .ui-button:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translate(-1px, -2px);
    box-shadow: 7px 15px 20px rgb(0 0 0 / 14%), 7px 23px 36px rgb(0 0 0 / 10%);
  }
}

.ui-button:active:not(:disabled):not([aria-disabled="true"]) {
  --button-depth: 2px;
  transform: translate(4px, 4px);
  box-shadow: 2px 3px 6px rgb(0 0 0 / 10%);
  transition-duration: 60ms;
}

.ui-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .ui-button { transition: none; }
}

.ui-button:disabled, .ui-button[aria-disabled="true"] {
  opacity: .5;
  filter: saturate(.45);
  cursor: not-allowed;
  box-shadow: 3px 6px 10px rgb(0 0 0 / 5%);
}

.ui-button:focus-visible, .ui-input:focus-visible, .ui-table-region:focus-visible {
  outline-color: var(--accent);
}

.ui-field {
  display: grid;
  gap: .5rem;
  width: 100%;
  max-width: 28rem;
  min-width: 0;
  font-family: var(--sans);
}

.ui-label {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg);
}

.ui-input-shell {
  position: relative;
  min-width: 0;
}

/* Small, crisp stamp waves outside the input, never over its text. */
.ui-input-shell::before {
  content: "";
  position: absolute;
  inset: -3px;
  pointer-events: none;
  --stamp-horizontal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3' viewBox='0 0 6 3'%3E%3Cpath fill='none' stroke='black' stroke-width='.8' d='M0 1.5Q1.5 .1 3 1.5T6 1.5'/%3E%3C/svg%3E");
  --stamp-vertical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='6' viewBox='0 0 3 6'%3E%3Cpath fill='none' stroke='black' stroke-width='.8' d='M1.5 0Q.1 1.5 1.5 3T1.5 6'/%3E%3C/svg%3E");
  background-color: var(--stamp-color, var(--fg));
  mask-image: var(--stamp-horizontal), var(--stamp-horizontal), var(--stamp-vertical), var(--stamp-vertical);
  mask-size: 6px 3px, 6px 3px, 3px 6px, 3px 6px;
  mask-position: left top, left bottom, left top, right top;
  mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

.ui-input-shell:has(.ui-input:focus)::before {
  --stamp-horizontal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3' viewBox='0 0 6 3'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M0 1.5Q1.5 .1 3 1.5T6 1.5'/%3E%3C/svg%3E");
  --stamp-vertical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='6' viewBox='0 0 3 6'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M1.5 0Q.1 1.5 1.5 3T1.5 6'/%3E%3C/svg%3E");
}

.ui-input-shell:has(.ui-input[aria-invalid="true"]) {
  --stamp-color: var(--error);
}

.ui-input-shell:has(.ui-input:disabled)::before {
  opacity: .2;
}

.ui-input,
input:where(:not([type]), [type="text"], [type="email"], [type="password"], [type="search"], [type="url"], [type="tel"], [type="number"], [type="date"], [type="datetime-local"], [type="time"]) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: .75rem .875rem;
  border: 1px solid var(--border-muted);
  border-radius: 0;
  background-color: var(--surface);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: 0 2px 4px rgb(0 0 0 / 4%);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.ui-input::placeholder, input::placeholder {
  color: var(--muted);
  opacity: .8;
}

.ui-input:hover:not(:disabled):not(:focus),
input:where(:not([type]), [type="text"], [type="email"], [type="password"], [type="search"], [type="url"], [type="tel"], [type="number"], [type="date"], [type="datetime-local"], [type="time"]):hover:not(:disabled):not(:focus) {
  border-color: var(--accent);
}

.ui-input-shell > .ui-input:focus {
  outline: none;
  box-shadow: none;
}

input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.ui-input[aria-invalid="true"], input[aria-invalid="true"] {
  border-color: var(--error);
  background-color: color-mix(in srgb, var(--error) 4%, var(--surface));
}

@media (forced-colors: active) {
  .ui-input-shell > .ui-input:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 3px;
  }
}

.ui-input:disabled,
input:where(:not([type]), [type="text"], [type="email"], [type="password"], [type="search"], [type="url"], [type="tel"], [type="number"], [type="date"], [type="datetime-local"], [type="time"]):disabled {
  background-color: color-mix(in srgb, var(--surface) 45%, var(--bg));
  color: var(--muted);
  border-color: color-mix(in srgb, var(--border-muted) 50%, var(--bg));
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.ui-field-help, .ui-field-error {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.5;
}

.ui-field-help {
  color: var(--muted);
}

.ui-field-error {
  color: var(--error);
}

@media (prefers-reduced-motion: reduce) {
  .ui-input { transition: none; }
}

.ui-field [hidden] {
  display: none;
}

/* Shared spacing for native form compositions. */
:where(.web-connectivity, .web-dialog, .app-sharing, .app-links, .app-creation, .app-connection-form) :is(form, fieldset) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
:where(.web-connectivity, .web-dialog, .app-sharing, .app-links, .app-creation, .app-connection-form) label {
  display: grid;
  gap: .5rem;
}
.web-domain-rows { width: 100%; padding: 0; list-style: none; }
.web-domain-row, .link-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .875rem;
  margin-block: 1rem;
}
.web-domain-row > input { flex: 1 1 14rem; width: auto; }
:where(.web-login, .web-connectivity fieldset) > button { margin: .375rem .75rem .375rem 0; }

/* A comfortable multiline composer, including after auto-grow resets it. */
#input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 8rem;
  padding: .875rem 1rem;
  border: 1px solid var(--border-muted);
  border-radius: .625rem;
  background-color: var(--surface);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  box-shadow: 0 2px 4px rgb(0 0 0 / 4%);
}
#input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
#input::placeholder { color: var(--muted); opacity: .8; }

.ui-badge {
  --badge-tone: light-dark(#64748b, #a3afc2);
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  box-sizing: border-box;
  padding: .3125rem .6875rem;
  border: 1px solid color-mix(in srgb, var(--badge-tone) 30%, transparent);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--badge-tone) 12%, var(--surface));
  color: light-dark(#1b2230, #fff);
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .01em;
  vertical-align: middle;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%), 0 1px 2px rgb(0 0 0 / 5%);
}

.ui-badge::before {
  content: "";
  flex: none;
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  background-color: var(--badge-tone);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--badge-tone) 12%, transparent);
}

.ui-badge--success {
  --badge-tone: light-dark(#168354, #65d6a0);
}

.ui-badge--warning {
  --badge-tone: light-dark(#a66b0a, #efbc62);
}

.ui-badge--danger {
  --badge-tone: light-dark(#c34855, #f28b95);
}

.ui-notice {
  --notice-tone: light-dark(#3975b9, #8dbcf2);
  --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7v.01'/%3E%3C/svg%3E");
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding-block: .875rem;
  padding-inline: 3rem 1rem;
  border: 1px solid color-mix(in srgb, var(--notice-tone) 28%, transparent);
  border-inline-start: 3px solid var(--notice-tone);
  border-radius: .625rem;
  background-color: color-mix(in srgb, var(--notice-tone) 8%, var(--surface));
  color: light-dark(#1b2230, #fff);
  font-family: var(--sans);
  font-size: .875rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 2px 4px rgb(0 0 0 / 4%);
}

.ui-notice::before {
  content: "";
  position: absolute;
  inset-inline-start: .9375rem;
  top: 1rem;
  width: 1.125rem;
  height: 1.125rem;
  background-color: var(--notice-tone);
  mask: var(--notice-icon) center / contain no-repeat;
}

.ui-notice + .ui-notice {
  margin-block-start: .75rem;
}

.ui-notice--error {
  --notice-tone: light-dark(#c34855, #f28b95);
  --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17v.01'/%3E%3C/svg%3E");
}

.ui-empty {
  color: var(--muted);
}

.ui-table-region {
  min-width: 0;
  width: 100%;
  overflow-x: auto;
}

/* Keep column widths independent of row order when sorting or paging. */
.ui-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid var(--border-muted);
  background-color: var(--surface);
  color: var(--fg);
  font-family: var(--sans);
  font-size: .875rem;
  line-height: 1.5;
}

.ui-table > thead > tr > th, .ui-table > tbody > tr > td {
  padding: .875rem 1rem;
  text-align: start;
  vertical-align: middle;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--border-muted);
}

.ui-table > thead > tr > th + th,
.ui-table > tbody > tr > td + td {
  border-inline-start: 1px solid color-mix(in srgb, var(--border-muted) 55%, transparent);
}

.ui-table > thead > tr > th {
  background-color: color-mix(in srgb, var(--fg) 6%, var(--surface));
  border-bottom-width: 2px;
  color: var(--fg);
  font-weight: 600;
}

.ui-table > tbody > tr:nth-child(even) {
  background-color: color-mix(in srgb, var(--fg) 3%, var(--surface));
}

@media (hover: hover) {
  .ui-table > tbody > tr:hover {
    background-color: color-mix(in srgb, var(--accent) 8%, var(--surface));
  }
}

/* Native actions share the primitive face, including dynamically opened dialogs. */
:is(button, a).ui-native-button { margin: .25rem .75rem .75rem 0; overflow: visible; }
a.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-decoration: none;
}
a.ui-button[hidden] { display: none; }

/* Keep the sidebar's New action compact instead of stretching across its column. */
#sidebar #new-session {
  align-self: flex-start;
  width: auto;
  padding: .3rem .65rem;
  margin: .25rem 0 .5rem;
  font-size: .8rem;
  line-height: 1.4;
  --button-depth: 3px;
}

/* Sidebar section disclosures: custom chevron instead of the native marker. */
#sidebar .side-section-toggle {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 -.4rem;
  padding: .3rem .4rem;
  border-radius: 6px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, color .15s ease;
}
#sidebar .side-section-toggle::-webkit-details-marker { display: none; }
#sidebar .side-section-toggle::marker { content: ""; }
#sidebar .side-section-toggle::before {
  content: "";
  flex: 0 0 auto;
  width: .38rem;
  height: .38rem;
  margin-left: .1rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: .7;
  transition: transform .18s ease, opacity .15s ease;
}
#sidebar details[open] > .side-section-toggle::before { transform: rotate(45deg); }
#sidebar .side-section-toggle .side-label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#sidebar .side-section-toggle:hover {
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}
#sidebar .side-section-toggle:hover::before { opacity: 1; }
#sidebar .side-section-toggle:focus-visible {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
  #sidebar .side-section-toggle,
  #sidebar .side-section-toggle::before { transition: none; }
}

/* Sessions: search action in the section header, collapsed list tail. */
#sidebar .side-section-toggle .side-section-action {
  width: auto;
  padding: .2rem .35rem;
  line-height: 0;
  --button-depth: 2px;
}
#session-list .side-item[hidden] { display: none; }
.session-more {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.session-more[hidden] { display: none; }
.session-more.expanded .session-more-ellipsis { display: none; }
.session-more-ellipsis {
  padding: 0 .6rem;
  color: var(--muted);
  line-height: 1;
  letter-spacing: .1em;
}
#session-more-toggle {
  width: auto;
  padding: .2rem .6rem;
  margin: .25rem 0 0;
  font-size: .75rem;
  --button-depth: 2px;
}

/* All-sessions search dialog. */
.session-search {
  box-sizing: border-box;
  width: min(520px, calc(100vw - 2rem));
  max-height: min(640px, calc(100dvh - 2rem));
  padding: 1rem;
  color: var(--fg);
  background-color: var(--surface);
  border: 1px solid var(--border-muted);
  border-radius: .75rem;
}
.session-search[open] {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.session-search::backdrop { background-color: rgb(0 0 0 / .5); }
.session-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.session-search-head h2 { margin: 0; font-size: 1rem; }
#session-search-close { width: auto; padding: .2rem .5rem; --button-depth: 2px; }
#session-search-input {
  box-sizing: border-box;
  width: 100%;
  padding: .45rem .6rem;
  font: inherit;
  color: var(--fg);
  background-color: var(--surface);
  border: 1px solid var(--border-muted);
  border-radius: .4rem;
}
#session-search-status { margin: 0; }
#session-search-status:empty { display: none; }
#session-search-results {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}
#session-search-results .side-item { display: flex; min-width: 0; }
#session-search-results .item-main {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  min-width: 0;
  text-align: left;
}
#session-search-results .item-id {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#session-search-results .dot { flex-shrink: 0; }