agentdev-webui 1.0.0

package/public/css/styles.css

@@ -0,0 +1,1140 @@
+:root {
+  --sidebar-width: 280px;
+  --touch-target: 44px;
+  --header-height: 60px;
+  --controls-height: 56px;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: monospace; background: #1a1a2e; color: #eee; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
+
+/* Offline banner */
+.offline-banner {
+  display: none;
+  background: #ef4444;
+  color: #fff;
+  padding: 8px 16px;
+  text-align: center;
+  font-size: 12px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2000;
+}
+.offline-banner.visible { display: block; }
+body.offline { padding-top: 32px; }
+
+.header { background: #16213e; padding: 12px 16px; border-bottom: 2px solid #0f3460; display: flex; justify-content: space-between; align-items: center; min-height: var(--header-height); flex-shrink: 0; }
+.header h1 { color: #e94560; font-size: 1.1rem; }
+.status { display: flex; align-items: center; gap: 8px; }
+.status-dot { width: 12px; height: 12px; border-radius: 50%; background: #4ade80; flex-shrink: 0; }
+.status-dot.running { background: #fbbf24; animation: pulse 1s infinite; }
+@keyframes pulse { 50% { opacity: 0.5; } }
+
+/* Hamburger menu button */
+.hamburger {
+  display: none;
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  flex-direction: column;
+  gap: 5px;
+  min-width: var(--touch-target);
+  min-height: var(--touch-target);
+  justify-content: center;
+  align-items: center;
+}
+.hamburger span {
+  display: block;
+  width: 24px;
+  height: 3px;
+  background: #e94560;
+  border-radius: 2px;
+  transition: transform 0.2s, opacity 0.2s;
+}
+.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
+.hamburger.active span:nth-child(2) { opacity: 0; }
+.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
+
+/* Logout button */
+.logout-btn {
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  min-width: var(--touch-target);
+  min-height: var(--touch-target);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #888;
+  transition: color 0.2s;
+  margin-left: 4px;
+}
+.logout-btn:hover { color: #ef4444; }
+
+/* Project selector */
+.project-group, .actions-group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.project-selector {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: #0f3460 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 8px center;
+  color: #eee;
+  border: 1px solid #333;
+  border-radius: 6px;
+  padding: 6px 28px 6px 10px;
+  font-size: 12px;
+  font-family: monospace;
+  cursor: pointer;
+  max-width: 180px;
+  min-height: var(--touch-target);
+  display: flex;
+  align-items: center;
+}
+.project-selector option {
+  background: #16213e;
+  color: #eee;
+  padding: 8px;
+}
+.project-selector:hover { border-color: #555; }
+.project-selector:focus { outline: none; border-color: #e94560; box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.2); }
+
+/* Manage projects button */
+.manage-projects-btn {
+  background: none;
+  border: 1px solid #333;
+  color: #888;
+  cursor: pointer;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: bold;
+  min-width: var(--touch-target);
+  min-height: var(--touch-target);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+.manage-projects-btn:hover { border-color: #e94560; color: #e94560; }
+
+/* Repo multi-select listbox */
+.repo-multiselect {
+  width: 100%;
+  background: #16213e;
+  border: 1px solid #333;
+  color: #fff;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 12px;
+  padding: 0;
+}
+.repo-multiselect option {
+  padding: 6px 10px;
+  cursor: pointer;
+  border-bottom: 1px solid #0f3460;
+}
+.repo-multiselect option:checked {
+  background: #e94560 linear-gradient(0deg, #e94560 0%, #e94560 100%);
+  color: #fff;
+}
+.repo-multiselect option:hover {
+  background: #0f3460;
+}
+.btn-fetch-repos {
+  background: #0f3460;
+  border: 1px solid #333;
+  color: #4ade80;
+  padding: 6px 14px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: monospace;
+  font-size: 12px;
+  white-space: nowrap;
+  transition: all 0.2s;
+}
+.btn-fetch-repos:hover { border-color: #4ade80; background: #16213e; }
+.btn-fetch-repos:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Status options table */
+.status-options-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+  font-family: monospace;
+}
+.status-options-table th {
+  text-align: left;
+  padding: 6px 8px;
+  color: #888;
+  border-bottom: 1px solid #333;
+  font-weight: normal;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.status-options-table td {
+  padding: 5px 8px;
+  border-bottom: 1px solid #0f3460;
+  color: #ccc;
+  vertical-align: middle;
+}
+.status-options-table select {
+  background: #0f3460;
+  border: 1px solid #333;
+  color: #fff;
+  padding: 4px 6px;
+  border-radius: 3px;
+  font-family: monospace;
+  font-size: 11px;
+  cursor: pointer;
+  width: 100%;
+}
+.status-options-table select:focus {
+  outline: none;
+  border-color: #e94560;
+}
+.status-options-table .col-id {
+  color: #666;
+  font-size: 10px;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.status-options-table .col-actions {
+  text-align: center;
+  width: 30px;
+}
+.status-options-table .btn-remove-col {
+  background: none;
+  border: none;
+  color: #666;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+.status-options-table .btn-remove-col:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
+.status-options-table .btn-move {
+  background: none;
+  border: none;
+  color: #666;
+  cursor: pointer;
+  font-size: 12px;
+  padding: 1px 4px;
+}
+.status-options-table .btn-move:hover { color: #4ade80; }
+.btn-add-column {
+  background: none;
+  border: 1px dashed #333;
+  color: #666;
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: monospace;
+  font-size: 11px;
+  margin-top: 6px;
+  width: 100%;
+  transition: all 0.2s;
+}
+.btn-add-column:hover { border-color: #4ade80; color: #4ade80; }
+
+/* Notification bell */
+.notification-bell {
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  min-width: var(--touch-target);
+  min-height: var(--touch-target);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin-left: 8px;
+}
+.notification-bell svg {
+  width: 24px;
+  height: 24px;
+  fill: #888;
+  transition: fill 0.2s, transform 0.2s;
+}
+.notification-bell:hover svg { fill: #e94560; }
+.notification-bell.enabled svg { fill: #4ade80; }
+.notification-bell.ringing svg {
+  animation: ring 0.5s ease;
+}
+@keyframes ring {
+  0%, 100% { transform: rotate(0); }
+  20% { transform: rotate(15deg); }
+  40% { transform: rotate(-15deg); }
+  60% { transform: rotate(10deg); }
+  80% { transform: rotate(-10deg); }
+}
+.notification-bell .badge {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background: #e94560;
+  color: #fff;
+  font-size: 10px;
+  min-width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+}
+.notification-bell .badge.visible { display: flex; }
+
+/* Notification panel */
+.notification-panel {
+  display: none;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  width: 320px;
+  max-height: 400px;
+  background: #1e1e2e;
+  border: 1px solid #333;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+  z-index: 1000;
+  overflow: hidden;
+}
+.notification-panel.open { display: block; }
+.notification-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  border-bottom: 1px solid #333;
+  font-size: 13px;
+  font-weight: 600;
+  color: #ccc;
+}
+.notification-panel-header button {
+  background: none;
+  border: none;
+  color: #4ade80;
+  cursor: pointer;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+.notification-panel-header button:hover { background: rgba(74,222,128,0.1); }
+.notification-panel-body {
+  overflow-y: auto;
+  max-height: 340px;
+}
+.notification-item {
+  padding: 10px 14px;
+  border-bottom: 1px solid #2a2a3a;
+  cursor: default;
+  font-size: 12px;
+}
+.notification-item:hover { background: #252535; }
+.notification-item .notif-title {
+  color: #e0e0e0;
+  font-weight: 500;
+  margin-bottom: 3px;
+}
+.notification-item .notif-message {
+  color: #888;
+  font-size: 11px;
+}
+.notification-item .notif-time {
+  color: #666;
+  font-size: 10px;
+  margin-top: 3px;
+}
+.notification-item.success .notif-title { color: #4ade80; }
+.notification-item.failure .notif-title { color: #e94560; }
+.notification-empty {
+  padding: 30px 14px;
+  text-align: center;
+  color: #666;
+  font-size: 13px;
+}
+
+/* Create ticket modal */
+.modal-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.7);
+  z-index: 2000;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+}
+.modal-overlay.visible { display: flex; }
+.modal {
+  background: #16213e;
+  border-radius: 12px;
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+}
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #0f3460;
+}
+.modal-header h2 { color: #e94560; font-size: 1.1rem; margin: 0; }
+.modal-close {
+  background: none;
+  border: none;
+  color: #888;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 4px 8px;
+  line-height: 1;
+}
+.modal-close:hover { color: #e94560; }
+.modal-body { padding: 20px; }
+.form-group { margin-bottom: 16px; }
+.form-group label {
+  display: block;
+  color: #ccc;
+  font-size: 12px;
+  margin-bottom: 6px;
+}
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  background: #0f3460;
+  border: 1px solid #1a3a5c;
+  border-radius: 6px;
+  color: #eee;
+  font-family: monospace;
+  font-size: 13px;
+  padding: 10px 12px;
+}
+.form-group select:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: #e94560;
+}
+.form-group textarea {
+  min-height: 150px;
+  resize: vertical;
+}
+.form-group .hint {
+  font-size: 10px;
+  color: #666;
+  margin-top: 4px;
+}
+.modal-footer {
+  padding: 16px 20px;
+  border-top: 1px solid #0f3460;
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+}
+.modal-footer button {
+  min-width: 100px;
+}
+.btn-primary { background: #e94560; }
+.btn-primary:hover { background: #c13350; }
+.btn-primary:disabled { background: #666; }
+.form-status {
+  padding: 10px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  margin-bottom: 16px;
+  display: none;
+}
+.form-status.visible { display: block; }
+.form-status.success { background: #22c55e33; color: #4ade80; }
+.form-status.error { background: #ef444433; color: #ef4444; }
+.form-status a { color: inherit; }
+
+/* Voice input */
+.textarea-wrapper {
+  position: relative;
+}
+.textarea-wrapper textarea {
+  padding-right: 50px;
+}
+.voice-btn {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  background: #0f3460;
+  border: none;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s, transform 0.2s;
+}
+.voice-btn:hover { background: #1a3a5c; }
+.voice-btn svg { width: 20px; height: 20px; fill: #888; }
+.voice-btn:hover svg { fill: #e94560; }
+.voice-btn.recording {
+  background: #e94560;
+  animation: pulse-recording 1s infinite;
+}
+.voice-btn.recording svg { fill: #fff; }
+@keyframes pulse-recording {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+.voice-btn.unsupported { display: none; }
+
+/* Add comment button in logs panel */
+.logs-panel-footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 12px 16px;
+  background: linear-gradient(transparent, #1a1a2e 30%);
+  display: none;
+  justify-content: center;
+  pointer-events: none;
+}
+.logs-panel-footer.visible { display: flex; }
+.logs-panel-footer button {
+  pointer-events: auto;
+  background: #0f3460;
+  border: 1px solid #1a3a5c;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  font-size: 13px;
+}
+.logs-panel-footer button:hover { background: #e94560; border-color: #e94560; }
+.logs-panel-footer button svg { width: 16px; height: 16px; fill: currentColor; }
+.logs-panel-footer .stop-btn { background: #dc2626; border-color: #b91c1c; color: #fff; }
+.logs-panel-footer .stop-btn:hover { background: #b91c1c; border-color: #991b1b; }
+
+/* Todo count badge in sidebar tab */
+.todo-count { font-size: 10px; background: #e94560; color: #fff; border-radius: 8px; padding: 1px 6px; margin-left: 4px; display: none; }
+.todo-count.visible { display: inline; }
+
+.controls { display: flex; gap: 8px; padding: 10px 16px; background: #16213e; border-bottom: 1px solid #0f3460; align-items: center; flex-wrap: wrap; min-height: var(--controls-height); flex-shrink: 0; }
+.agent-count { color: #60a5fa; margin-left: auto; font-size: 12px; }
+button { background: #0f3460; color: #fff; border: none; padding: 10px 16px; border-radius: 5px; cursor: pointer; min-height: var(--touch-target); font-size: 13px; }
+button:hover { background: #e94560; }
+button:active { background: #c13350; }
+button:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.main { display: flex; flex: 1; overflow: hidden; position: relative; }
+.logs-container { position: absolute; top: 0; bottom: 0; left: 0; right: var(--sidebar-width); display: flex; flex-direction: column; transition: right 0.3s ease; }
+.tabs { display: flex; background: #0f3460; border-bottom: 1px solid #0f3460; overflow-x: auto; flex-shrink: 0; -webkit-overflow-scrolling: touch; }
+.tab { padding: 12px 16px; cursor: pointer; border-right: 1px solid #1a1a2e; display: flex; align-items: center; gap: 8px; white-space: nowrap; min-height: var(--touch-target); }
+.tab:hover { background: #1a3a5c; }
+.tab.active { background: #1a1a2e; color: #e94560; border-bottom: 2px solid #e94560; }
+.tab .close { font-size: 16px; opacity: 0.6; padding: 4px 8px; border-radius: 3px; min-width: 28px; min-height: 28px; display: flex; align-items: center; justify-content: center; }
+.tab .close:hover, .tab .close:active { opacity: 1; background: #e94560; }
+.tab-content { flex: 1; position: relative; overflow: hidden; }
+.logs-panel { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 16px; overflow-y: auto; display: none; -webkit-overflow-scrolling: touch; }
+.logs-panel.active { display: block; }
+
+/* View toggle */
+.view-toggle {
+  display: flex;
+  border: 1px solid #333;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-right: 4px;
+}
+.view-toggle .view-btn {
+  padding: 6px 12px;
+  font-size: 12px;
+  background: transparent;
+  color: #888;
+  border: none;
+  border-radius: 0;
+  cursor: pointer;
+  min-height: auto;
+}
+.view-toggle .view-btn:hover { background: #1a3a5c; color: #eee; }
+.view-toggle .view-btn.active { background: #0f3460; color: #e94560; }
+
+/* Board view */
+.board-container {
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: var(--sidebar-width);
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 16px;
+  background: #1a1a2e;
+  transition: right 0.3s ease;
+}
+.board-container.active { display: flex; }
+.board {
+  display: flex;
+  gap: 12px;
+  height: 100%;
+  width: 100%;
+}
+.board-column {
+  flex: 1;
+  min-width: 200px;
+  display: flex;
+  flex-direction: column;
+  background: #16213e;
+  border-radius: 8px;
+  border: 1px solid #0f3460;
+  overflow: hidden;
+}
+.board-column-header {
+  padding: 12px 14px;
+  font-size: 13px;
+  font-weight: bold;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2px solid var(--col-color, #888);
+  flex-shrink: 0;
+}
+.board-column-header .col-title { color: var(--col-color, #888); }
+.board-column-header .col-count {
+  background: var(--col-color, #888);
+  color: #000;
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: bold;
+}
+.board-column-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+  -webkit-overflow-scrolling: touch;
+}
+.board-card {
+  background: #0f3460;
+  border-radius: 6px;
+  padding: 10px 12px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  transition: background 0.15s;
+  border-left: 3px solid var(--col-color, #888);
+}
+.board-card:hover { background: #1a3a5c; }
+.board-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+.board-card-number {
+  color: #4ade80;
+  font-weight: bold;
+  font-size: 13px;
+  text-decoration: none;
+}
+.board-card-number:hover { text-decoration: underline; }
+.board-card-repo {
+  font-size: 10px;
+  color: #888;
+  background: #1a1a2e;
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+.board-card-title {
+  font-size: 12px;
+  color: #ccc;
+  line-height: 1.4;
+  margin-bottom: 8px;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.board-card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 10px;
+  color: #666;
+}
+.board-card-author {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.board-card-author img {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}
+.board-card-state {
+  font-size: 9px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  text-transform: uppercase;
+}
+.board-card-state.open { background: #166534; color: #4ade80; }
+.board-card-state.closed { background: #7f1d1d; color: #ef4444; }
+.board-card-claude {
+  font-size: 9px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: #7c3aed;
+  color: #fff;
+  font-weight: bold;
+}
+.board-card[draggable] { cursor: grab; }
+.board-card[draggable]:active { cursor: grabbing; }
+.board-card.dragging { opacity: 0.4; }
+.board-column-body.drag-over {
+  background: rgba(233, 69, 96, 0.08);
+  border: 2px dashed rgba(233, 69, 96, 0.4);
+  border-radius: 6px;
+}
+.board-empty {
+  color: #555;
+  font-size: 12px;
+  text-align: center;
+  padding: 20px 10px;
+}
+
+/* Ticket detail panel */
+.ticket-panel-overlay {
+  display: none;
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 2000;
+}
+.ticket-panel-overlay.visible { display: block; }
+.ticket-panel {
+  position: fixed;
+  top: 0;
+  right: -600px;
+  width: 580px;
+  max-width: 90vw;
+  height: 100vh;
+  background: #16213e;
+  border-left: 2px solid #0f3460;
+  z-index: 2001;
+  display: flex;
+  flex-direction: column;
+  transition: right 0.3s ease;
+}
+.ticket-panel.open { right: 0; }
+.ticket-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 16px 20px;
+  border-bottom: 1px solid #0f3460;
+  flex-shrink: 0;
+}
+.ticket-panel-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #eee;
+  line-height: 1.4;
+  flex: 1;
+  margin-right: 12px;
+}
+.ticket-panel-title a { color: #4ade80; text-decoration: none; }
+.ticket-panel-title a:hover { text-decoration: underline; }
+.ticket-panel-close {
+  background: none;
+  border: none;
+  color: #888;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+  min-width: auto;
+  min-height: auto;
+}
+.ticket-panel-close:hover { color: #e94560; background: none; }
+.ticket-panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px;
+  -webkit-overflow-scrolling: touch;
+}
+.ticket-meta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+  font-size: 12px;
+}
+.ticket-meta-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: #888;
+}
+.ticket-meta-item img { width: 18px; height: 18px; border-radius: 50%; }
+.ticket-meta-badge {
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: bold;
+}
+.ticket-meta-badge.open { background: #166534; color: #4ade80; }
+.ticket-meta-badge.closed { background: #7f1d1d; color: #ef4444; }
+.ticket-meta-badge.status { background: #0f3460; }
+.ticket-body {
+  background: #1a1a2e;
+  border: 1px solid #0f3460;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 20px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: #ccc;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.ticket-body a { color: #60a5fa; }
+.ticket-comments-header {
+  font-size: 13px;
+  font-weight: bold;
+  color: #888;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #0f3460;
+}
+.ticket-comment {
+  background: #1a1a2e;
+  border: 1px solid #0f3460;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+.ticket-comment-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: #0f3460;
+  font-size: 12px;
+}
+.ticket-comment-header img { width: 20px; height: 20px; border-radius: 50%; }
+.ticket-comment-header .author { color: #eee; font-weight: bold; }
+.ticket-comment-header .date { color: #666; margin-left: auto; }
+.ticket-comment-body {
+  padding: 12px 14px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: #ccc;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.ticket-comment-body a { color: #60a5fa; }
+.ticket-no-comments {
+  color: #555;
+  font-size: 13px;
+  text-align: center;
+  padding: 20px;
+}
+
+/* Edit/Comment buttons */
+.ticket-edit-btn {
+  background: none;
+  border: 1px solid #333;
+  color: #888;
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  transition: color 0.15s, border-color 0.15s;
+}
+.ticket-edit-btn:hover { color: #60a5fa; border-color: #60a5fa; }
+.ticket-edit-save, .ticket-edit-cancel {
+  padding: 4px 12px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  font-family: monospace;
+}
+.ticket-edit-save { background: #22c55e; color: #fff; }
+.ticket-edit-save:hover { background: #16a34a; }
+.ticket-edit-cancel { background: #333; color: #ccc; }
+.ticket-edit-cancel:hover { background: #444; }
+.ticket-add-comment {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #1a3a5c;
+}
+.ticket-add-comment textarea {
+  width: 100%;
+  padding: 10px;
+  background: #0f3460;
+  border: 1px solid #333;
+  color: #eee;
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: monospace;
+  resize: vertical;
+}
+.ticket-add-comment textarea:focus { border-color: #60a5fa; outline: none; }
+.ticket-comment-submit {
+  padding: 6px 16px;
+  background: #22c55e;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  font-family: monospace;
+}
+.ticket-comment-submit:hover { background: #16a34a; }
+.ticket-comment-submit:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Open/Close ticket button */
+.ticket-state-btn {
+  padding: 4px 12px;
+  border: 1px solid;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  font-family: monospace;
+  transition: opacity 0.15s;
+}
+.ticket-state-btn:hover { opacity: 0.8; }
+.ticket-state-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.ticket-state-btn.close-issue { background: #7c3aed22; color: #a78bfa; border-color: #7c3aed; }
+.ticket-state-btn.reopen-issue { background: #22c55e22; color: #4ade80; border-color: #22c55e; }
+
+/* Sidebar overlay */
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 999;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.sidebar-overlay.visible { opacity: 1; }
+
+.sidebar { position: absolute; top: 0; bottom: 0; right: 0; width: var(--sidebar-width); display: flex; flex-direction: column; background: #16213e; border-left: 1px solid #0f3460; z-index: 1000; transition: transform 0.3s ease; }
+.sidebar-tabs { display: flex; border-bottom: 1px solid #0f3460; }
+.sidebar-tab { flex: 1; padding: 14px 12px; text-align: center; cursor: pointer; font-size: 12px; color: #888; min-height: var(--touch-target); }
+.sidebar-tab:hover { background: #1a3a5c; }
+.sidebar-tab.active { color: #e94560; border-bottom: 2px solid #e94560; background: #1a1a2e; }
+.sidebar-content { flex: 1; overflow: hidden; position: relative; }
+.agent-list { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 10px; overflow-y: auto; display: none; -webkit-overflow-scrolling: touch; }
+.agent-list.active { display: block; }
+.agent-item { padding: 12px 14px; margin: 6px 0; border-radius: 6px; background: #0f3460; cursor: pointer; font-size: 13px; position: relative; min-height: var(--touch-target); }
+.agent-item:hover { background: #1a3a5c; }
+.agent-item:active { background: #1a4a6c; }
+.agent-item.active { border-left: 3px solid #e94560; }
+.agent-item .ticket { color: #4ade80; }
+.agent-item .view-btn { font-size: 11px; color: #60a5fa; margin-left: auto; padding: 4px 8px; background: rgba(96,165,250,0.1); border-radius: 4px; }
+.agent-item .elapsed { font-size: 11px; color: #fbbf24; margin-top: 6px; }
+.log-entry { padding: 8px 12px; margin: 3px 0; border-radius: 4px; white-space: pre-wrap; font-size: 12px; word-break: break-word; line-height: 1.4; }
+.log-entry.ts { background: #0f3460; color: #e94560; font-weight: bold; margin-top: 15px; }
+.log-entry.ok { color: #4ade80; }
+.log-entry.err { color: #ef4444; }
+.log-entry.tool { color: #fbbf24; }
+.log-entry.phase { color: #60a5fa; font-weight: bold; background: rgba(96,165,250,0.1); }
+
+/* Tooltip styles - desktop only */
+.tooltip {
+  position: fixed;
+  z-index: 2010;
+  background: #16213e;
+  border: 1px solid #0f3460;
+  border-radius: 8px;
+  padding: 12px;
+  width: 320px;
+  max-width: 350px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s, visibility 0.15s;
+}
+.tooltip.visible { opacity: 1; visibility: visible; }
+.tooltip-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #0f3460; }
+.tooltip-avatar { width: 36px; height: 36px; border-radius: 50%; background: #0f3460; }
+.tooltip-author { font-size: 12px; }
+.tooltip-author-name { color: #60a5fa; font-weight: bold; }
+.tooltip-author-time { color: #888; font-size: 10px; }
+.tooltip-title { font-size: 13px; font-weight: bold; color: #e94560; margin-bottom: 8px; line-height: 1.4; }
+.tooltip-desc { font-size: 11px; color: #ccc; line-height: 1.5; margin-bottom: 10px; max-height: 80px; overflow: hidden; }
+.tooltip-meta { display: flex; gap: 10px; flex-wrap: wrap; }
+.tooltip-status { font-size: 10px; padding: 3px 8px; border-radius: 12px; }
+.tooltip-status.open { background: #22c55e33; color: #4ade80; }
+.tooltip-status.closed { background: #ef444433; color: #ef4444; }
+.tooltip-status.in-progress { background: #fbbf2433; color: #fbbf24; }
+.tooltip-elapsed { font-size: 10px; color: #fbbf24; background: #fbbf2422; padding: 3px 8px; border-radius: 12px; }
+.tooltip-repo { font-size: 10px; color: #888; background: #0f3460; padding: 3px 8px; border-radius: 12px; }
+
+/* Bottom sheet for mobile */
+.bottom-sheet {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #16213e;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
+  z-index: 1100;
+  transform: translateY(100%);
+  transition: transform 0.3s ease;
+  max-height: 70vh;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.bottom-sheet.visible { transform: translateY(0); }
+.bottom-sheet-handle {
+  width: 40px;
+  height: 4px;
+  background: #0f3460;
+  border-radius: 2px;
+  margin: 12px auto;
+}
+.bottom-sheet-content { padding: 0 20px 24px 20px; }
+.bottom-sheet .tooltip-header { margin-bottom: 16px; padding-bottom: 16px; }
+.bottom-sheet .tooltip-title { font-size: 16px; margin-bottom: 12px; }
+.bottom-sheet .tooltip-desc { font-size: 13px; max-height: none; margin-bottom: 16px; }
+.bottom-sheet .tooltip-meta { gap: 12px; }
+.bottom-sheet .tooltip-status,
+.bottom-sheet .tooltip-elapsed,
+.bottom-sheet .tooltip-repo { font-size: 12px; padding: 6px 12px; }
+.bottom-sheet .view-logs-btn {
+  display: block;
+  width: 100%;
+  background: #e94560;
+  color: #fff;
+  border: none;
+  padding: 14px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: bold;
+  margin-top: 20px;
+  cursor: pointer;
+}
+.bottom-sheet .view-logs-btn:active { background: #c13350; }
+
+/* Mobile sidebar tabs bar - hidden on desktop */
+.mobile-sidebar-tabs {
+  display: none;
+  background: #16213e;
+  border-bottom: 1px solid #0f3460;
+  flex-shrink: 0;
+}
+.mobile-sidebar-tab {
+  flex: 1;
+  padding: 10px 8px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: #888;
+  font-size: 12px;
+  font-family: monospace;
+  cursor: pointer;
+  min-height: 40px;
+  position: relative;
+}
+.mobile-sidebar-tab:hover { color: #ccc; }
+.mobile-sidebar-tab:active { background: #1a3a5c; }
+.mobile-sidebar-tab.active { color: #e94560; border-bottom-color: #e94560; }
+
+/* Mobile styles */
+@media (max-width: 768px) {
+  :root {
+    --sidebar-width: 85vw;
+  }
+  .header { flex-wrap: wrap; gap: 4px; padding: 8px 12px; }
+  .header h1 { font-size: 1rem; }
+  .hamburger { display: flex; }
+  .mobile-sidebar-tabs { display: flex; }
+  .logs-container { right: 0; }
+  .board-container { right: 0; }
+  .sidebar { transform: translateX(100%); }
+  .sidebar.open { transform: translateX(0); }
+  .sidebar-overlay.visible { display: block; }
+  .tooltip { display: none !important; }
+  .controls { gap: 6px; padding: 8px 12px; }
+  .controls button { padding: 8px 12px; font-size: 12px; flex: 1; min-width: 0; }
+  .agent-count { width: 100%; text-align: center; margin: 4px 0 0 0; }
+  .logs-panel { padding: 12px; }
+  .log-entry { font-size: 11px; padding: 6px 10px; }
+  .scroll-to-bottom { right: 24px; }
+  /* Hide less-important action buttons on mobile to keep logout visible */
+  .actions-group .logout-btn:not(#logoutBtn) { display: none; }
+  .project-selector { max-width: 120px; font-size: 11px; }
+  .manage-projects-btn { min-width: 36px; min-height: 36px; padding: 2px 6px; }
+}
+
+/* Scroll to bottom button */
+.scroll-to-bottom {
+  position: fixed;
+  bottom: 24px;
+  right: calc(var(--sidebar-width) + 24px);
+  width: 44px;
+  height: 44px;
+  background: #e94560;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(233, 69, 96, 0.4);
+  z-index: 100;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(20px);
+  transition: opacity 0.2s, visibility 0.2s, transform 0.2s, background 0.2s;
+}
+.scroll-to-bottom.visible {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+.scroll-to-bottom:hover {
+  background: #c13350;
+  transform: scale(1.1);
+}
+.scroll-to-bottom:active {
+  transform: scale(0.95);
+}
+.scroll-to-bottom svg {
+  width: 24px;
+  height: 24px;
+  fill: #fff;
+}
+
+/* Desktop styles */
+@media (min-width: 769px) {
+  .bottom-sheet { display: none !important; }
+  .sidebar-overlay { display: none !important; }
+}