.journal-comment-highlight { background: rgba(255,222,89,.22); color: inherit; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.journal-comment-text { white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.journal-comment-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 12px; }
.journal-comment-controls:empty { display: none; }
.journal-comment-controls button,.journal-comment-reply { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 2px; background: transparent; border: 0; color: var(--green-deep); font: inherit; font-size: 13px; cursor: pointer; }
.journal-comment-controls svg,.journal-comment-floating svg { width: 17px; height: 17px; }
.journal-comment-floating { position: fixed; z-index: 160; display: flex; align-items: center; gap: 7px; border: 1px solid #e3d9b8; border-radius: 12px; padding: 10px 12px; background: #fffaf0; color: var(--green-deep); box-shadow: 0 5px 20px #30382020; font: inherit; font-size: 13px; }
.journal-comment-backdrop { position: fixed; inset: 0; z-index: 170; background: #27312645; display: flex; justify-content: flex-end; }
.journal-comment-sheet { width: min(460px,100%); max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; background: #fffcf5; padding: 24px; box-sizing: border-box; box-shadow: -8px 0 35px #28332112; }
.journal-comment-sheet header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.journal-comment-sheet h2 { margin: 0; font-size: 21px; }
.journal-comment-sheet h3 { font-size: 15px; }
.journal-comment-sheet header p,.journal-comment-sheet small { font-size: 12px; color: var(--ink-soft); }
.journal-comment-context strong,.journal-comment-context span { display: block; margin-top: 4px; }
.journal-comment-sheet header button { width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink); font-size: 26px; }
.journal-comment-thread { margin: 16px 0; padding: 14px; border: 1px solid #e5e6d9; border-radius: 16px; }
.journal-comment-thread.is-selected { border-color: #c7ae5e; }
.journal-comment-sheet blockquote { margin: 0 0 12px; padding: 9px 12px; background: rgba(255,222,89,.16); border-left: 2px solid #dcc677; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.journal-comment-sheet .diet-comment { padding: 10px 0; background: transparent; border: 0; }
.journal-comment-sheet .diet-comment strong,.journal-comment-sheet .diet-comment small { display: block; }
.journal-comment-sheet .diet-comment p { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; font-size: 14px; }
.journal-comment-historical,.journal-comment-reply-context { color: var(--ink-soft); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.journal-comment-sheet form,.journal-comment-composer { display: grid; gap: 10px; }
.journal-comment-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.journal-comment-form-actions button { min-height: 40px; padding: 8px 15px; border-radius: 12px; border: 0; background: transparent; color: var(--green-deep); font: inherit; }
.journal-comment-sheet textarea,.journal-comment-composer textarea { box-sizing: border-box; width: 100%; padding: 12px 46px 12px 12px; border-radius: 12px; border: 1px solid #d8deca; background: white; color: var(--ink); font: inherit; resize: vertical; }
.journal-comment-sheet [role="alert"] { color: #974f48; font-size: 13px; margin: 0; }
.journal-comment-notifications .notification-row { width: 100%; text-align: left; }
.journal-status-commented { background: rgba(255,222,89,.12); border-radius: 14px; }
.journal-status-comment-summary { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 0; border: 0; background: transparent; color: var(--green-deep); font: inherit; font-size: 12px; }
.journal-status-comment-summary svg { width: 15px; height: 15px; }
.journal-supplement-comment-row { border-radius: 14px; padding: 2px 6px; }
.journal-supplement-comment-row .journal-comment-controls { margin: -4px 0 4px 36px; }
.journal-comment-deep-focus { outline: 2px solid rgba(220,198,119,.7); outline-offset: 3px; transition: outline-color .3s ease; }
.journal-comment-inline-slot { flex: 0 0 100%; min-width: 0; }
.journal-comment-inline-slot:empty { display: none; }
.journal-comment-inline-slot .journal-comment-composer { margin-top: 2px; padding: 13px; border: 1px solid rgba(65,107,22,.12); border-radius: 15px; background: rgba(255,253,247,.86); box-shadow: 0 8px 20px rgba(50,59,39,.06); }
.journal-comment-composer > label { color: var(--green-deep); font-size: 13px; font-weight: 850; }
.journal-comment-composer [role="alert"] { min-height: 0; margin: 0; color: #974f48; font-size: 12px; }
.journal-comment-input-wrap { position: relative; min-width: 0; }
.journal-comment-emoji-trigger { position: absolute; z-index: 2; right: 7px; bottom: 7px; display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--green); font-size: 20px; cursor: pointer; }
.journal-comment-emoji-trigger:hover,.journal-comment-emoji-trigger:focus-visible { background: var(--sage); outline: 2px solid rgba(65,107,22,.18); }
.journal-comment-input-wrap > .diet-emoji-picker { left: auto; right: 0; }
.journal-comment-inline-context { margin: 0; padding: 8px 10px; border: 0; border-left: 2px solid #dcc677; background: rgba(255,222,89,.13); color: var(--ink-soft); font-size: 12px; white-space: pre-wrap; }
.journal-comment-thread-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.journal-comment-complete { min-height: 36px; padding: 4px 2px; border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13px; cursor: pointer; }
.journal-comment-meal-note-context { margin-top: 8px !important; padding-top: 8px; border-top: 1px solid rgba(65,107,22,.1); white-space: pre-wrap; line-height: 1.45; }
.journal-comment-meal-note-context strong { display: inline !important; margin: 0 5px 0 0 !important; color: var(--green-deep); }
@media (max-width: 640px) { .journal-comment-backdrop { align-items: flex-end; } .journal-comment-sheet { width: 100%; max-height: 85dvh; border-radius: 24px 24px 0 0; padding: 20px 18px max(20px, env(safe-area-inset-bottom)); } }
@media (max-width: 420px) { .journal-comment-inline-slot .journal-comment-composer { padding: 11px; } .journal-comment-form-actions { gap: 6px; } }