feat: chat

web/styles.css

@@ -105,7 +105,7 @@ body::before {
 
 .chat-rail-content {
   display: grid;
-  grid-template-rows: minmax(0, 1fr) minmax(92px, 20%) minmax(130px, 30%);
+  grid-template-rows: minmax(0, 1.7fr) minmax(72px, 0.45fr) minmax(92px, 0.65fr) minmax(120px, 0.95fr);
   gap: 16px;
   min-height: 0;
   padding-top: 16px;
@@ -139,6 +139,12 @@ body::before {
   margin-bottom: 8px;
 }
 
+.rail-heading-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
 .rail-heading-row .rail-heading {
   margin-bottom: 0;
 }
@@ -962,6 +968,26 @@ button {
   box-shadow: var(--shadow);
 }
 
+#negotiation-panel {
+  grid-template-rows: auto minmax(0, 1fr);
+  width: min(1280px, calc(100vw - 28px));
+  max-height: min(860px, calc(100vh - 56px));
+}
+
+.negotiation-sync-pill {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 6px 10px;
+  border: 1px solid rgba(240, 214, 129, 0.32);
+  border-radius: 999px;
+  background: rgba(255, 250, 240, 0.12);
+  color: var(--gold-2);
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
 .floating-panel-header {
   display: flex;
   align-items: flex-start;
@@ -977,6 +1003,114 @@ button {
   color: var(--ivory);
 }
 
+.negotiation-workspace {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr) 260px;
+  min-height: 0;
+  height: 100%;
+}
+
+.negotiation-sidebar,
+.negotiation-thread-shell,
+.negotiation-detail-rail {
+  min-height: 0;
+}
+
+.negotiation-sidebar {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  border-right: 1px solid var(--line);
+  background: rgba(255, 250, 240, 0.58);
+}
+
+.negotiation-sidebar-controls {
+  display: grid;
+  gap: 10px;
+  padding: 14px;
+  border-bottom: 1px solid var(--line);
+}
+
+.negotiation-list-panel {
+  display: grid;
+  gap: 8px;
+  padding: 14px;
+  overflow: auto;
+}
+
+.negotiation-row {
+  display: grid;
+  gap: 6px;
+  padding: 11px 12px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: rgba(255, 253, 247, 0.86);
+  cursor: pointer;
+}
+
+.negotiation-row.active {
+  border-color: rgba(52, 83, 38, 0.42);
+  background: #edf3df;
+}
+
+.negotiation-row-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.negotiation-row-title {
+  color: var(--forest);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.negotiation-row-meta {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.negotiation-row-badge {
+  padding: 3px 7px;
+  border-radius: 999px;
+  background: #edf3df;
+  color: var(--forest);
+  font-size: 10px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.negotiation-row-badge.closed {
+  background: #efe6ce;
+  color: var(--muted);
+}
+
+.negotiation-row-unread {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--forest);
+  color: var(--ivory);
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.negotiation-thread-shell {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto auto;
+}
+
+.negotiation-thread-header {
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--line);
+  background: rgba(255, 253, 247, 0.82);
+}
+
 .negotiation-messages {
   overflow: auto;
   padding: 16px;
@@ -993,9 +1127,25 @@ button {
   overflow-wrap: anywhere;
 }
 
+.negotiation-message.self {
+  border-color: rgba(52, 83, 38, 0.28);
+  background: #edf3df;
+}
+
+.negotiation-message-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 6px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 700;
+}
+
 .negotiation-composer {
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: 1fr;
   gap: 10px;
   padding: 12px;
   border-top: 1px solid var(--line);
@@ -1006,6 +1156,64 @@ button {
   border-radius: 12px;
 }
 
+.negotiation-composer-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.negotiation-composer-actions button {
+  flex: 1;
+}
+
+.negotiation-detail-rail {
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  padding: 14px;
+  border-left: 1px solid var(--line);
+  background: rgba(255, 250, 240, 0.52);
+  overflow: auto;
+}
+
+.negotiation-detail-card {
+  display: grid;
+  gap: 10px;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: rgba(255, 253, 247, 0.86);
+}
+
+.negotiation-detail-card h3 {
+  margin: 0;
+  color: var(--forest);
+  font-size: 14px;
+}
+
+.negotiation-detail-kv {
+  display: grid;
+  gap: 6px;
+}
+
+.negotiation-detail-kv div {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.negotiation-detail-kv strong {
+  color: var(--brown);
+}
+
+.negotiation-action-stack {
+  display: grid;
+  gap: 10px;
+}
+
+.negotiation-close-card {
+  width: min(520px, 100%);
+}
+
 .modal-backdrop {
   position: fixed;
   inset: 0;
@@ -2077,4 +2285,13 @@ pre {
   .plans-panel-body {
     grid-template-columns: 1fr;
   }
+
+  .negotiation-workspace {
+    grid-template-columns: 1fr;
+  }
+
+  .negotiation-sidebar,
+  .negotiation-detail-rail {
+    border: 0;
+  }
 }