@import "./tasks.css";
@import "./people.css";
/* The Agent: its mode (the stage, and beside it the conversation behind a
   divider that can be dragged; a dock of three buttons in the end corner), the
   conversation's own look, and its pairing step in its connection card. The
   layout is the same in every language: the conversation is always on the left. */
.tp-agent {
  --tp-conversation-min: 20rem;
  --tp-stage-min: 20rem;
  --tp-divider-size: .625rem;
  --tp-dock-room: calc(var(--tp-rail-size) + 2 * var(--tp-space-3));
  position: relative;
  display: grid;
  grid-template: "stage" minmax(0, 1fr) "conversation" auto / minmax(0, 1fr);
  block-size: 100%;
  min-block-size: 0;
  container: agent / size;
}

/* The stage: the presence, and where the U tools draw what the Agent shows. */
.tp-agent-stage { position: relative; grid-area: stage; min-inline-size: 0; min-block-size: 0; overflow: hidden; }

/* The character fills the stage, under everything else on it. */
.tp-agent-stage > .tp-being { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; }

/* Narrow view: the conversation sits under the stage, up to half the height,
   and keeps clear of the dock. */
.tp-agent-conversation {
  grid-area: conversation;
  max-block-size: 50cqb;
  padding: var(--tp-space-3) var(--tp-dock-room) var(--tp-space-3) var(--tp-space-3);
}

.tp-agent-divider { display: none; }

.tp-agent-dock {
  position: absolute;
  z-index: var(--tp-z-controls);
  inset-block-end: var(--tp-space-3);
  inset-inline-end: var(--tp-space-3);
}

/* Wide view with the conversation open: conversation | divider | stage. The
   divider sets the conversation's width; neither side shrinks below its minimum.
   The width is the frame's, which is the view's own: a view cannot query itself. */
@container frame (min-width: 67.5rem) {
.tp-agent:has(> .tp-agent-conversation:not([hidden])) {
  grid-template:
    "conversation divider stage" minmax(0, 1fr)
    / clamp(var(--tp-conversation-min), var(--tp-conversation-width, 28rem), calc(100% - var(--tp-stage-min) - var(--tp-divider-size))) var(--tp-divider-size) minmax(0, 1fr);
}

.tp-agent-conversation { max-block-size: none; padding: var(--tp-space-3); }

.tp-agent-stage { padding-inline-end: var(--tp-dock-room); }

.tp-agent:has(> .tp-agent-conversation:not([hidden])) > .tp-agent-divider {
  grid-area: divider;
  display: block;
  cursor: col-resize;
  touch-action: none;
  background: linear-gradient(var(--tp-line-strong), var(--tp-line-strong)) center / var(--tp-line-width) 100% no-repeat;
}

.tp-agent-divider:hover,
.tp-agent-divider:focus-visible { background-color: var(--tp-hover); outline: 2px solid var(--tp-accent); outline-offset: -2px; }

.tp-agent[data-resizing] { cursor: col-resize; user-select: none; }
}

@media (forced-colors: active) {
.tp-agent-divider { background-image: linear-gradient(CanvasText, CanvasText) !important; }
}

/* The conversation: the history of the exchange above, the typing field below
   it, in one column. */
.tp-agent-conversation {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: var(--tp-space-2);
  min-inline-size: 0;
  min-block-size: 0;
}

.tp-agent-conversation > * { inline-size: min(var(--tp-sheet-max), 100%); min-inline-size: 0; }

.tp-conversation-history {
  min-block-size: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
}

/* Typing field: one kit field holding attach, the text and send. The field
   shows focus for the text inside it. */
.tp-composer { margin: 0; }

.tp-composer-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--tp-space-1);
  padding: var(--tp-space-1);
}

.tp-composer textarea {
  min-inline-size: 0;
  max-block-size: 30cqb;
  padding: var(--tp-space-2) 0;
  border: 0;
  background: transparent;
  line-height: var(--tp-leading-body);
  resize: none;
  field-sizing: content;
}

.tp-composer textarea:focus-visible { outline: none; }

.tp-composer textarea::placeholder { color: var(--tp-ink-muted); }

/* The pairing step: the one-time code is read digit by digit. */
.tp-agent-code { font-family: var(--tp-font-mono); letter-spacing: .08em; }

/* Pairing, while the request waits on the Safe. */
.tp-agent-approve { display: grid; gap: var(--tp-space-3); justify-items: start; }

/* The conversation's lines: who said it above what was said; the person's tinted. */
.tp-conversation-history { display: grid; align-content: start; gap: var(--tp-space-3); margin: 0; padding: var(--tp-space-3); list-style: none; overflow: auto; }

.tp-message { display: grid; gap: var(--tp-space-1); padding: var(--tp-space-3) var(--tp-space-4); border-radius: var(--tp-radius); background: var(--tp-surface-muted); }

.tp-message[data-who="person"] { background: var(--tp-accent-soft); }

.tp-message-who { font-size: var(--tp-text-caption); color: var(--tp-ink-muted); }

.tp-message-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--tp-leading-body); }

/* Tool content and controls are wrapped by the parametric Being, on its stage. */
.tp-u-surface {
  position: absolute;
  z-index: 1;
  inset: 0;
  margin: auto;
  inline-size: min(46rem, 80%);
  block-size: fit-content;
  max-block-size: 72%;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-2);
  border-radius: var(--tp-radius-lg);
}
.tp-u-surface > :last-child { min-block-size: 0; overflow: auto; }
.tp-u-surface[hidden] { display: none; }
.tp-document-slot { inline-size: 100%; }
.tp-approval { display: grid; gap: var(--tp-space-3); padding: var(--tp-space-3); }
.tp-approval h2, .tp-approval p { margin: 0; }
.tp-approval-detail { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--tp-text-caption); }
.tp-approval-actions { display: flex; justify-content: space-between; gap: var(--tp-space-3); }
.tp-approval-control { border-radius: 50%; min-block-size: 4rem; min-inline-size: 4rem; }
.tp-approval-control[data-approval-action="approve"] { background: var(--tp-success); color: var(--tp-canvas); }
.tp-approval-control[data-approval-action="cancel"] { background: var(--tp-danger); color: var(--tp-canvas); }
.tp-approval-control[data-approval-action="approve"]:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--tp-success); color: var(--tp-canvas); filter: brightness(1.1); }
.tp-approval-control[data-approval-action="cancel"]:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--tp-danger); color: var(--tp-canvas); filter: brightness(1.1); }

/* Connection is also confined to the character stage. The wrapper's notices
   remain available here before pairing or when connection has been lost. */
.tp-agent[data-connected="false"] > .tp-agent-stage { display: flex !important; flex-direction: column; padding-inline-end: 0; }
.tp-agent[data-connected="false"] > .tp-agent-stage > :not(.tp-flow):not(.tp-notices) { display: none !important; }
.tp-agent-stage > .tp-flow { position: absolute; inset: 0; box-sizing: border-box; }
.tp-agent[data-connected="false"] > .tp-agent-stage > .tp-flow { position: relative; inset: auto; flex: 1 1 auto; block-size: auto; }
.tp-agent-stage > .tp-notices[data-notice-owner] { flex: 0 0 auto; box-sizing: border-box; margin-block: var(--tp-space-3); }

/* Connect uses the Document U stage; only its content layout differs. */
.tp-connect-view{inline-size:100%;padding:24px;box-sizing:border-box;color:#202633;background:#eef1f6;font-family:system-ui,sans-serif;line-height:1.5}
.tp-connect-title{font-size:clamp(20px,3vw,30px);overflow-wrap:anywhere;margin-block:0 20px}
.tp-connect-thread{display:grid;gap:16px}.tp-connect-message{background:white;border:1px solid #dbe1e9;border-radius:12px;overflow:hidden}
.tp-connect-message>summary{padding:16px;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:6px 16px}.tp-connect-message>summary strong{grid-column:1/-1;overflow-wrap:anywhere}.tp-connect-message>summary span{overflow-wrap:anywhere}.tp-connect-message time{color:#66738a;font-size:.85em}
.tp-connect-message>summary:focus-visible,.tp-connect-view button:focus-visible,.tp-connect-view a:focus-visible{outline:3px solid #93b1ff;outline-offset:-3px}
.tp-connect-facts{display:flex;gap:8px 20px;flex-wrap:wrap;padding:8px 16px;color:#66738a;font-size:.85em;border-block-start:1px solid #e6ebf2}
.tp-connect-body{padding:16px;overflow-x:auto}.tp-connect-header{display:grid;gap:4px;margin-block-end:16px;overflow-wrap:anywhere}.tp-connect-label{font-weight:600;margin-inline-end:8px}
.tp-connect-html{width:100%;height:min(60vh,600px);min-height:240px;resize:vertical;border:0;background:white;display:block}.tp-connect-text{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;margin:0}.tp-connect-body table{border-collapse:collapse;width:100%}.tp-connect-body td{padding:10px;border:1px solid #dbe1e9;text-align:start}
.tp-connect-attachments{list-style:none;padding:0;display:grid;gap:8px}.tp-connect-attachments li{display:flex;gap:12px;flex-wrap:wrap;overflow-wrap:anywhere}.tp-connect-attachments span{color:#66738a;font-size:.85em}.tp-connect-view>button{margin-block-start:16px;padding:10px 18px;border:1px solid #c7d1df;border-radius:8px;cursor:pointer;background:white;color:inherit;font:inherit}
@media(max-width:600px){.tp-connect-view{padding:12px}.tp-connect-message>summary{grid-template-columns:1fr}.tp-connect-message time{grid-column:1}.tp-connect-body{padding:12px}}

.tp-connect-attachments li>div{flex-basis:100%}.tp-connect-attachments img,.tp-connect-attachments video{max-width:100%;max-height:600px;display:block}.tp-connect-attachments audio{width:100%}

/* Connect Live uses the existing communication/document presentation shell. */
.tp-live-controls { display:flex; flex-wrap:wrap; gap:.5rem; margin-block:1rem; }
.tp-live-controls [aria-pressed="true"] { outline:2px solid var(--accent, #5eead4); }
.tp-live-videos { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%, 260px),1fr)); gap:1rem; }
.tp-live-videos figure { margin:0; min-width:0; display:grid; gap:.25rem; }
.tp-live-videos video { width:100%; max-height:60vh; object-fit:contain; border-radius:.75rem; background:#111827; }
.tp-live-videos audio { display:none; }
.tp-live-roster p { display:flex; gap:.75rem; margin:.25rem 0; }

.tp-live-view { min-inline-size:0; overflow-wrap:anywhere; }
.tp-live-roster p { flex-wrap:wrap; }
.tp-live-roster span { min-width:0; }
.tp-live-videos figure > span { overflow-wrap:anywhere; }
.tp-live-controls button { padding:.5rem .75rem; border:1px solid #c7d1df; border-radius:.5rem; cursor:pointer; background:white; color:inherit; font:inherit; }
.tp-live-controls button:disabled { opacity:.5; cursor:default; }

.tp-live-videos figure[hidden] { display:none; }
.tp-live-devices { display:flex; align-items:end; flex-wrap:wrap; gap:.75rem; margin-block:1rem; }
.tp-live-devices label { display:grid; gap:.25rem; min-inline-size:0; max-inline-size:100%; }
.tp-live-devices select { max-inline-size:100%; padding:.5rem; font:inherit; }
.tp-live-devices p { flex-basis:100%; margin:0; }
.tp-live-videos figure { position:relative; padding:.5rem; border:2px solid transparent; border-radius:.75rem; }
.tp-live-videos figure[data-stage="true"] { grid-column:1/-1; }
.tp-live-videos figure[data-active="true"] { border-color:var(--accent, #5eead4); }
.tp-live-videos figure[data-pinned="true"] { box-shadow:0 0 0 2px var(--accent, #5eead4); }
.tp-live-pin { justify-self:start; font:inherit; padding:.3rem .6rem; cursor:pointer; }
.tp-live-speaking { font-size:.85rem; }
.tp-live-speaking[hidden] { display:none; }
.tp-live-person::before { content:attr(data-avatar); display:grid; place-items:center; min-block-size:6rem; font-size:3rem; background:#e2e8f0; color:#111827; border-radius:.5rem; }