Upload style.css

static/css/style.css

@@ -120,6 +120,38 @@ p {
   background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-primary-dark) 130%);
   color: var(--color-text-on-primary);
   border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.header-icon-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(255, 255, 255, 0.18);
+  color: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 150ms ease, transform 100ms ease;
+}
+
+.header-icon-btn:hover {
+  background: rgba(255, 255, 255, 0.28);
+}
+
+.header-icon-btn:active {
+  transform: scale(0.94);
+}
+
+.header-icon-btn svg {
+  width: 20px;
+  height: 20px;
 }
 
 .app-header.provider {
@@ -393,6 +425,181 @@ textarea:focus, input[type="text"]:focus {
   margin-bottom: var(--space-4);
 }
 
+.search-input {
+  width: 100%;
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  font-size: var(--text-base);
+  font-family: inherit;
+  color: var(--color-text);
+  background: var(--color-surface);
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
+.history-row {
+  cursor: pointer;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: var(--space-3) var(--space-4);
+  margin-bottom: var(--space-3);
+  transition: box-shadow 150ms ease, border-color 150ms ease, transform 100ms ease;
+}
+
+.history-row:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-sm);
+}
+
+.history-row:active {
+  transform: scale(0.99);
+}
+
+.history-row:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.history-row .timestamp {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  font-weight: 400;
+  float: right;
+}
+
+/* Provider queue tabs (Waiting / Active / Completed) */
+.queue-tabs {
+  display: flex;
+  gap: var(--space-2);
+  margin-bottom: var(--space-4);
+}
+
+.queue-tab {
+  flex: 1;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface);
+  color: var(--color-text-secondary);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
+}
+
+.queue-tab:hover {
+  border-color: var(--color-provider-accent);
+}
+
+.queue-tab.active {
+  background: var(--color-provider-accent);
+  border-color: var(--color-provider-accent);
+  color: var(--color-text-on-provider-accent);
+}
+
+.queue-tab .tab-count {
+  opacity: 0.8;
+  margin-left: var(--space-1);
+}
+
+/* Workspace: reference/status line above the patient's message */
+.workspace-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-bottom: var(--space-2);
+}
+
+/* Original-language transcript, collapsed by default under the English
+   translation so the provider isn't required to read a language they
+   may not speak, but can always verify against the source. */
+.original-transcript {
+  margin-top: var(--space-3);
+  font-size: var(--text-sm);
+}
+
+.original-transcript summary {
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  font-weight: 600;
+}
+
+.original-transcript summary:hover {
+  color: var(--color-provider-accent-text);
+}
+
+.original-transcript p {
+  margin: var(--space-2) 0 0;
+  color: var(--color-text);
+  background: var(--color-bg);
+  border-radius: var(--radius-sm);
+  padding: var(--space-3);
+}
+
+/* Read-only rows for a patient's other consultations, shown for context
+   in the workspace. Deliberately not clickable - see the comment next to
+   #patient-history-list in provider.html for why. */
+.history-row-static {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: var(--space-3) var(--space-4);
+  margin-bottom: var(--space-3);
+}
+
+.history-row-static .timestamp {
+  float: right;
+  font-weight: 400;
+}
+
+/* Response composer preview: a real translation + real generated speech,
+   so it's visually set apart as "this is what actually gets sent",
+   distinct from the (still-editable, not-yet-committed) reply above it. */
+.preview-block {
+  margin-top: var(--space-4);
+  padding: var(--space-4);
+  border: 1px dashed var(--color-provider-accent);
+  border-radius: var(--radius);
+  background: var(--color-provider-accent-light);
+}
+
+.preview-label {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--color-provider-accent-text);
+  margin-bottom: var(--space-3);
+}
+
+.preview-block .chat-bubble.from-provider {
+  margin-bottom: var(--space-3);
+}
+
+/* Keep the shared audio player on-brand in the provider context (rust
+   accent) instead of the patient page's green. */
+.provider .audio-btn {
+  background: var(--color-provider-accent);
+  color: var(--color-text-on-provider-accent);
+}
+
+.provider .audio-btn:hover {
+  background: var(--color-provider-accent-text);
+}
+
+.provider .audio-btn-sm {
+  background: var(--color-provider-accent-light);
+  color: var(--color-provider-accent-text);
+}
+
+.provider .audio-seek {
+  accent-color: var(--color-provider-accent);
+}
+
 .result-label {
   font-size: var(--text-sm);
   font-weight: 600;