.journaling-v2[hidden],
.journaling-v2.hidden {
  display: none !important;
}

.journaling-v2 {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top))
           12px
           max(12px, env(safe-area-inset-bottom));
  background: rgba(244, 242, 250, 0.97);
}

.journaling-v2-panel {
  width: min(100%, 620px);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 18px 60px rgba(76, 65, 104, 0.18);
  -webkit-overflow-scrolling: touch;
}

.journaling-v2-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 12px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #eeeaf5;
  backdrop-filter: blur(10px);
}

.journaling-v2-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #776c91;
}

.journaling-v2-header h1 {
  margin: 0;
  font-size: 23px;
  line-height: 1.3;
  color: #3f3850;
}

/* V2表示中の右上操作群との重なり防止 */
body.is-journaling-v2 .journaling-v2-header {
  padding-right: 220px;
}

body.is-journaling-v2 .journaling-v2-header > div {
  min-width: 0;
}

body.is-journaling-v2 .journaling-v2-header h1 {
  white-space: nowrap;
}

@media (max-width: 430px) {
  body.is-journaling-v2 .journaling-v2-header {
    padding-left: 14px;
    padding-right: 205px;
  }

  body.is-journaling-v2 .journaling-v2-header h1 {
    font-size: 20px;
  }
}

.journaling-v2-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #f1eef7;
  font-size: 25px;
  line-height: 1;
  color: #554d68;
}

.journaling-v2-body {
  padding: 18px 20px 28px;
}

.journaling-v2-intro {
  text-align: center;
}

.journaling-v2-icon {
  width: 82px;
  height: 82px;
  object-fit: contain;
}

.journaling-v2-question {
  margin: 14px 0 5px;
  font-size: 21px;
  font-weight: 700;
  color: #41394f;
}

.journaling-v2-guide {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #716a7d;
  white-space: pre-line;
}

.journaling-v2-timer-card {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid #e8e2f1;
  border-radius: 20px;
  background: #faf8ff;
  text-align: center;
}

.journaling-v2-timer-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #71677f;
}

.journaling-v2-timer {
  margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #3f3850;
}

.journaling-v2-status {
  min-height: 1.5em;
  margin: 0;
  font-size: 13px;
  color: #7a7186;
}

.journaling-v2-timer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 15px;
}

.journaling-v2-action {
  min-height: 44px;
  padding: 10px 8px;
  border: 1px solid #dcd4e8;
  border-radius: 13px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 700;
  color: #5f566f;
}

.journaling-v2-action-primary {
  background: #776c91;
  border-color: #776c91;
  color: #ffffff;
}

.journaling-v2-action:disabled,
.journaling-v2-finish:disabled {
  opacity: 0.42;
}

.journaling-v2-write-label {
  display: block;
  margin: 22px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #4d455b;
}

.journaling-v2-textarea {
  display: block;
  width: 100%;
  min-height: 280px;
  box-sizing: border-box;
  resize: vertical;
  padding: 16px;
  border: 1px solid #dcd4e8;
  border-radius: 18px;
  background: #fffefd;
  font: inherit;
  font-size: 16px;
  line-height: 1.8;
  color: #322d3a;
  -webkit-appearance: none;
}

.journaling-v2-textarea:focus {
  outline: 3px solid rgba(119, 108, 145, 0.18);
  border-color: #887ca1;
}

.journaling-v2-textarea:disabled {
  background: #f4f1f7;
  color: #77717d;
}

.journaling-v2-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 8px;
  font-size: 12px;
  color: #776f80;
}

.journaling-v2-segments {
  margin-top: 22px;
  padding: 16px;
  border-radius: 18px;
  background: #f7f4fa;
}

.journaling-v2-segments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.journaling-v2-segments-header h2 {
  margin: 0;
  font-size: 15px;
  color: #4b4358;
}

.journaling-v2-segments-header span {
  font-size: 12px;
  color: #7b7287;
}

.journaling-v2-segment-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.journaling-v2-segment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid #e4deeb;
}

.journaling-v2-segment-number {
  font-size: 13px;
  color: #71697b;
}

.journaling-v2-segment-duration {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: #494054;
}

.journaling-v2-footer-actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.journaling-v2-finish,
.journaling-v2-reset,
.journaling-v2-return {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border-radius: 15px;
  font-size: 15px;
  font-weight: 700;
}

.journaling-v2-finish {
  border: 0;
  background: #776c91;
  color: #ffffff;
}

.journaling-v2-reset {
  border: 1px solid #d8d0e2;
  background: #ffffff;
  color: #655c72;
}

.journaling-v2-return {
  border: 0;
  background: #eeeaf4;
  color: #554d62;
}

.journaling-v2-preview-button {
  display: block;
  width: min(100%, 340px);
  margin: 14px auto 0;
  padding: 12px 16px;
  border: 1px dashed #85799f;
  border-radius: 14px;
  background: #faf8ff;
  font-size: 14px;
  font-weight: 700;
  color: #625875;
}

@media (max-width: 420px) {
  .journaling-v2 {
    padding-left: 8px;
    padding-right: 8px;
  }

  .journaling-v2-panel {
    border-radius: 20px;
  }

  .journaling-v2-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .journaling-v2-timer-actions {
    grid-template-columns: 1fr;
  }

  .journaling-v2-timer {
    font-size: 38px;
  }

  .journaling-v2-textarea {
    min-height: 240px;
  }
}

.journaling-v2-chat-section {
  margin-top: 18px;
}

.journaling-v2-chat-toggle {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid #cfc6dd;
  border-radius: 15px;
  background: #ffffff;
  font-size: 15px;
  font-weight: 700;
  color: #5e536e;
}

.journaling-v2-chat-panel {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid #e2dbea;
  border-radius: 18px;
  background: #faf8fd;
}

.journaling-v2-chat-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.journaling-v2-chat-heading h2 {
  margin: 2px 0 0;
  font-size: 18px;
  color: #453d52;
}

.journaling-v2-chat-eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #897e98;
}

.journaling-v2-chat-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: #eee9f3;
  font-size: 22px;
  color: #665d70;
}

.journaling-v2-chat-guide {
  margin: 10px 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: #756d7f;
}

.journaling-v2-chat-messages {
  display: grid;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 14px;
}

.journaling-v2-chat-message {
  padding: 11px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.journaling-v2-chat-message-user {
  margin-left: 28px;
  background: #e9e3f1;
  color: #41384d;
}

.journaling-v2-chat-message-assistant {
  margin-right: 28px;
  background: #ffffff;
  border: 1px solid #e3ddea;
  color: #51495b;
}

.journaling-v2-chat-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #5c5367;
}

.journaling-v2-chat-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #d8d0e1;
  border-radius: 14px;
  background: #ffffff;
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
  resize: vertical;
}

.journaling-v2-chat-send,
.journaling-v2-chat-resume {
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
}

.journaling-v2-chat-send {
  border: 0;
  background: #776c91;
  color: #ffffff;
}

.journaling-v2-chat-resume {
  border: 1px solid #d7cfdf;
  background: #ffffff;
  color: #62586e;
}

.journaling-v2-duration-fieldset {
  margin: 14px 0 16px;
  padding: 0;
  border: 0;
}

.journaling-v2-duration-legend {
  width: 100%;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #62586e;
}

.journaling-v2-duration-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.journaling-v2-duration-option {
  position: relative;
  display: block;
}

.journaling-v2-duration-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.journaling-v2-duration-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #d8d0e1;
  border-radius: 12px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 700;
  color: #62586e;
}

.journaling-v2-duration-option input:checked + span {
  border-color: #776c91;
  background: #eee9f3;
  color: #493f5a;
}

.journaling-v2-duration-option input:focus-visible + span {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.journaling-v2-duration-option input:disabled + span {
  opacity: 0.55;
}

.journaling-v2-custom-duration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  color: #62586e;
}

.journaling-v2-custom-duration[hidden] {
  display: none;
}

.journaling-v2-custom-duration input {
  width: 76px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #d8d0e1;
  border-radius: 12px;
  background: #ffffff;
  font: inherit;
  font-size: 16px;
  text-align: center;
}

.journaling-v2-custom-duration input:disabled {
  opacity: 0.55;
}

.journaling-v2-timer-display {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.journaling-v2-timer-hidden-message {
  margin: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #756d7f;
}

.journaling-v2-timer-hidden-message[hidden] {
  display: none;
}

.journaling-v2-timer-visibility-toggle {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid #d7cfdf;
  border-radius: 12px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
  color: #62586e;
}

.journaling-v2-timer-visibility-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.journaling-v2-finish-guide {
  margin: -4px 4px 4px;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  color: #756d7f;
}

.journaling-v2-result {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid #e2dbea;
  border-radius: 18px;
  background: #faf8fd;
}

.journaling-v2-result h2 {
  margin: 0 0 14px;
  font-size: 20px;
  color: #453d52;
}

.journaling-v2-result-record-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: #51495b;
}

.journaling-v2-result-duration {
  margin: 0 0 16px;
  font-size: 13px;
  color: #756d7f;
}

.journaling-v2-result-block {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: #ffffff;
}

.journaling-v2-result-block h3 {
  margin: 0 0 8px;
  font-size: 15px;
  color: #5c5367;
}

.journaling-v2-result-block p,
.journaling-v2-result-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #51495b;
  white-space: pre-wrap;
}

.journaling-v2-result-placeholder {
  color: #897e98;
}

.journaling-v2-result-conversation {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #ffffff;
}

.journaling-v2-result-conversation summary {
  font-size: 14px;
  font-weight: 700;
  color: #62586e;
  cursor: pointer;
}

/* Phase 5C: journaling V2 intro flow */
.journaling-v2-intro-message {
  width: 100%;
}

.journaling-v2-intro-choices {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.journaling-v2-intro-choice {
  min-width: 112px;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid rgba(122, 88, 48, 0.28);
  border-radius: 999px;
  background: #ffffff;
  color: #4a3728;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.journaling-v2-intro-choice:active {
  transform: translateY(1px);
}

.journaling-v2-intro-choice:focus-visible {
  outline: 3px solid rgba(122, 88, 48, 0.25);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .journaling-v2-intro-choices {
    gap: 10px;
  }

  .journaling-v2-intro-choice {
    min-width: 104px;
    padding-inline: 18px;
  }
}

.journaling-v2-intro-choices[hidden] {
  display: none;
}

/* Phase 5D: journaling V2 finish reflection */
.journaling-v2-reflection {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid #e2dbea;
  border-radius: 18px;
  background: #faf8fd;
}

.journaling-v2-reflection-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #8a7c98;
}

.journaling-v2-reflection h2 {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.6;
  color: #453d52;
}

.journaling-v2-reflection-status {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #756d7f;
}

.journaling-v2-reflection-question {
  margin: 14px 0 0;
  padding: 14px;
  border-radius: 14px;
  background: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  color: #51495b;
  white-space: pre-wrap;
}

.journaling-v2-reflection-label {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: #62586e;
}

.journaling-v2-reflection-answer {
  width: 100%;
  min-height: 104px;
  margin-top: 8px;
  padding: 12px 14px;
  box-sizing: border-box;
  border: 1px solid #dcd4e6;
  border-radius: 14px;
  background: #ffffff;
  color: #453d52;
  font: inherit;
  font-size: 16px;
  line-height: 1.7;
  resize: vertical;
}

.journaling-v2-reflection-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.journaling-v2-reflection-primary,
.journaling-v2-reflection-secondary {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border-radius: 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.journaling-v2-reflection-primary {
  border: 1px solid #675978;
  background: #675978;
  color: #ffffff;
}

.journaling-v2-reflection-secondary {
  border: 1px solid #d9d1e3;
  background: #ffffff;
  color: #5c5367;
}

.journaling-v2-reflection[hidden],
.journaling-v2-reflection-question[hidden],
.journaling-v2-reflection-label[hidden],
.journaling-v2-reflection-answer[hidden],
.journaling-v2-reflection-actions[hidden],
.journaling-v2-reflection-secondary[hidden] {
  display: none;
}


/* Phase 5E: journaling V2 formal save */
.journaling-v2-save-actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.journaling-v2-save-button {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid #675978;
  border-radius: 14px;
  background: #675978;
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.journaling-v2-save-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.journaling-v2-save-status {
  min-height: 1.6em;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #675978;
}

.journaling-v2-save-actions[hidden] {
  display: none;
}

.journaling-v2-safety-links {
  display: grid;
  gap: 12px;
  margin: 22px 0 6px;
}

.journaling-v2-safety-links[hidden] {
  display: none;
}

.journaling-v2-safety-link {
  display: block;
  padding: 16px 18px;
  border: 1px solid rgba(95, 77, 112, 0.28);
  border-radius: 16px;
  background: #ffffff;
  color: #4f3f57;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}

.journaling-v2-safety-link:active {
  transform: translateY(1px);
}

/* 新規ジャーナリングのまとめ表示 */
.journaling-v2-body.is-result-view
  > :not(#journalingV2Result):not(.journaling-v2-footer-actions) {
  display: none !important;
}

/* 保存済みジャーナリング閲覧 */
.journaling-v2-body.is-saved-record-view > * {
  display: none !important;
}

.journaling-v2-body.is-saved-record-view
  > #journalingV2Result {
  display: block !important;
}

.journaling-v2-body.is-saved-record-view
  > .journaling-v2-footer-actions {
  display: block !important;
}

.journaling-v2-body.is-saved-record-view
  > .journaling-v2-footer-actions
  > :not(#journalingV2Return) {
  display: none !important;
}

.journaling-v2-menu {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid rgba(78, 58, 41, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 3px 10px rgba(78, 58, 41, 0.12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.journaling-v2-menu-bar {
  width: 20px;
  height: 2px;
  display: block;
  border-radius: 999px;
  background: #4e3a29;
}

.journaling-v2-menu:active {
  transform: scale(0.97);
}

/* V2表示中は既存の右上操作とモーダルを流用する */
body.is-journaling-v2 #appMain {
  display: block !important;
}

body.is-journaling-v2
  #appMain > .content-stack {
  display: none !important;
}

body.is-journaling-v2
  #appMain > .composer
  > :not(.bottom-composer-panel):not(#calendarModal):not(#menuModal):not(#hamburgerBtn):not(#nicknameCard) {
  display: none !important;
}

body.is-journaling-v2
  .bottom-composer-panel
  > :not(.bottom-tools) {
  display: none !important;
}

body.is-journaling-v2
  #journalingV2Menu {
  display: none !important;
}

/* =========================================
   Journaling V2 font size integration
   existing 小 / 中 / 大 controls
========================================= */

.journaling-v2.font-small {
  --jv2-body-font-size: 13px;
  --jv2-input-font-size: 15px;
  --jv2-emphasis-font-size: 15px;
  --jv2-heading-font-size: 18px;
}

.journaling-v2.font-medium {
  --jv2-body-font-size: 14px;
  --jv2-input-font-size: 16px;
  --jv2-emphasis-font-size: 16px;
  --jv2-heading-font-size: 20px;
}

.journaling-v2.font-large {
  --jv2-body-font-size: 16px;
  --jv2-input-font-size: 18px;
  --jv2-emphasis-font-size: 18px;
  --jv2-heading-font-size: 22px;
}

/* 読む文字 */
.journaling-v2 .journaling-v2-guide,
.journaling-v2 .journaling-v2-status,
.journaling-v2 .journaling-v2-meta,
.journaling-v2 .journaling-v2-chat-guide,
.journaling-v2 .journaling-v2-chat-message,
.journaling-v2 .journaling-v2-result-duration,
.journaling-v2 .journaling-v2-result-block p,
.journaling-v2 .journaling-v2-result-text,
.journaling-v2 .journaling-v2-result-conversation summary,
.journaling-v2 .journaling-v2-reflection-status,
.journaling-v2 .journaling-v2-reflection-label,
.journaling-v2 .journaling-v2-save-status,
.journaling-v2 .journaling-v2-finish-guide {
  font-size: var(--jv2-body-font-size);
}

/* 強調本文・質問 */
.journaling-v2 .journaling-v2-question,
.journaling-v2 .journaling-v2-reflection-question,
.journaling-v2 .journaling-v2-result-record-title {
  font-size: var(--jv2-emphasis-font-size);
}

/* セクション見出し */
.journaling-v2 .journaling-v2-result h2,
.journaling-v2 .journaling-v2-reflection h2 {
  font-size: var(--jv2-heading-font-size);
}

/* 入力する文字 */
.journaling-v2 .journaling-v2-textarea,
.journaling-v2 .journaling-v2-chat-input,
.journaling-v2 .journaling-v2-reflection-answer,
.journaling-v2 .journaling-v2-custom-duration input {
  font-size: var(--jv2-input-font-size);
}

/* V2 font size: duration controls */
.journaling-v2 .journaling-v2-duration-legend {
  font-size: var(--jv2-body-font-size);
}

.journaling-v2 .journaling-v2-duration-option span {
  font-size: var(--jv2-emphasis-font-size);
}

/* V2 font size: remaining controls */
.journaling-v2 .journaling-v2-timer-label,
.journaling-v2 .journaling-v2-meta,
.journaling-v2 .journaling-v2-segments-header span,
.journaling-v2 .journaling-v2-segment-number {
  font-size: var(--jv2-body-font-size);
}

.journaling-v2 .journaling-v2-action,
.journaling-v2 .journaling-v2-write-label,
.journaling-v2 .journaling-v2-segments-header h2,
.journaling-v2 .journaling-v2-segment-duration,
.journaling-v2 .journaling-v2-chat-toggle,
.journaling-v2 .journaling-v2-finish,
.journaling-v2 .journaling-v2-reset,
.journaling-v2 .journaling-v2-return {
  font-size: var(--jv2-emphasis-font-size);
}